Apartment.com
Making an app/website for finding apartments in your selected area.
About
Product Overview
UX Research
UX Design
Problem:
The Goal
Designing an apartment-booking website so people can easily find new homes without any trouble, and be able to use it stress-free.
Solution:
Real Prices
Displaying real information with no hidden descriptions, getting straight to the point.
Better Accessibility
Made the design simple and accessible to most users.
Easy Filters
Basic filter options are available while advanced options are collapsed.
Step one: Surverys
Fake Prices
Apartments not listing their proper price
Inaccessbility
Some websites are hard to use due to their lack of accessibility and UI design, making them over complicated than they need to be.
Filter Problems
Filter search system being too much or too less
Step two: Personas
Step three: User Journey
Step three: User Journey
Web/Mobile Compatibility
Pain Points
Some Websites are confusing to search because of too many filtering options or confusing layouts.
03
Real Estate
01
Timeline:
Overall: 8+ weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks
Step one: Surveys
I started with a research interview and asked them what they want the most in an apartment finding app/website, and to complete simple tasks assigned for them, observe what they could easily complete, and what they had trouble with.
Any Troubles?
Some users had trouble with buttons being confusing, and wanting to add more color to the website, but other than that, they were happy with the UI design.
Step two: Personas
Apartments can have different prices listed for different websites, which can be very confusing for people.
I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created 2 personas for each of our user segments. I made sure those 2 were complete opposites, which made it easier to cater to a larger audience, and having a wide range of accessibility means more people will be happy using the website/app.
With the final goal of being able to book an appointment in mind, I made sure that our users reached the booking screen without any hiccups. So, I sketched a current-state user journey map, to identify opportunities for improvement. After the test, I identified that there were small paths that were not necessary for our final goal, so scratching those paths made it easier and quicker to get to the booking page.
Created a user journey map for Adriana and recorded her each step and feelings, and gave us clear improvement opportunities.
Step Four: Sketches
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time.
My sketches were based on the initial user interviews, and the end goal of booking apartment appointments easily. I focused on making the home page a simple layout with a carousel of trending apartments and on the general structure of what I wanted the website to look like when I clicked on one of the houses.
02
It’s hard to choose one option, resulting in users often having to open multiple tabs, and users want to be able to compare their homes.
Step Five: Low-fidelity Wireframes
Step Five: Low-fidelity Wireframes
Using Figma, I translated my first sketches into low-fidelity wireframes. Then, I improved them by adding text and some stock images.
During this simple digital wireframing, based on the user research, I put the search bar with filtering options in the home screen so it’s easier to quickly look at what you need to search for without browsing the whole website.
Step Six: Mobile High-Digital Wireframes
Using Figma, I translated my first digital low-fidelity wireframe into a mobile support wireframe. I put a hamburger menu on the top left in order to eliminate congestion, and according to my participants, a hamburger menu was the easiest to navigate and access than other options given to them such as tab menus and swiping navigations. I also made it a scrolling feature so it's easier for mobile users to browse through selections. I implemented taskbar buttons for navigation for maps, home/discover, favorites, and profiles.
Low-fidelity wireframe of desktop version
Step Seven: UI Design Prototype
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s simple, yet pleasing to look at, and simple navigations that when looking at the screen, you instantly know where to go.
Step Six: Mobile High-Digital Wireframes
Step Seven: UI Design Prototype
Next Steps:
Improve more on accessibility for different clients.
Improve prototypes and their navigation.
Improve on paper and digital wireframes.
Learnings
I learned to improve my design a lot in this project, and overall on how to use Figma/Adobe XD better. I also got used to researching with asking clients better questions and tasks to perform multiple times.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
House.com