An online real estate marketplace, helping millions of Australians find the perfect place to call home.
An online real estate marketplace, helping millions of Australians find the perfect place to call home.
PART ONE
PROJECT OVERVIEW
Habitat is a home rental app. It is one of Australia’s largest online real estate marketplaces, and helps millions of Australians find the perfect place to call home. Typical users are between 18-40 years old, most commonly university students, young working adults, and career professionals with growing families.
Proposed client
Habitat Real Estate
Role
UX/UI Designer for end-to-end delivery of the Habitat home rental app, from lo-fidelity concept design to hi-fidelity final iteration.
Responsibilities
Conducting user research & interviews
Building an empathy map
Conducting a competitive audit
Defining user flows & information architecture
Paper and digital wireframing
Low and high fidelity prototyping
Designing user interface mockups
Conducting usability studies
Iterating on designs
Accounting for accessibility
Responsive design for both mobile and web
PROJECT OVERVIEW
Available home rental websites have complex user flows, confusing designs and a surplus of unnecessary information. Many users are overwhelmed by the process of finding a suitable place to live.
01
Complex process to find a home
02
Ambiguous website navigation
03
Too much information all at once
PROJECT OVERVIEW
Design a user friendly home rental website with clear navigation, concise information and efficient user flows such as searching for properties, browsing results, booking appointments and contacting agents.
01
Simplify core user flows
02
Provide clear, useful navigational cues
03
Hide non-essential information under the fold
PROJECT OVERVIEW
Using Adobe XD I added visual richness to a foundation laid out by the wireframes. Creating desktop mockups was an effective way to explore the brand’s visual identity through colour, typography and imagery on a large screen.
Users are greeted with a functional landing page. The most important feature, a search bar, is placed front and center to ease them into the core user flow.
Users search with broad terms first, such as a suburb, then fine tune their results later using fiters. This simplifies the user flow by breaking it down into smaller steps.
To achieve the most accurate results, users can apply filters. They can be as vague or as specific as required, in order to meet their needs.
Key information about each property is laid out concisely in a single column. Users may click on links to learn more about each section.
Reaching out to the agent is one of the most common tasks performed. Minimal effort is required from the user to communicate their message.
REFINING THE DESIGN
Visual styles were also applied to the responsive mobile mockups. Users will often visit the website while out inspecting properties.
A compact version of the homepage was created to fit within the limited real estate of a mobile screen.
Users land on map view and can scroll down to see the list view. The filters overlay is opened easily with the tap of a button.
Users can learn all about the property on this page. Each section is curated to consolidate key information and analytics.
The last step of the core user flow is reaching out to a real estate agent to equire about the property. The confirmation page assures users that their message has been sent successfully.
PART TWO
UNDERSTANDING THE USER
I conducted user interviews and summarised results into empathy maps and user personas to better understand the needs, motivations and pain points of target users.
Primary user groups identified through research:
My new home has to be affordable, but still close enough to campus that I can participate in all the social events.
Prospective university student
I want to live in the suburbs near reputable schools, so my family will have access to high quality education.
Couple looking to upsize
I’m not really a tech person, so the website must be easy to use. Otherwise, I’d rather visit my local agent.
Person with low tech proficiency
UNDERSTANDING THE USER
Users may encounter hurdles while trying to reach their goal. Conducting research helped me identify common pain points on existing online real estate marketplaces and address them effectively.
Navigation
First time users are overwhelmed by the complex process of finding a suitable rental home. The design should make the user flow as simple and efficient as possible.
Inclusivity
Remote users who live interstate/internationally are frustrated by the lack of inclusivity. The design should feature plenty of images and the option for a virtual tour or online inspection.
Content
Users are overwhelmed by too much content. The design should present all information in a clear, concise and logical way. Less important content should be hidden under the fold.
Time
Busy users are frustrated by the manual process of remembering all the inspection times/dates. The design should allow users to automatically add inspection details to a digital calendar.
UNDERSTANDING THE USER
I built an empathy map using data gathered from interviews to better understand a user’s behaviour, attitude, goals and challenges. This allows me to consider the problem from a user’s perspective before starting the design.
UNDERSTANDING THE USER
Fictional personas were built to represent common behaviours, goals and pain points of typical customers. They ensured user-centered design by communicating user needs to guide my decisions.
Problem statement 01
Jamie is a prospective university student looking for his first rental home because he is moving to a new city to study.
Problem statement 02
Ashley is a busy career professional seeking to upsize her rental home because her family is growing.
UNDERSTANDING THE USER
Mapping Jamie’s user journey shows how a first time user might experience the home rental website. It helps to identify possible pain points and improvement opportunities for a more efficient user flow.
PART THREE
STARTING THE DESIGN
Users expressed that complex navigation was a primary pain point. I created a sitemap to establish the information architecture of the website. The goal is to create simple, efficient and logical navigation.
STARTING THE DESIGN
I sketched out paper wireframes for the main screens in my app, rapidly iterating to find different solutions. Different variations of the home screen were drafted, with a focus on simplifying the content and optimising the browsing experience for users.
Screen size variations
Because many of Habitat’s users browse for properties on the go, it is important for the website to be fully responsive for a variety of different devices and screen sizes.
STARTING THE DESIGN
I translated paper sketches to digital wireframes in Adobe XD. This exercise provided the basic structure and key content of the desktop app, which allowed me to catch problems early.
STARTING THE DESIGN
All main screens were rearranged and resized responsively to fit a mobile device. Visual elements have either been shrunk or gracefully degraded to suit a smaller screen with limited real estate.
STARTING THE DESIGN
I connected all the screens to create a working prototype of the primary user flow. This includes searching for a property, filtering results, viewing the property details and sending an enquiry to the real estate agent.
STARTING THE DESIGN
The low-fidelity prototype was tested in a usability study where users were tasked to complete the core flow of searching for a property, then reaching out to a real estate agent with an enquiry.
Study type
Moderated usability study
Location
Sydney, Australia | Remote
Participants
5 people
Length
30 minutes each
Users preferred to search for properties on the Homepage using a broad term first (e.g. Suburb). Afterwards, they use filters to refine the properties on the Search Results page.
Users were overwhelmed with the amount of content on the Property Details screen. This can be remedied by hiding less important information under the fold of a ‘view more’ button
Users were confused when the Enquiry screen just closed after they submitted their question. A Confirmation screen should be added at the end to signify a completed user flow.
PART FOUR
REFINING THE DESIGN
Mockup screens were connected to form an interactive prototype, incorporating real text, imagery, colours and the insights from the previous usability study.
REFINING THE DESIGN
To keep designs consistent across different devices, I established a design system. This style guide provides a single source of truth for all visual elements in the product.
REFINING THE DESIGN
It is important to consider web accessibility in order to make the product as inclusive as possible. Although users with disabilities make up a small proportion of total users, helping them often ends up helping all users.
Visual impairment
Users can zoom in and out of the map using the + and - controls on the top left corner. The colour palette ensures adequate contrast. All links and buttons have an inclusive, colourblind friendly hover state, such as an underline.
Landmarks
Navigation bars, search boxes, fixed sidebars, and footers are used to map out regions of the interface. Landmarks are used by assistive technology to provide cues for navigation, allowing users to efficiently move from one section to another.
Screen reader technology
There is a clear typographical hierarchy. Accessible markups, such as navigation order annotations, hierarchical heading tags and labels are included, so screen reader technologies can identify important content.
Alt text
Because this website is very visual and image heavy, vision impaired users may find it difficult to browse properties as part of their flow. Therefore, all images have been captioned with the appropriate alt text for smooth screen reader access.
Responsive design
Users may access the website from a variety of devices with different sizes. When users zoom in or increase the font size, the rest of the page will automatically resize or rearrange elements to fit the new screen size.
Email or call
Users have the option to either email or call the real estate agent. This was built for those who are sight or hearing impaired, but the benefit extends to all individuals who prefer one option over the other.
PART FIVE
GOING FORWARD
White designing a responsive home rental website for Habitat, I learned that users appreciate a concise amount of information - not too much and not too little - to efficiently complete their user flow. Understanding this helped me improve my information architecture strategy, content organisation, filtering tools and accessibility considerations through many design iterations.
It’s such a seamless transition between the web and mobile app. The visuals and branding are consistent and on point.
Responsiveness
It’s so easy to skim read the property description page, it’s not an overwhelming amount of information.
Content layout
I find it much easier to have the search process broken down into small, bite sized chunks.
User flow
GOING FORWARD
The Habitat home rental app has come a long way, but more refinements can still be made to ensure that it works seamlessly across all devices and screen sizes before it’s passed on to development.
Usability test no.03
Conduct a follow-up usability study on the high-fidelity prototype with more diverse participants, including people with disabilities or other limitations.
Iterate
Use feedback and insights gained from the usability study to ensure that all design flaws have been captured and resolved. This applies to both the desktop and mobile designs.
Handoff to engineers
When the website has been finalised, hand off design specifications to the software engineers. This can be done by publishing the Adobe XD document to the cloud or sharing a project link.
UX/UI designer
Karen Lin
Tools
Adobe XD
Photoshop
Graphics
Snazzymaps
Unsplash
Pexels
Flaticon
Iconfinder
