top of page
iMac 2021 Render.png

rent-us

Project Overview

The Product

RENT-US is a new website that assist users to find their dream homes to rent. They cater to all demographics present in Malaysia, and have offerings with unique features such as virtual viewing and zero deposit schemes. In addition to that, assistive technology is included for disabled communities in Malaysia.

Project Duration

January 2023 to February 2023

My Role

UX designer leading the RENT-US website design.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

The Problem

Existing renting websites have limited browsing filters which creates a gap for minorities from different backgrounds to find home to rent.

The Goal

Design a RENT-US website with multiple browsing options that caters to a wide demographic that includes screen reader usage.

To find ways to mitigate the  problem, I have undertaken the steps below to first understand my user base.

User Research

I conducted user interviews, comprising participants from diverse set of ages and ethnic groups. Empathy map  was created post-interview and it was found that focusing in ethnic user group seek a priority.  The feedback received from this user group had shown that access to find affordable and nearby home to rent that don't impose racial biases directed me towards the pain point on limited browsing experience. This experience has led this user group to experience a longer time frame to secure a place to rent which redirected me to another user's pain point in time. Besides able-bodied users, an experience that had caught my attention was majority of rental platforms were not equipped with assistive technologies which contributed to the third  pain point of accessibility. These pain points gave an opportunity for RENT-US to create a well-rounded inclusive platform that cater for a wholesome browsing experience.

Google UX Design Certificate - Empathy Map [Website for renting homes].png

Personas & Problem Statement

Persona - SHANTI

Next, using the empathy map created in previous session; I developed a set of persona to help me understand further the user group I would like focus on. Personas card gave identity and problem statement which provided me a clear description of the users' needs that should be addressed.

Problem Statement

 

Shanti was a busy student and employee who needed access to find affordable and nearby home to rent because her race has been a topic of conversation when dealing with real estate agents.

Google UX Design Certificate - Persona [Website for renting homes].png

Shanti's journey map in her routine daily life is presented below which helped me reduce impact of implicit bias when ideating for the new product .

Google UX Design Certificate - User Journey Map [Website for renting homes].png

Competitive Audit

Then, I researched and identified several direct and indirect competitors present on the market. Competitive audit exercise helped me to solve usability problems and reveal gaps and opportunities present which were applied when ideating the RENT-US responsive website.

RENTUS 2.PNG
RENTUS 3.PNG
RENTUS 1.PNG

Ideation

Later, I did a quick ideation exercise using crazy eight method  to come up with ideas on how to address gaps identified in the competitive audit.

Rentus crazy 8.jpg

To start the design process, I made the decision to use the hierarchical structure for the website design which allowed users to browse broader categories of information that ultimately narrowed into a more detailed information. As the platform was designed for compatibility across devices, a graceful degradation design was used. Gestalt Principles were applied from conception to final stages of design.

Image by Ricardo Gomez Angel

1

Sitemap

_edited.jpg

2

Paper Wireframes

Graphic Designer

3

Digital Wireframes

Prototype Designer

4

Low-Fidelity Prototype

Study Group

5

Usability Studies

Sitemap

Limited browsing experience  was a primary pain point for users, hence I used that knowledge to create a sitemap. 

 

My goal here was to make unlimited options available that would improve overall website browsing experience. The structure I chose was designed to attract individuals from a wide demographic

Google UX Design Certificate - Sitemap - Website for renting homes.png

Paper Wireframes

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

rentus ppr wireframe_1.jpg

As RENT-US customers accessed the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive. 

Next, I sketched out paper wireframes for each screen in my websites, keeping the user pain points about browsing experience, time, and accessibility in mind.

 

The home screen paper wireframe variations below focused on optimizing the browsing experience for users. 

rentus final_1.jpg

Refined paper wireframes

rentus tablet and app_1.jpg

Paper Wireframe screen size variations

Digital Wireframes

Main page was optimized for variety browsing experience through the image placements and highlights of popular properties as well as navigation menus

Digitized Wireframe - Tablet Variation

tablet wireframe.png

Moving from paper to digital wireframes in Figma made it easy to understand how the redesign could help address user pain points and improve the user experience of RENT-US website.

Prioritizing useful button locations and visual element placement on the main page was a key part of my strategy.

Text-to-speech reader for accessibility option

Digitized Wireframe - Mobile Variation

mobile wireframe.png

Digitized Wireframes

homepage - website.png

Low-Fidelity Prototype

To prepare for usability testing, I created a low-fidelity prototype that connected all of the screens involved in the primary user flow of filtering through the options, booking and making a payment.

Usability Studies

Once I was satisfied with the prototype, I conducted an unmoderated usability study to assess how easy it was for participants to navigate through the app. To ensure a seamless output from the study, I have prepared research questions that reduced implicit bias and social desirability bias.

At this point, I had received feedback on my designs regarding placement of buttons and page organization. I made sure to listen to their feedback, and I had implemented several suggestions in places that addressed user pain points.

Study Type

Unmoderated usability study

Location

Malaysia, remote

Participants

5 participants

Length

5-10 minutes

Parameters Set

Findings

property info.png

Font

Users wanted a bigger font size

booking confirmation.png

Payment

Users wanted different options for payment

booking details.png

Quantity

Users wanted pax per room to be included when booking

With the basic prototype in place, I started refining the design process. Using the insights gathered from usability study, I created mockups that reflected the brand identity by incorporating various aspects of the design system.

Mobile Mockup

1

Mockups

Mobile Phone

2

High-fidelity Prototype

Wheelchair Icon

3

Accessibility

Mockups

Typography(2).png

Based on the insights from the usability study, I made changes to improve the site’s booking process. One of the changes I made was adding the option to edit the quantity of tenants in the booking details page. This allowed users to inform owner that the property will be occupied more than one person.

Font sizes are changed to be bigger within the frame and options were added for payment.

Website Mockups

main page desktop.png
virtual tours-message owner.png

Tablet Variation Mockup

tablet mockup.png

Heading towards the final stages of the design process, I had to ideate on the visual branding of my design. To start, I looked at various typography options available, and finally set my eyes on Inter which gave a prominent look that will drive your attention to the page.  Additionally, Kristi font was used on the welcome page that was clean and minimalistic. I wanted a sturdy first impression for the logo typography, and after reflecting my goal of the website, I have decided to use the Aladin font.

 

Next, I wanted a color grading that was soft pastelesque which matched the theme of minimalisim. With that, Hex Code D0B1F2 was chosen whereas Hex Code 000000 accompanied it to allow visual balance. A 60-30-10 rule were applied in the overall  colour palette, where Hex Code 7B6493  was the neutral color and Hex Code FFFFFF  as the second complimentary color whilst Hex Code 000000 was the third accent to allow emphasis and contrast.

Last but not least, I decided to incorporate delicate but strong symbols and images associated with the main theme of RENT-US. Action buttons that were presented in imagery forms was a recurring iconography  that can be seen throughout the mockups.

All the typography, iconography and color schemes were compiled together and presented in the design systems.

Colors(1).png
Icons(1).png

After usability studies

After usability studies

VIRTUAL TOURS.png
RENTAL confirmation.png

Mobile Variation Mockup

mobile mockup.jpg
booking confirmation(3).png
booking confirmation(2).png

Before usability studies

Before usability studies

booking details(2).png
booking details(1).png

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users find from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible. 

High-Fidelity Prototype

Subsequently, the final stage of the design process involved including navigation and  interaction features. Based on the usability study, an easy to follow navigation was the ideal setup for RENT-US website. Keeping that in mind, I  chose a Z-shape layout that would be best for users who came with different abilities; enabling users to skim information from left to right, then move diagonally to the left; before being able to scan to the right again.

Regular gestures and motions were used to create a simplistic aesthetic throughout the website.

Accessibility

Lastly, the final touches involved emphasis on positive inclusion of the product design for people with cognitive and physical disabilities.

 

During the ideation phase this product, I knew that I wanted to incorporate a design that also included the disabled community. Keeping that in mind, I shifted my focus on users of assistive technology and visual disabilities; where the best approach could be used to incorporate them in my designs.

RENTAL confirmation.png
accessibility.png
WEBAIM RENTUS.PNG

01

Headings with different sized text for clear visual hierarchy

02

Light or dark mode option for users with vision issues and a text-to-speech option to use on assistive technologies like a screen reader

03

Contrast checker using WebAIM to ensure users with color blindness can access the website seamlessly

The entire designing process had allowed me to focus my attention to details that were both visible to the naked eye as well as minor details that were normally been overlooked upon.

Paper bag

1

Takeaways

Pink Stairway

2

Next Steps

Takeaways

Impact

Target users shared that the design was intuitive to navigate through, demonstrated broad browsing experiences and access to assistive technology. 

What I Learnt

I learned that seamless user flow can have a huge impact on the user experience. The most important takeaway for me was to always focus on the real needs of the user when coming up with design ideas and solutions.

Conduct follow-up usability testing on the new website

Identify any additional areas of need and ideate on new features

Conduct more user research to determine new demographic of users

bottom of page