• Skip to main content

JZiegler.com

online portfolio/hub

  • Work
    • UX Design Case Studies
      • Bike Florida Web Design and App Design Case Study
      • Local Flavor App Design Case Study
      • NewNest Website Design Case Study
    • Design and Marketing Manager, CartoonStock
    • Director of Social Design, VestorLogic
    • Creative Manager, VEGAS.com
  • Resume
  • About
  • Contact

NewNest Website Design Case Study

NewNest

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

pain pts

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.

persona

User journey map

This user journey map illustrated possible pain points for Ben, and improvement opportunities for the website.

journey

 

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.

site map

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.

wireframes

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.

screen variations

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.

wireframes1

Using expandable divs and a stacked display allows for an easy transition between desktop/tablet and mobile.

wireframe 2

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

flow 1

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.

user tsting

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.

mock1

Adding the contact form as an overlay allows users remain centered in their search result and not feel “lost.”

mock2

Mockups: Desktop view

desktop

Mockups: iPhone view

iphone

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

hi-fi prototype

Accessibility considerations

Accessibility

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

conclusion

 

© 2023 JZiegler.com