Personas
Overview
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
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 or 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
Constraints
The key challenge in this project was the foreign location and market
Tools
Adobe XD, Google Forms, Maze, Jamboard
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.
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
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. See the full version of the competitive audit here.
Creating empathy maps, personas, and 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
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
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
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
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
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.
Easy access to Fraud Prevention information and downloadable rent agreements
Quick search by categories from the homepage
Recently added apartments allow to quickly scan the newest apartments from the homepage
Digital wireframe mobile screen size variation
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
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
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
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
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
Conduct follow-up usability testing on the new website
Identify any additional areas of need and ideate new features
Iterate and test for accessibility for different user groups.
Let's connect!
Do you need a designer or have a product idea?