RentHome

"Home, sweet home!"
Responsive apartment hunting website

Image alt tag
Overview

The problem

Finding a good place to live is often a challenging and time-consuming task. Most of the available apartment renting websites in Canada have cluttered designs and inefficient systems for communication with property agents. 

The task

To design an apartment renting website to be user-friendly by providing clear design, easy navigation, and an effective system of communication between property owners/realtors and clients.

Users and audience

The target audience of the website is people living in Canada and renting apartments (houses, condos, etc.) for 6 months and longer. 

My role

My role was UX and UI Designer from concept to delivery. 

Illustration on the homepage designed by upklyak

Project duration

January 15, 2022 – February 8, 2022 

Methodologies

Secondary and primary research, empathy maps, pain points, personas, problem statements, user stories, user journey maps, sitemap, competitive audit, paper, and digital wireframing, mockups, prototyping, usability studies, affinity diagrams.

The constraints

The key challenge in this project was the foreign location and market.

My process

In my work I followed the Design Thinking Framework: 

Research

Pain points

To understand the problem area and user needs I conducted a secondary research and after surveyed 26 users who had prior experience of finding and renting apartments online for 6 months and longer. I discovered that many users face a lot of problems looking for an apartment to rent, including frustration, financial risks, and huge time loss. Based on this data I distilled major pain points

  • Communication 

Absence of direct contact information results in communication delays, time and money loss, and frustration for users.

  • Reliability 

No property verification and reviews from previous renters increase risks for fraud and cause frustration for users.

  • Experience

Busy cluttered pages make it difficult for users to find information about an apartment that they look for.

  • Content

The absence of transparent information on rent conditions and pricing complicates the apartment finding process.

Personas and problem statements

Based on the surveys I set up two personas. I referred to them throughout the product development process.

Personas

Personas

Problem statement:

Rena is a college student who needs to find an affordable apartment near her college with reliable owners because she does not want to waste time commuting.

Problem statement: 

Jason is a personal fitness trainer who needs to rent a place that fits his requirements quickly and easily because he wants to enjoy working and relaxing at home.

User journey maps

Creating user journey maps allowed me to see the improvement opportunities for the RentHome website.

Rena

Goal: to rent an affordable apartment with reliable owners near their college

RentHome

Jason

Goal: to rent a spacey and comfortable place that fits their requirements

Competitive audit

In order to evaluate competitors and discover new opportunities in the market, I conducted a competitive audit. Its goal was to compare each competitor's website user experience.

Creating empathy maps, personas, user journey maps, and conducting competitive audits helped me better understand users and their needs and come up with ideas for designs that solve their problems as well as informed my ideation process on how to stand out from competitors in the market.

Competitive audit sheet 1

Competitive audit sheet 1

Gaps

  • Three (Rentals, RentCanada, RentFaster) out of four competitors have no reviews from previous renters.

  • Rentals lacks info about the conditions of renting and the state of property, RentCanada and RentFaster’s description of the properties is dense and hard to read.

  • Rentals has serious accessibility issues.

  • Rentals, RentFaster, and RentCanada have user flow and/or navigation drawbacks.

  • RentFaster, RentCanada, and ForRent do not have price indications on a map.

  • RentCanada does not provide an availability indication.

  • All three direct competitors do not have floor plans constantly available and any security checks or anti-scam prevention.

  • None of the resources shares a standard renting agreement and the ability to schedule meetings online.

Competitive audit sheet 2

Competitive audit sheet 2

Opportunities 

  • Provide reviews from previous renters

  • Provide anti-scam security check

  • Create an accessible design with smooth user flow and easy navigation

  • Provide a full description of properties with a clear hierarchy

  • Provide rental price calculator

  • Provide price increase history

  • Scores or ratings on management, customer service, repairs, cleanliness, etc.

  • Provide standard renting agreement documents for free access

  • Ability to schedule meeting online

Creating early concepts

Sitemap

Poor communication was one of the primary pain points for users so I used that knowledge to create a sitemap. Another primary pain point was safety (fraud prevention and owners' reliability issues).

Sitemap for RentHome website

Sitemap for RentHome website

My goal here was to make strategic information architecture decisions that would help solve these problems while at the same time providing easy and simple navigation.

Paper and digital wireframes

Paper wireframes

Paper wireframes

Sketches

I usually start the design process with paper wireframes. This is the way I iterate through many design options quickly. I sketched out paper wireframes for each screen on my website both for desktop and mobile versions,  keeping the user pain points about communication, safety concerns, experience, and content, in mind.

Low-fidelity wireframes

Low-fidelity wireframes

Digital low-fidelity 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.

  1. Easy access to Fraud Prevention information and downloadable rent agreements

  2. Quick search by categories from the homepage

  3. Recently added apartments allow to quickly scan the newest apartments from the homepage

Digital wireframe mobile screen size variation
Low-fidelity wireframe

Low-fidelity wireframe

I created a mobile screen size variation to provide accessible and equitable user experience for all users

Low-fidelity prototype

RentHome low-fidelity prototype

RentHome low-fidelity prototype

To create a low-fidelity prototype I connected all of the screens involved in the primary user flow of searching for and choosing an apartment on the website and contacting a property agent.

Usability Testing

Testing low-fidelity prototype

It was critical to test my early design concepts, so I recruited 25 participants to test my low-fidelity prototype. I conducted an unmoderated remote usability study.  

The usability study allowed me to gain a deeper understanding of how users felt about my website. I came out of it with several valuable insights.

These were the main findings uncovered by the usability study:

  • Users preferred a simple search to start from the homepage instead of a detailed search bar.

  • Users wanted to have a dropdown menu in a search bar instead of typing in method.

  • Users don’t understand what the callback option is and how to use it. View the Usability Study presentation here

Refining
RentHome high-fi mockup after usability study

RentHome high-fi mockup after usability study

After usability study

Based on insights from the usability study I made changes to improve the site’s usability. One of the changes I made was reducing details and providing a dropdown menu in a search bar on the homepage.

To simplify the process of communication with a realtor I improved wording and emphasized CTA on an apartment's details page. I also changed the layout of images and added a travel time calculation button to make apartment finding easier.

UI kit for RentHome

UI kit for RentHome

UI kit

To maintain consistency throughout my designs I created a UI kit containing all main visual elements and styles.

High-fidelity prototype

My high-fidelity prototype followed the same user flow as the low-fidelity prototype and included the design changes made after the usability study. View RentHome’s high-fidelity prototype

Accessibility considerations

1

I used headings with different sized text for clear visual hierarchy

2

All the colors applied in the RentHome website visual design have an accessible contrast ratio AA according to WCAG recommendations

3

I used accessible fonts throughout the website

Responsive design
Mobile screen size variation

Mobile screen size variation

To provide an accessible and equitable user experience for all users, I created designs to fit the screens of both desktop and mobile users. I optimized designs to fit the specific user needs of each device and screen size.

Final solution
Outcomes, lessons and next steps

Impact

After the 2nd round of usability study for the high-fidelity prototype, my target users shared that the design was easy to use, engaging with the images, and demonstrated a clear visual hierarchy.

"It's simple, don't change anything"

"It's straightforward and simple"

"No problems. Easy to navigate."

"It was very easy to go through as the "schedule tour" button is bright and big"

"Perfectly easy to use, nice looking design”

“Very nice and clean, well-structured, intuitive to use”.

What I learned

I learned that even a small design change can have a huge impact on user experience.

The most important takeaway for me is that user research is crucial in creating a user experience.

Next steps

  1. Conduct follow-up usability testing on the new website

  2. Identify any additional areas of need and ideate new features

  3. Iterate and test for accessibility for different user groups.