Designed a Responsive Website for Renting House
Certificate Program -April 2022
THE HOME
PROJECT OVERVIEW
Problem:
Goal:
Make the priorities in the filtering and see the options with less priority within the map.
My Role:
The goal of this project is design a user friendly responsive app for real estate, renting house. Our goal is makes the filtering and priorities more convenient to use.
Responsilbilities:
User research, making persona, Journey map, sketching, usability texting
My role was defining the project, conducting user research and design an user experience responsive real estate app and website.
UNDERESTANDING THE USER
User Research: Summary
-
I conducted interviews and created empathy maps to understand the users I’m designing for. There was a wide range of target group will use this app ( and website) so I chose a young single person and a user with a growing family as a targeted personas. Each of these two groups have their specific needs and pain points.
-
The user journey map gives an idea of where the problems are located in the process of online house renting. There are 4 pain points recognized and after sketching and making the prototype, I runned a usability study. The finding from the usability study lead us to the final solution and designing the interactive prototype.
Pain Points
1
Filtering priorities are not on the map so the user cannot see which of his selected filters are on each location on the map.
2
People would like to share their opinion about a specific home with their partner.
3
Comparing the homes, their specifications and their location with the user priorities are very hard for decision making process.
4
Connecting to the home owner or the home agent is a hassle and usually users need help at this point.
Personas
Mia is a young social person who needs a budget friendly house because she needs to balance her budget with her social life.
User Story
Mark is a busy man with a growing family who needs to search and decide on a new home faster and easier with his wife because they both ideas need to be applied.
User Journey Map
Each part of the process has a place for improvement. In the searching period, filtering prioritizing the factors. Later, we need to work on the joint account and the ability to leave comment or like specific home for the partner. Then we need to design a way to help the user to connect to the right person and check the status of his application.
Competitive Analysis
Start The Design
Research Questions
Participants
Methodology
-
What can we learn from the user flow, or the steps that users take, to view and select a house for rent?
-
Are there parts of the user flow where participants get stuck?
-
Are there design changes we can make to improve the user experience with the process of searching homes?
-
Do users think the app is easy or difficult to use?
-
5 participants
-
Three male and two females 30-50 years old.
-
10 minutes to complete
-
Location: Virtual
-
Format: Moderated and unmoderated usability study
-
High level procedure : 2 users were tested by supervision and 3 filled forms.
Site Map
At this point, a clear organizational path needed so I created the site map. A diagram of a website and app that shows how pages are prioritized, linked, and labeled. With Sitemap, the necessary pages defined as Renting, Rent out, Log in, Budget calculator and support. These pages and their subcategories would cover our goals and solve the pain points founded in the previous sections.
Crazy 8 Design Thinking
How Might We Design Thinking
Sketches
After interviewing the possible users and carefully reviewing the competitives, came up with some sketches of the first page of the website. The stunning parts marked with star so we can use them in the further designs.
Paper Wireframe
Screen size variations
Designing a great user experience means that your website needs to look great and work effectively on various screen sizes.In order to do that, The final website paper wireframe was transferred to mobile version. So the features looks perfect in both devices.
After defining the sitemap and get to know of what screens and interactions we need for this website, wireframe and web design started.
Sketches
Digital Wireframes
Digital wireframe was made in Adobe XD based on the final wireframe.
Here is the wireframe fofist page of the website.
Digital Wireframe
Screen size variations
Since the project is designing a responsive web, here is the digital wireframe for both website and mobile versions.
Low-Fidelity Prototype
All the pages wireframe designed in Adobe XD base on the Sitemap. The pages connected to each other to be able to run and follow the steps.
Usability Study findings
Digital Wireframe
Usability study: findings
One of the findings from the usability study was removing the Login button from the nav bar since it was already designed in the profile section in the upper right of the page. Having an item in two places is confusing and recurrence.
Before usability study
After usability study
The other criteria which added to the design after usability study was the comparison feature. Users would like to see the houses similar to the home they selected. This feature helps the user to compare the amenities, prices, assigned schools and all other important factors in similar homes. User will decide faster and easier if they can easily compare their options.
Before usability study
After usability study
Refining the Design
Final Look
Flow
High-Fidelity Prototype
Accessibility
1
Having a bold heart color, so it could be more visible. Everyone, can see the bold solid color heart even on the colorful house pictures.
2
The homepage of this website has a search bar features in the center of the Hero for zip code search. The location of the search bar makes it more accessible and help the user to easily find the way to flow in the website. .
3
Landmarks such as navigation bars, search boxes, fixed sidebars, and footers are used to make the website more accessible. This landmarks helped the users to efficiently move from one section to another.
Takeaways
-
The goal of this project was make the filtering more convenient to use. The result was an easy to follow website which is convenient for the users to filter the houses based on their interest. We received many, good feedback after the second usability testing such as : “The look of the website is clean and stunning” and “ It was easy to finish the task and reach the end point”
-
What I learned from this project is the importance of early stage research on the final result. Creating an accurate user journey and sitemap makes the design much easier and the result would be much user friendly.
Next Steps
1
Make the design responsive for the ipad and tablet and ipad sizes.
2
Use the real image which are actually listed in the market would change the UI of the website. Thus, we might need to adjust coloring and contrast in the future when the website is actually run.
3
Would like to run a usability study with a bigger, wider range group to see a more accurate response from the users.