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.
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.
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.
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.
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.
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.
Customer are able to view products from the first screen and sub-categories beyond two taps become filters.
Utilized the concept of popular chips for quick action filter experience
Reduce the height of the header by:
Improvements to the filter experience:
The filter & sort button leads to one filter & sort menu experience
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
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:
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.
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.