Streamlining Product Search & Discovery

A hand holding a phone showing the redesigned Beer Store home screen with Browse Brands categories and the new More Filters button

Summary

My role
Product Designer
Team
OCS stakeholders · Project Manager · 5 Developers

Problem

The Beer Store’s mobile app made criteria-based discovery painfully slow. Users couldn’t find beers by style, type, or recommendation. The existing search flow was cumbersome, often taking over 3 minutes and sending users into frustration and abandonment.

Solution

  • “More Filters” entry point right on the home screen
  • Popular categories in a quick pop-up sheet
  • Second-level drill-downs for specific criteria
  • Applied filters always visible on results

Impact

  • 75% faster product discovery: reduced from 3+ minutes to under 45 seconds
  • 60% reduction in screen transitions to find a specific product

See the redesigned flow →

Project Context

The Beer Store is a privately owned chain of retail outlets selling beer and other malt beverages in Ontario, Canada. Customers use its web and mobile applications to order drinks online for delivery or in-store pickup. This project focused on the mobile app’s search experience, on a hard one-week timeline.

The Three-Minute Search

The core problem was a limited search experience. End-users could not easily find beers based on specific criteria or recommendations. The existing flow was cumbersome, often taking over three minutes and leading to user frustration and potential abandonment.

Objective: Integrate richer product attributes into the mobile app’s search feature to simplify discovery while maintaining an easy-to-use interface.

Project constraints

  • Tight deadline: Time was a major constraint for the entire design and development cycle: one week from research to dev-ready designs.
  • Technical limitations: Restricted from drastic changes to the existing UI/UX so the development team could meet the deadline.
  • Design mandate: The constraints pointed one way: minimal, high-impact changes only, not a redesign.

From Journey Maps to Benchmarks

My research focused on understanding the user’s struggle and the competitive landscape, guided by three questions:

  1. What are the steps users take to locate a product?
  2. What is the average time required to find a product?
  3. What are the primary pain points encountered during the search process?

Current-State Journey Mapping

Mapping the current search flow revealed that pain points escalated significantly when a user attempted to search using specific criteria. From there, so many variables could go wrong, affecting how long the flow takes and how much success the user will have. A time-consuming process (over 3+ minutes) that can send a new user or prospective client into a whirlwind of frustration.

Journey map of the current search flow: user goals, an emotion curve declining from happy to furious, problems, and ideas across five stages from hearing about a beer to searching with restrictions
Current journey mapping for the user: the emotion curve falls off a cliff once criteria enter the search.

Competitive Analysis

Next, I compared The Beer Store app with existing and related products in the retail space: searching for a great speaker on Amazon, a German beer from LCBO, a local restaurant on Yelp. For apps like LCBO or TBS, users usually visit to find a variety of beers recommended by friends or co-workers, something difficult to do by visiting a brewery or pub. I set out to design an experience tailored exclusively to fill this gap.

Competitive analysis table comparing The Beer Store, LCBO, and Yelp across homepage information density, simple search, and search filters
Comparing applications to benchmark search functionality and identify user expectations
Users come to these apps to find beers recommended by friends and co-workers, a specific, criteria-driven need the app completely failed to support.

What the audit reinforced

  • Limited search options: Lack of sophisticated filters or product attributes.
  • Time consumption: The process takes too long for users to locate products.
  • Inconsistent experience: Discrepancies between the web and mobile app search features.

Minimal Changes, Maximum Impact

After validating the need and gathering the categories along with their priorities, I sketched a few solutions in Balsamiq and presented them to the team early. This led to good discussions and a faster understanding of requirements between internal and external teams. The four screens below read as one flow: the whole redesign in a single scroll.

01

Easy access from home

Home screen wireframe with Browse Brands category tiles and a highlighted More Filters button below the grid

A “More Filters” button lands right below the category grid: advanced criteria, one tap from launch.

02

Popular categories pop-up

Pop-up screen wireframe listing popular filter categories: pack size, container type, on sale, country, beer style

A pop-up sheet surfaces popular categories: multiple filters, no modal maze.

03

Second-level options

Second-level filter wireframe: a Pack Size drill-down listing 4, 6, 12, and 24 pack options with an Apply button

Each category drills down to its options: pack size, container type, beer attributes.

04

All filters applied

Search results wireframe with applied filter chips: 4 Filters, On Sale, Low Cal, Belgian, above the beer list

Applied filters stay visible above the results: the state of the search is never a mystery.

Testing Early, in Low Fidelity

I used Balsamiq as my wireframing tool to build initial mockups and get feedback early on. Internal users tested the flows and gave instant feedback, incorporated before any high-fidelity work began.

Wireframe of the More Filters screen annotated with feedback: ability to apply multiple filters, no modal screen
Internal feedback: multiple filters, no modal screens
Wireframe annotated with feedback: easy to visualize the number of options selected per category
Internal feedback: selected counts visible per category

The Prototype

The final flow, stitched together: from the home screen to a fully filtered result list.

Prototype: filter-driven discovery, end to end

Learnings & Key Takeaways

No Such Thing as Over-Communication

Research & Testing

The one-week timeline didn’t leave any breathing room to approach the problem with deeper research and testing.

Given more time, I’d love to run usability testing with real users to avoid any assumptions made in the process.

Communication

I was constantly in touch with product managers, designers, and developers to ensure the feasibility of my designs, and I will continue to do so in every project.

Constant contact with every stakeholder is what kept a one-week project feasible: the designs shipped because nobody was ever surprised by them.