Menu
Elevating exploration with enhanced filters, seamless flyouts, and superior shopping savvy.
The Publix search team aimed to enhance the search experience by fine-tuning pre-search filters, refining the user experience of the search result page, and completely redoing the search component with additional integrated elements in the Publix Design Library (PDL).
End-to-end Designer and PDL Implementation Engineer, working alongside the search team
Aug 2023 -Nov 2023
Design system – Search optimization – UX/UI
Publix’s search optimization suffered due to the absence of essential search filters, impairing its search capabilities and compromising SEO margins. Furthermore, the current search flyout component and search result pages need more modern features and intuitive design elements, making it easier for users to find what they are looking for quickly and efficiently.
The Publix search team successfully reworked the overall search experience in Phase One. Enhancements included improved search capabilities with new filters and the implementation of a revamped search flyout component. Both features have now been seamlessly integrated into the Publix e-commerce site.
To address the current issues, I utilized previous analytics from Baymard related to search functionalities and capabilities. I looked at other competitors’ search functionality and capabilities, created scenarios for pre-search filters, and developed high-fidelity iterations for screens that customers will likely encounter during their search experience.
I extensively reviewed multiple e-commerce websites, focusing on their search functionality across different industries. This broad analysis provided valuable insights into industry standards and best practices.
Airbnb offers users the option to refine their searches directly on the home page or through dropdown menus within the app interface.
Unique Features
Creative Market prioritizes search bar visibility and conveniently provides filters within the bottom navigation for enhanced user experience.
Unique Features
Ticketmaster adopts a search filter setup akin to Airbnb’s, bolstered by a convenient search feature tailored for specific artists.
Unique Features
Unique Features
After completing a competitive analysis of search capabilities, I collaborated with the search PM to create detailed scenarios of the new search features that users will interact with on Publix’s search platform. This process helped guide the design, ensuring that the product meets user needs and provides a seamless experience.
With the scenarios fleshed out in collaboration with the search PM, I developed various design iterations for the search flyout states and pre-filter search pages.
This iteration focused on a traditional list view format for the search results. The list view provides a straightforward and familiar interface for users, displaying results in a vertical list with relevant details such as title, image, and short description. This design emphasizes clarity and ease of navigation.
The chip view iteration introduced a more dynamic and interactive way to present search filters and results. Using visual chips for categories and filters, this design allows users to quickly refine their search by selecting and deselecting chips. This format is particularly useful for mobile users, providing a compact and visually engaging interface.
User testing evaluated the effectiveness and satisfaction of the new search design iterations. Participants completed tasks related to the updated search functionality, list view, and chip view designs, providing feedback on their experience, ease of use, and any issues encountered.
Users noted that the improved search filters significantly increased the speed at which they could find relevant results, enhancing overall satisfaction with the search experience.
Feedback indicated that the new search algorithm provided more accurate results, reducing the need for users to refine or rephrase their queries multiple times.
Chip filters was particularly favored by mobile users due to its compact and touch-friendly design.
Following the completion of the research I partnered with the search team to fine-tune our final design decisions, with the goal of enhancing both the search flyout component and the overall user experience.
When users search without setting a context, results should match their query. If it matches a context like “Order ahead,” it’s pre-selected in the shopping context dropdown.
Prioritize displaying the exact product match at the top of the flyout when the query matches a product title. This ensures users have immediate access to the Product Detail Page (PDP).
For exact product matches or queries containing “order ahead” with four or more words, direct users to orderable product results, with business-controlled exceptions. Display up to three product cards in the flyout for quick options.
If the query matches a recipe title, direct the user to recipe results, even if they initially searched for products. Display up to three recipe titles in the flyout for quick access. Also, include a banner for users to manually clear their search context if necessary.
Default to displaying “All Products” when a query doesn’t match any specific result type for comprehensive search results. Show up to three product titles in the flyout to provide users with available options.
As I refined the search experience for Publix, a crucial focus was on updating the search component and seamlessly integrating it into the Publix Design Library (PDL). This ensured that the enhancements made weren’t confined to the current project but could be leveraged across various digital initiatives within Publix.
The search component now has new breakpoints implemented by the PDL team. One concern that was fixed was that users couldn’t go back to their previous search. Now on mobile, the search bar includes a back arrow to improve user experience and avoid dead ends.
The search flyout component has been redone to complement the overall search experience. The previous horizontal display was less intuitive and harder to navigate. The new vertical design allows for easier scanning and selection of search results, accommodating more information and filters without overwhelming the user.
The new search flyout introduces horizontal and vertical spacing tokens for multi-autocomplete, product, and content search rows. It also includes updated states, such as hover and press, to enhance developer collaboration.
With the implementation of the search flyout, new icons were created to represent search row items to improve visual clarity. This helps users understand their function and makes it easier to identify which row item they are clicking.
The search team has successfully implemented the new search enhancement, now live on Publix.com. This offers users an improved search functionality experience. Click the button below to explore the enhancements further!
New KPI metrics were implemented for Phase 1, which included the implementation of new search pre-filters, search hit rate while on search pre-filter, etc. These KPIs were tested over three months to gain a comprehensive understanding of their impact.
The search conversion rate increased by 12% due to the improved search filters and the refined search flyout component. Users could find relevant products faster, leading to higher conversion rates..
The average search duration decreased by 8%, indicating that users were able to find what they were looking for more quickly. This improvement is attributed to the dynamic filtering and enhanced user interface.
The search click-through rate improved by 10% as the new design provided clearer and more relevant search results, encouraging users to engage with the search results more frequently.
