Apartment Hunter Website
Project Overview
I designed the Apartment Hunter website as one of my UX course projects.
My Role
Web Designer
The Problem
While designing the Apartment Hunter, I was attempting to address the challenges of people who search for apartments online such as lack of time, fake or outdated listings, and limited information about neighborhoods.
Main Goal
My main goal was to design a website where renters can find all the information they need about apartment listings in one place that they can trust to have updated and accurate information.
Understanding the User
Research
During my research process, I conducted interviews and created empathy maps to better understand the experience of users in my target audience and their needs. My research showed that limited time was only one of the pain points experienced by my users. Other user problems I discovered included disabilities, lack of familiarity with the area, and fake or outdated listings that make it difficult to find a good, affordable apartment.
Competitive Analysis
Below you can see my insights about three Apartment Hunter competitors — both direct and indirect. Researching and evaluating other businesses helped reveal what mistakes to avoid and what features are useful.
User Personas
I developed a couple user personas after finishing my initial research.
User Journey Map
I created a user journey maps for my personas. Mapping user journeys helped me better empathize with my users and revealed useful information renters would benefit from such as crime rates, access to accessible routes, and typical costs of utilities in the area.
Sitemap
I created a sitemap for my website to help plan the building of the website. My goal when developing my sitemap was to create an information architecture that was intuitive to the user by making the options simple and the organization straightforward.
Starting the Design
Paper Wireframes
I started drafting iterations of each screen of the website on paper and made sure to include elements that would help solve user pain points such as a message feature for contacting listing agents, the ability for users to leave reviews, and accessibility features.
*Asterisks were used to mark the elements of each sketch that would be
used in the initial digital wireframes.
Paper Wireframes Screen Size Variations
After drafting paper wireframes for all the major desktop screens, I started drafting different versions of those same pages for tablet and mobile device so the website would be fully responsive.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on user feedback and research including information about the area and the ability to perform a refined search.
Easy navigation was one of the key user needs addressed in the designs in addition to lots of information about each listing.
Digital Wireframe Screen Size Variations
After drafting the digital wireframes for the desktop screens, I started drafting wireframes for mobile screens. For the mobile version of the site, I used carousels for easier viewing, links to view more for larger content such as lists of cities, and drop down menus for better navigation on a smaller device.
Low-fidelity Prototype
Using my digital wireframes, I created by first low-fidelity prototype of the primary user flow of finding an apartment listing and sending a message to the listing agent.
View Apartment Hunter Website low fidelity prototype
Usability Study
I conducted two usability studies for the Apartment Hunter responsive website. The first one was conducted after the low-fidelity prototype was created. The second usability study was conducted after the high-fidelity prototype was created.
Parameters
Study Type: Unmoderated usability study
Location: United States, remote
Participants: 5 participants
Length: 20-30 minutes
Visual System
Before flushing out my mockups for my high-fidelity design, I decided on the colors, fonts, and imagery. I wanted the website to have a clean, modern look.
Before & After
While drafting the Apartment Hunter website prototype, I started designing more polished wireframes that included color and images. After the usability tests, I made several changes to the design based on feedback such as including a local guide with more information about the area they are searching including crime rates, typical costs of living, and transportation options. In addition to the local guide, I added a return to the apartment listing button to the confirmation popup window after sending a message to the listing agent.
Digital Mockups
Below are my mockups of the main pages in the primary user flow.
Mockups: Screen Size Variation
I included additional screen sizes in my mockups based on my earlier wireframes. Because users often search for rentals from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.
High-fidelity Prototype
For my hi-fi prototype, I created a more complete user flow for finding apartment listings and messaging listing agents. I followed the same user flow as the lo-fi prototype only I included the design changes made after the usability study as well as several changes suggested by members of my team.
View the Apartment Hunter high-fidelity prototype
Impact
Our target users shared that a apartment listing website like ours would be really useful with all the additional information it provides compared to other apartment listing websites.
What I learned
I learned that engaging with real users early on in the design process is incredibly useful for creating a design that solves actual user pain points.
Next steps
1. Conduct follow-up usability testing on the new website and determine if the pain points experienced by users have been addressed
2. Identify any additional areas of need and ideate on new features
3. Flush out the other features of the site such as drop-down menus and the local guide
Thank you!
Thank you for your time reviewing my work on the Apartment Hunter website. If you’d like to connect with me or view more of my work, my contact information is provided below:
Email: caitlinkhan8@gmail.com
Website: caitlinkhan.com
