DubLets Responsive Web Design
Role
UX Designer, working from research to high-fidelity prototype.
Year
2021
Location
New York/London/Ireland - remote
Contact
conaill.m.odwyer@gmail.com
This project was part of my Google Certificate Course;
‘Design a responsive web for people who need to find apartments in Dublin’
The Problem:
How to create a streamlined user experience for renters and provide a service that is different and more user friendly than ones that are already out in the market?
The Goal:
Create a response website that is user centred and ultimately gets users to the end goal of contacting/posting ads.
A new renting search engine that puts the user first
Project Overview
The Product:
DubLets is a search engine aimed at renters in Dublin between 25-40 years of age. It has price per month pricing, with deposits shown and accessibility options. DubLets aim is to streamline the renting process in Dublin and provide a user focused system when searching for apartments or flat-shares.
Understanding the user
User Research
Personas
Problem Statements
User Journey Maps
User Research: Summary:
I conducted interviews with participants from 3 cities, Dublin, London and New York - but all had rented in Dublin in the past. I discovered that most target users found the renting process more stressful in Dublin than any other city they’ve rented in. Users found search engines helpful but any sought elsewhere, such as word of mouth to find a more reliable place. All users have been renting for years but found when they first sorted it wasn’t user friendly and some found themselves in bad situations.
Going forward, the user needs to be at the centre in order to create a search engine that is streamlined, trustworthy and easy for first time renters to use.
Empathy Maps & Crazy 8’s
User Pain Points
Imagery
Renting search engines don’t provide all listings with images of the flat, while some use fish-eye lens which deceived users in the past.
Pricing
Having ads with price per month only, instead of price per week which can mislead users. Having upfront costs such as deposit was important to users.
Honesty
All users have experience dishonest in the market. Some found it better when they weren’t directly dealing with landlords.
Filters
Some users found filter systems in other cities much broader than ones in Dublin and they wanted a more tailored search.
Meet the Users!
User Journey Map:
Competitive Audit
As the market is flooded with direct competitors, it was easy to find a number of renting search engines. Daft.ie, myhome.ie and spare room.co.uk were the main sites I compared.
Although each was similar in what they offers there wasn’t a shared room option or posting ads for single rooms in Dublin. User pain points were highlighted as prices were a mix of price per month and per week. This caused a user pain pit as users were shown properties which would be out of their budget. Deposit and apartment square footage was not shown on most ads, which was highlighted as another pain point.
From the user interview and competitive audit, it is clear a more friendly, welcoming and streamlined search engine is needed. One that has no hidden costs and was up front an honest with the user. Having a rent and shared option was also key as there doesn’t seem to be a platform for this in Dublin - it either catered for one over the other.
Starting the design
Sitemap
Paper Wireframes
Digital Wireframes
Low-fidelity Prototype
Usability Studies
Site Map
Information Architecture based on user insights
Paper -> Digital Wireframes
Paper Wireframes
I sketched out paper wireframes for each screen, keeping the user pain points in mind.
The ‘rent’ screen paper wireframe below provides users to quickly filter searches, conduct map searches and show news listings.
—>
Paper wireframe for screen size variations
As users access mobile and websites when searching for lettings, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Prioritising the search bar and clearly marked headings in the homepage was a key part of my strategy to tackle this.
Desktop iPad Mobile
Usability Study:
-
Parameters:
Unmoderated usability study
Belfast, Dublin, London dn New York - remote
6 Participants
20-30 minutes
-
Findings:
Accessibility - users wanted to know about lifts and wheelchairs accessibility
Confirmation - users wanted a confirmation when posting an ad or when sending an email
Map View - users wanted to access a map screen when looking at a property
Refining the design
Mockups
Screen size variation mockups
High-fidelity Prototype
Accessibility
Mockups
Before Usability Study
After the usability study, a critical missing page was highlighted. I added a contact page for users to email landlords/realtors to show their interest.
Before Usability Study
Based on user insights from the usability study, I created a confirmation page when users post an ad. This is also based on expectations from other websites that provide confirmation when an action is taken.
After Usability Study
After Usability Study
Mockups - Desktop
Mockups - Mobile
Accessibility Considerations
-
1.
Colour was checked with WebAIM and some of the text didn’t pass and, so, was changed to comply with this.
-
2.
From the usability study, a wheelchair access button was added to the filter search bar.
-
3.
I used heading with different sized text for clear visual hierarchy.
Design System:
Colours were in line with accessibility. I chose the Dublin colours as well as a bright turquoise as the call to action buttons. This remained consistent with each screen variation for an overall better user experience.
Takeaways
Impact:
Peers shared their feedback and said that the design had visual appeal and demonstrated a clear visual hierarchy.
What I Learned:
I realised that you don’t have to cram information you think users might want to see onto a page. Focus on the user needs and pain points throughout the design process. The use of white space from Gestalt theory was useful to my designs also. Accessibility was important in order to provide a service for everyone and I learned to check a11y principles in my design throughout the process.
Quote from a target user:
“I found my way through the app with ease and there was not too much distraction. I liked the idea of sharing ads as it is hard to find a room in Dublin without knowing somebody.”
Let’s connect
Thank you for taking the time to review my work. If you like what you see and want to get in touch I would love to connect.