Product

Redesigning the search bar: a UX case study

Priya Fernandez Sep 7, 2018 • 2 min read

As a consumer product designer, my role is to partner with Product Managers and UX researchers to improve the way that our real estate software platform works for our users. One of the first projects I was tasked with was addressing user pain points within our search experience.

An online survey revealed some key consumer pain points for the potential home buyers and sellers browsing the agent websites that we deliver. Users told us that they wanted to create custom price ranges for their search. They also requested unique search filters like “search by school district”, which oddly enough, we already had available. This indicated that some of our search filters were difficult for users to find.

In fact, when users clicked to see “more filters,” the search bar expanded into a dropdown tray, which could then be further expanded to access a second set of hidden filter options. Additionally, small links along the bottom of the tray featured more advanced options. As a designer, it was apparent to me that the information wasn’t well-categorized, organized, spaced-apart, sized or easy to find.

Working closely with my team’s UX researcher, we ran tests to see how long it took for users to find certain filters and how they expected content to be organized and labelled. We found that headings helped users find content by make it more scannable and that revealing hidden filters improved their findability. These insights helped guide and inform my decisions as a designer.

We then set out to address these issues by redesigning the search tray in a responsive grid pattern with consistent spacing, new UI components and re-organized, updated filters. As a result, we saw less requests for already-existing search filters, increased usage of advanced search options, use of newly created custom ranges and ultimately, an increased overall user satisfaction score. At the end of the day, we wanted to see users reporting that they were able to use search effectively and successfully. Check out annotated versions of search tray before and after redesign below.

Priya Fernandez

As a Product Designer at ZapLabs, Priya collaborates with Product and Engineering to understand business needs, user goals, and technical constraints, then uses prototyping and iteration to design to ensure a cohesive and intuitive user experience for ZapLabs’ consumer products.