Project Overview
Overview:
NewNest is a sample design project for an easy-to-use, local rental site with user-friendly features like favorites and map-centric searches.
The problem:
Many rental sites have cluttered designs and a lack of search options, making it hard for users to easily find and compare rentals.
The goal:
Create an easy-to-use rental site with user-friendly features like favorites and map-centric searches.
My role:
UX designer researching and designing the NewNest app from concept to design to high fidelity prototype.
Responsibilities:
Conducting research, user interviews, paper and digital wireframes, low- and high-fidelity prototypes, usability studies, design iteration, and responsive design.
Understanding the User
User research \\ Personas \\ Problem statements \\ User journey maps
I conducted remote user interview to understand the needs of local property renters. Renters face a number of challenges including a tight rental market, high costs, and limited time. Using rental websites should help alleviate some of these pressures, not add to them. Users need rental sites to be easy to use, filterable based on their personal needs, and offer tools to consolidate their efforts in one place. Users are looking to tackle their rental search in one place, not across multiple disparate websites.
User pain points
Persona & problem statement
Problem statement: Ben is a lower-income, single cat owner who needs a quiet, affordable, pet-friendly, 1bd/1ba apt near work because his current apt is noisy and they are raising the rent.
User journey map
This user journey map illustrated possible pain points for Ben, and improvement opportunities for the website.
Initial Design
Site Map \\ Paper wireframes \\ Digital wireframes \\ Low-fidelity prototype \\ Usability studies
Site Map
The main site tools: search and map display are not represented as pages on the site map but exist as elements within the pages. While the sitemap looks simple, template-driven search results and detail make the site appear robust.
Paper wireframes
My biggest concern when exploring paper wireframes was how to make the search options, filters, and map-view as easily accessible and persistent as possible. I also experimented with gamifying the results, with a swipe left-right to save or discard ala Tinder. While this idea was compelling, it was set aside in favor of a Favorites list to simplify the users’ path to success.
Paper wireframe screen size variation
Once a desktop view was finalized, the mobile view was designed using the same solutions but optimized for a stacked view.
Digital Wireframes
Search via filters is the component around which the entire site is designed.
Map-view gives users a quick idea of what is available in their search area if location is their most pressing concern.
Using expandable divs and a stacked display allows for an easy transition between desktop/tablet and mobile.
Low-fidelity Prototype
This low-fidelity prototype allowed testers to move through examples using the search filters, map-view, apartment details, favorites, specials, dropdown menu, and contacting an agent. Access the prototype here
Usability Study Findings
I conducted two rounds of usability testing. Findings from the first helped clarify the journey from wireframes to low-fidelity prototype. These were the main issues that the usability study revealed.
Revised Design
Mockups \\ Accessibility considerations \\ Refined designs \\ High-fidelity prototype
Mockups
By adding the favorites icon and learn more button to the map view, users better understood how to use this feature.
Adding the contact form as an overlay allows users remain centered in their search result and not feel “lost.”
Mockups: Desktop view
Mockups: iPhone view
High-fidelity prototype
This high-fidelity prototype contains the same flow as the low-hi version, along with improvements made via user testing. Access the prototype here
Accessibility considerations
Conclusions
Takeaways // Next Steps
Takeaways
Impact:
Users expressed that they found the map view helpful and liked the step-by-step nature of the filter selection. They stated that it felt easy to navigate and connect with agents and property managers, and felt Favorites would make their apartment search faster.
What I learned:
The importance of search filters can make the difference between a good and bad experience. Users also appreciate the ability to approach their search from different start points depending on what is most important to them.
Next Steps
