Apartment.com
Making an app/website for finding apartments in your selected area.
The Goal:
Design an apartment-finding website so people can easily find new homes without any trouble, and be able to use it stress-free.
The Problem:
Apartments not listing their proper price, and some websites are hard to use due to their lack of accessibility and UI design, making them over complicated than they need to be.
Solution:
Made the design simple and accessible to most users, while displaying real information with no hidden descriptions getting straight to the point, and a simple navigation to make users
Tools
Google Docs
Figma
Google Slides
My Role
UX design
UX research
Workshop facilitator
Team
Koh Micek
Step one: Surveys
Timeline
Overall: 8+ weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks
My Design Process
Step one: Surveys
I started with a research interviewing participants and asking them what they want the most in an apartment finding app/website and to complete simple tasks assigned and asked for them, and observe what they could easily complete, and what they had trouble with.
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
Step two: Personas
We 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.
Step three: User Journey
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
Step three: User Journey
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.
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!