Publix Mobile App

Filter Optimization

Introduction

Frustration in Finding Filters

Publix hired a third-party firm, Baymard, to conduct a comprehensive evaluation of our mobile app and website. They discovered that customers face challenges in effectively filtering a product list, leading to a prolonged search for desired items.

*The level of design maturity at Publix is currently not very high. Therefore, on occasion, we utilize reports like this one, which are highly regarded by our leadership, in order to help facilitate progress on design changes that have been stagnant, yet necessary.

Summarizing the Report

  • Ensure paths to filter & sort are prominent and easy to recognize
  • Display applied filters in an overview
  • Implement product sub-types as filters instead of categories
  • Have a ‘View all’ option at each level of category hierarchy
  • Never have elements which are fixed when scrolling taller than half the screen height

My Role

I served as the primary designer for this project, receiving feedback from the app's project manager, lead designer, and the wider UX team. I collaborated with the development team to conduct quality assurance testing on the designs before it launched.

Scope & Contraints

With each feature, there is a desire to update all screens in the user journey, or at the very least, an entire screen rather than just a portion of it. However, due to the need to align with the sprint release goals of the delivery team, it was necessary to scale back this project. As a result, a minimum viable product (MVP) was approved for launch.

Competitive Analysis

Checking Out the Competition

I conducted a comprehensive competitive analysis in order to obtain valuable insights into the strategies and practices adopted by other organizations. The companies examined included HEB, Target, Nike, Sephora, Whole Foods, Randall’s, Adidas, and Kroger. Through this examination, I observed recurring patterns and, consequently, developed a design solution that successfully aligned with our organizational goals.

Competitive Research Suggestions

The Existing Experience

Filter Touch-points

It was crucial to take into account all the areas where customers interact with filters. While designing for a specific area, the proposed solution must seamlessly function across all areas. In total, there were five touch-points, two of which were located within the list tab.

Global Search
Collections
Order Ahead
Savings
Favorites (List)
Purchases (List)

Order Ahead

The Baymard report primarily focused on the order ahead experience, prompting me to initiate the design process by placing emphasis on this particular user flow. Through this analysis, I identified various pain points within the existing user journey that I aimed to address and improve upon in the design of the solution.

The Solution

Product Listing

Customer are able to view products from the first screen and sub-categories beyond two taps become filters.

Design Decisions

Utilized the concept of popular chips for quick action filter experience

Current
New

Reduce the height of the header by:

  • Used the small variant of the page header component for a more collapsed view
  • Replaced tabs with category navigation
  • Removed bread crumbs for more industry standard back button
  • Removed filter by keyword search bar after looking at analytics showing low engagement
  • Kept the filter & sort button with chip overview within the same horizontal space

Improvements to the filter experience:

  • As customers select filters, chips appear at the top of the screen as an overview of their selections in order of most recently selected to least recent
  • The filter & sort button remains a fixed actionable element and the chips horizontally scroll behind the button
  • The chips served as overview of selected filters
  • The counter added further customer feedback to the number of filters selected
  • Color was used to add visual contrast between the button and both the unselected & selected chips
  • The divider line creates further visual contrast with separation

Filter & Sort Menu

The filter & sort button leads to one filter & sort menu experience

Design Decisions

Accordions were used to reduce the amount of vertical scrolling for the customer with a way for them to see their selections when each accordion was collapsed

Sort by is single select indicated by radio buttons

Chips and checkboxes were chosen for other sections to add visual interest and differentiation

As customers select filters, chips appear at the top of the screen as an overview of their selections in order of most recently selected to least recent

When the number of selections in a category exceeds five, a button is shown to allow the user the expand the view

As customers select filters, the button dynamically updates to show the number of results

Filters get applied when the CTA is tapped vs when "X" is tapped

The Final MVP

A Scaled Down Version

It was determined from analytics that filters were seldom used and not worth a big effort. The project was scaled down to decrease the development effort needed to fit within a sprint. Thus, the first phase of launching the filter experience:

  • Would only be launched in one of the touch-points, specifically merchandising collections
  • Would not include the circle counter, but the count would be in parenthesis as part of the text label
  • All sections other than sort would use checkboxes for selection and accordions were eliminated to expose all options
  • Exclude the popular filters
  • Not encompass the new filter and sort menu, but instead use the existing experience

Takeaway

The key lesson learned from this project is the importance of consistently pursuing ambitious objectives and working towards significant transformation, all the while remaining flexible and responsive to any constraints that may arise during collaborative efforts with other teams.

Next Steps

The enhanced filter experience was introduced at the end of January 2024. Our next course of action is to evaluate its performance, which will guide us in deciding when and what to launch in the second phase.

See More Projects

Back to Top