MoveIn Rental Homes Website Design Case Study
PROJECT overview
The product:
MoveIn is a rental homes website that helps users find a new home easily and quickly. The typical user is 20 - 45 years old, living in the UK. MoveIn’s goal is to make the process of finding rental homes more intuitive and pleasant.
Project duration:
September 2022 - November 2022
MoveIn Rental Homes Website Design
Question mark
The problem:
Available rental homes websites have unclear navigation, cluttered designs and confusing search functionality.

The goal:
Design the MoveIn website to be user-friendly by providing clear navigation, intuitive designs and precise search functionality.

My role:
UX Designer - leading MoveIn’s website design.
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
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 face challenges when searching for a rental home on websites because the navigation is unclear, the designs are too cluttered and they can’t find what they want.
Pain points:
User pain points
Persona: Klara
Problem statement:
Klara is a busy working adult who needs to rent a home closer to work because so, commuting will save her time that she could spend on her hobbies.
Persona: Klara
User journey map
User journey map
I created a user journey map of Klara’s experience using the website to help identify possible pain points and improvement opportunities.
Starting the design
One of the main user’s pain points was unclear navigation, so I created a sitemap to organize the website’s pages intuitively and logically. 
The goal was to create an information architecture that is familiar to users.
MoveIn's Website Sitemap
Next, I created various wireframes for the homepage keeping user pain points in mind.
Then I selected elements that I liked the most from the sketches I created and combined them in a final version of the homepage.
Paper wireframes

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 MoveIn’s users 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
I transitioned from paper to digital wireframes keeping in mind the goal to make the navigation intuitive and simple.
To search for a rental home easily, I decided to make the search box more prominent and added it to the middle of the page.
Digital wireframes
Digital wireframe screen size variations
Digital wireframe screen size variations
I created additional digital wireframes for tablet and mobile.
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of booking a visit to see a property.
At this point, I received feedback on my designs from peers regarding page layout. Based on these suggestions, I made several adjustments in places that address user pain points.
View the MoveIn website: low-fidelity prototype
Low-fidelity prototype
Usability study: parameters
Usability study parameters
Usability study: findings
These were the main findings uncovered by the usability study:
Usability study findings
Refining the design
Based on the insights from the usability study, I made changes to improve the site’s search flow. I reduced the number of visible search filters by prioritizing them. 
The more advanced filters are revealed after clicking the “Show more filters” button. I observed that the label of the button “Filter” was confusing, so I renamed it to “Search”.
To make the navigation easier, I divided the process of booking a visit into 3 steps. I also made the important information to be visible above the fold, so users don’t have to scroll to find out the next steps.
Mockups before and after usability study
Mockups: Original screen size
Mockups original screen size
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. 
Because users navigate the site from a variety of devices, I felt it was important to optimize the browsing experience for a range of devices, such as mobile and tablet, so users have the smoothest experience possible.
It was interesting and challenging when designing a responsive website because my goal was to keep designs consistent while changing the page organisation.
Mockups screen size variations
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included design changes made after usability studies.
View the MoveIn website: high-fidelity prototype
High-fidelity prototype
Accessibility considerations
Accessibility considerations
Going forward
Next steps
Next steps
Thank you for reviewing my work on the MoveIn Responsive Website!
Let's connect!
LinkedIn          Behance          Dribbble

You may also like

Back to Top