Designing a website for finding apartments
Home deal :
I recently helped my friend find a apartment in Delhi , and very soon realized what exactly I should design in order to make it less frustrating and more seamless . The problem we went through for finding a simple apartment makes me still frustrated .
As I recently graduated along with my college buddies we searched of rooms, condos ,PG's that covers everyone's
need and their personal preferences , every site we visited has one or the other preferences missing out , as a result we had check multiple sites that were able to accommodate our needs.
To make the process easier , I decided to design a apartment finding website that can help the home hunters find a real good deal as per their preferences and their personalities .
This case study describes my process of creating Home deal - a responsive website to find apartments in India .
The Problem
Finding an apartment is never easy ,its always a long and tiring process, it take days, hours and sometimes months to find a place you like . The challenge was to design a website that's easy to to find different variants from house to condos.
Solution
My goal was to create a user friendly apartment booking website ,that will help user find their apartment ,house and much more according to their preferences.
My Role
UX Researcher , UX designer ,Ui designer
User Research & Persona
Several research methods were used to complete Home deal website ,from creating empathy maps and personas to conducting interviews and usability studies . Understanding our user's, need and how we can improve their experience is important ,based on that I tried creating persona , fulfilling that represent variety of users.
Name - Meghna Khurana
Age - 36yrs
Hometown - Haryana ,India
Family - Married , 3 kids
Occupation - Reporter.
" I have 3 kids and it becomes important to know the environment we are moving in".
Frustration
-
Difficulty finding house or big apartments.
-
Irritated because of distance form office and school.
-
Anxious regarding the security of the environment they are moving in.
Goal
-
Find big places easily and quickly .
-
Ensure safety and security
-
Nearby schools and necessities
Bio
Meghna is a 36 year reporter and a mom to 3 , she resides in Delhi and often have to move because of her job ,which means finding apartment in regularities ,she wants a easy way and one place to go at all times while searching for apartments or house which satisfy her needs as well as wants .
" Ah, finding a studio apartment in cities makes me still irritated ,their is so limited option for it when we search for studio apartment online "
Frustration
Goal
-
Finding a studio apartment easily and quickly .
-
Ensure nearest subways
-
Save time travelling
-
Difficulty finding studio apartment.
-
1Bhk apartments generally in the outskirts.
-
Cost issues and their compliance.
Name - Aby Mathew
Age - 23yrs
Hometown - Bangalore ,India Family - Single
Occupation - Sales associate .
Bio
Abby is a sales associates ,he wants a way that can easily book small apartment ,so that he can save his time doing things that matters the most and deal with other things that can help make him efficient .
The Design Process
Phase 1: Understanding the user
The first step I undertook was conducting a foundational research . Below are some pointers of my research
-
Users needs an easy access to find their apartment/ house , with basic information .
-
Users tend to search using filters as it is easy and less time consuming.
-
User find it necessary to know about the area they are going to live , from safety to nearest subways they would like to know every minor detail possible .
Phase 2: Ideation and wireframing
Second phase involved creating sitemap and paper wireframe ,it started by browsing for inspiration , bookmarking what could be used and what can be improved .
The site map below uses labels for navigation and pages while designing the website
Paper wireframes
After lots of research , ideating and inspiration ,I came up with few design solution to start with ,I paper-framed a website alongside with a small version of the website on phone .
Website
Mobile Screen
.jpg)
Digital wireframe
Next step was to create digital wireframe , which was created by Adobe XD .
Website
Mobile Screen
Phase 3 :Prototyping and testing
I prototyped the lo-fi version of the designed and tested it with five participant.
Below are the findings for the same .
​
-
​
The users felt that the search navigation does was not working , as they thought it would land them to some other page .
-
The user wants to have a confirmation page before finally booking the tour or sealing a deal
Based on the findings below are some changes I made to make it more user friendly.
-
First change I made after the initial findings was to create a new landing page that would take users to different page and thus solving the problem.
-
Second iteration was done in regards confirmation page ,to solve this I create a separate booking confirmation page to make things more transparent for the users .
The link to lo-fi prototype is here.
High fidelity prototype
After iteration I made hi-fi prototype for the website and conducted some unmoderated usability studies .
Usability Findings
-
Users wants to have a calendar automated while selecting a date for their bookings as it would avoid them to open up different calendar for the same purpose .
-
Users finds it difficult to confirm that they have actually booked a tour as they felt their is a need of after confirmation message.
Iteration in high-fidelity prototype.
After findings of the usability studies , I made some iteration in hi-fi prototype to make the website more user friendly.
Below are some changes after the final iteration.
-
A drop down calendar was added to select date for booking which would help users avoid using different calendar .
​
2. A confirmation message for the booking will be showed when a user successfully books
a tour or seals a deal , a confirmation email will be sent in same regards .
Key Mockups
Website
Mobile screen
High fidelity prototype
After much iteration I created some working hi-fi prototype . I connected all the necessary screens in order to make it user friendly and more approachable in like a real life website.
Link for high fidelity prototype is here.
Accessibilty consideration
Provide access to users who are visually impaired through adding alt to image for screen readers
Used icons to help make navigation easier
Detailed image of apartments and maps to help user understand the design
Takeaways
Impact
The website helps user to have a assuring user experience when users wants to book their apartment or their living space.
One quote from peer feedback:
"I liked the idea of requesting a tour , its different , it can save lot's of time and money and builds trust, an awesome approach".
What I learned :
Though designing a website is different from designing an App ,as we proceed further we can gain understanding of each individuality and learn to make design sustainable in both.
​
It's easy to build something from beginning to end , but it becomes less flexible as we keep on iterating as its always an ongoing process, and to accept it is what makes the product turn in reality.
Next Steps
Conduct another round of usability study and validate whether user pain points are addressed or not.
Conduct user research to determine if their are any other areas of need.
Let's connect !
Thank you for your time reviewing my work for Home deal website ! If you'd like to see more get in touch, my contact information is provided below.