![MoveIn Rental Homes Website Design Case Study](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/27fdb200-6c79-445b-8f5b-d93d652ada9d_rw_3840.png?h=3920f75be629df5c25bd141637697188)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/7a9dffa7-6918-4411-ab14-ed7be29604e4_rw_3840.png?h=5f5920fdbaf7e2c704ecf32401d7f510)
![Question mark](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/8dc8e42f-bd4d-4bf6-ac58-bf5fdcef7176_rw_600.png?h=60fa2d6f86d94504ca51eb18d8596579)
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.
Responsibilities:
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/02061d61-a077-4a0d-81cc-a2501964f8c1_rw_1920.png?h=854cfee25920d6eee6782de6c3e3bbf1)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/63a62f09-b104-4fce-bac6-fe59fa2740a6_rw_1920.png?h=f946a71a9d42c6ee1fada6b2e47a0889)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/9a3a642c-a0b0-436f-8065-4f0991493a49_rw_1920.png?h=87d1dfa19a5e8054c5c5cc1bb4e906f8)
![User journey map](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/721e0627-ede5-4950-aac7-9916a6be0c87_rw_3840.png?h=c560482c86b4d976976da8b507c5860d)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/c0815b3e-9568-409a-ac26-fd9174a6b9bb_rw_1920.png?h=8efff76e9299bfd4280ce72eb29cb654)
SITEMAP
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/12ab79a8-3405-444c-95aa-a95e814e1bbb_rw_1920.png?h=db0fb9049682cd6ea57646346a7d0ee1)
PAPER WIREFRAMES
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/5062dac5-749e-4727-aa28-166cafe4bd53_rw_1920.png?h=31731d1a6283b68ccbcb4dc00a6762d3)
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes
PAPER WIREFRAME SCREEN SIZE VARIATIONS
![Paper wireframe screen size variations](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/b6f01243-d36c-47c6-9091-c9f5b2dcab10_rw_1920.png?h=c6215a18c05be49c66b321f7fd82c4df)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/e6453d77-6061-42e3-9f10-cae1a0878c2c_rw_1920.png?h=4a256c620303a66e23dbe3f1e3130299)
Digital wireframe screen size variations
![Digital wireframe screen size variations](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/6e7cc3ca-adc6-47e1-a7b4-ac34d42e4243_rw_1920.png?h=f05a4f84c2a2064270456643a68d50fb)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/4e44ba1a-c105-45cf-918b-c49d616c050b_rw_1920.png?h=883605c6dfd907105d595471391cd6c0)
Usability study: parameters
![Usability study parameters](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/5a73c205-2a5c-417b-a5a4-f42b8cf22440_rw_1920.png?h=b1996f0b2b10f8e69e45a1392038a4e3)
Usability study: findings
These were the main findings uncovered by the usability study:
![Usability study findings](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/2fe44f9f-f8e1-485e-b7e5-6026b72d792f_rw_1920.png?h=4d9a19f4121900d18b6606f61480e3c2)
![Refining the design](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/b9c999e2-e814-43eb-bc5b-6c7349921451_rw_1920.png?h=d6d62a1fcaa4fcf2500808206cd2670c)
Mockups
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”.
![undefined](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/3adac165-86f4-4ad7-a3aa-b0a95aa918a7_rw_3840.png?h=a39f7fd504a0178b2bc69c7bf5d02d61)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/e5060127-0897-4598-8d81-6ef583585a3e_rw_3840.png?h=df0c9eee0fd08add0fbbc17cafa01bfb)
Mockups: Original screen size
![Mockups original screen size](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/fd4a4421-c7bf-49ea-86b9-51b1f9315a7e_rw_3840.png?h=bea6c9eee09e7958af169aa5641e0182)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/04ed9c85-5cc9-49c9-bdae-c305d85da437_rw_1920.png?h=54413652a91fa008cc5e4f10b5783ff0)
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](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/27f697ef-fddd-4b15-98ee-6e122827a223_rw_1920.png?h=681309a8174a1eb7609627415841f9d0)
Accessibility considerations
![Accessibility considerations](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/fc85b002-e59d-4651-ac6b-6abb79e609da_rw_1920.png?h=d3935b13bc1a2493040ecebd7cf36818)
![Going forward](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/c2927775-0b75-431c-8d14-6e727b5c063f_rw_1920.png?h=12f18b66d6862e9b7b2ce5888772eb44)
Takeaways
![Takeaways](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/ad6c2bbf-2fc9-4d0b-82ca-d412024c7f3e_rw_1920.png?h=a89359d09661ef57772cd11b45d97cea)
Next steps
![Next steps](https://cdn.myportfolio.com/050a2b02-8145-4f8e-9aa0-4991280bb111/5420a28e-8875-475e-bcad-ef90d8b0c24d_rw_1920.png?h=774f669d79a881e29d0ab889aa4c7611)
Thank you for reviewing my work on the MoveIn Responsive Website!