Role: Leading the Rental homes Tokyo website, including concept, research, and visuals.
Responsibilities: Managing interviews, paper, and digital wireframing, low and high-fidelity prototyping. Conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
Tools: Adobe Xd, Gdrive, Jamboard
Duration: August 2021 to August 2021 (3 weeks)
Rental homes Tokyo is a housing service company. The typical user is between 20-45 years old, and most users are students or early/mid-career professionals. Rental homes Tokyo's goal is to make renting properties fast and easy for all types of users.
Available online real estate websites have cluttered designs, inefficient systems for browsing and booking through properties, and confusing booking tour processes.
Design Rental homes Tokyo website to be user-friendly by providing clear navigation and offering a fast booking tour process.
1. Understanding the user
User research: Summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users consider online housing services as a great tool to find properties and having an overview of real estate.
However, many housing service websites are overwhelming and confusing to navigate, which frustrated many target users.
This caused a normally enjoyable experience to become challenging for them, defeating the purpose of renting an apartment in Tokyo.
User research: Pain points:
Navigation. Real estate website designs are often busy, which results in confusing navigation.
Interaction. Small buttons on websites make item selection difficult, which sometimes leads users to make mistakes.
Experience. Online housing service websites don’t provide an engaging browsing experience.
Persona: Ellie:
Ellie is a busy student who needs a multilingual real estate website with an online booking tour function. Because she wants online booking to be stress-free.
User journey map:
I created a user journey map of Ellie’s experience using the site to help identify possible pain points and improvement opportunities.
2. Starting the design
Site Map
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Paper wireframes
Next, I sketched out paper wireframes for each screen in my app, keeping the user's pain points about navigation, browsing, and checkout flow in mind.
The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Paper wireframe screen size variations
Because Rental homes Tokyo’ customers access 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.
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 useful button locations and visual element placement on the home page was a key part of my strategy.
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding an item to the cart and checking out.
At this point, I had received feedback on my designs from users about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups need refining.
Apartment detail: Once at the apartment detail screen, users didn’t have a way to directly book a tour
Booking Icon: Users were confused by the earth icon for booking a tour
Quick view on booking: Users want to have access to quick view on their book tour, like “mini cart display”
3. Refining Design
Mockups
To make the booking tour flow even easier for users, I added a schedule tour button that allowed users to quickly schedule a visit from this page.
Based on the insights from the usability study, I made changes to improve the site’s booking flow. One of the changes I made was changing the icon to access the booking’s screen. This indicates users how to access their booking tour.
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes suggested by users.
Accessibility considerations
I used headings with different sized text for a clear visual hierarchy
I used landmarks to help users navigate the site, including users who rely on assistive technologies
I designed the site with alt text available on each page for smooth screen reader access
4. Going forward
Impact:
Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.
What I learned:
I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.
Next steps
Conduct follow-up usability testing on the new website
Identify any additional areas of need and ideate on new features
