Challenge
Colgate's filter system allowed users to narrow options by type, product line, and size/flavor. They wanted a search field to streamline the process. I aimed to ensure we solved the right problem, not just implement the requested feature.
Solution
We aimed to simplify product discovery while maintaining efficiency. Our user-centered redesign focused on making the search functionality intuitive while meeting both user and client needs.
After meeting with the brand team and receiving the initial request to "Add Search,"the research and process began. We ran user tests, created a custom UX kit, and collaborated with engineering and the brand IT team. After many rounds of testing, iterations, and revisions, we presented a few options, not just for review but for clear communication. What follows is the rest of the process and the unexpected byproduct of the UX kit.
Mapping the Product Catalog To design an effective search and filter system, we first needed to understand the product catalog's information architecture. We created a visual map to clarify the relationships between product families (e.g., Peppermint), product lines (e.g., Colgate Wisp), and individual products, ensuring our design aligned with the existing data structure.
To ensure we solved the right problem, I researched similar "where to buy"features from brands like Ben & Jerry's and Chobani. Initial user testing revealed that users struggled with the discoverability of the search feature, indicating it needed to be more prominent. I then conducted unmoderated user tests via UserTesting.com, targeting users who had purchased dental products in the last three months to validate the need for a search feature.
Using research insights, I quickly developed design concepts in Figma with my PM, consulting an engineer for feasibility. Starting with simple wireframes allowed rapid iteration and refinement based on user feedback, keeping discussions focused on core issues and ensuring clear communication to understand user needs better.
After an initial wireframe I rapidly began creating variations for consideration, which we would narrow down before presenting to the team.
One of the iterations shown here focused on a common theme from user testing where they requested a filter for adults vs. kids products, as they found it annoying to get children's products mixed in, forcing them to sift through results.
User testing showed that a text-only dropdown made it hard to recognize products. We added images to the dropdown and also specified the number of results to display. This was reviewed with engineering and the client before committing.
One of the challenges we solved with the UX kit was to communicate different flows and how search would interact with existing filters and in which order by the user. By using different colors and shades to represent different products and product categories, we were able to easily demonstrate expectations and align with the brand's catalog to ensure the order of filtering.
This image is part of the final flow we presented to the Colgate team, capturing the improvements and highlighting the important steps in the flow. It shows how the dropdown looks on both desktop and mobile, ensuring a seamless user experience across devices, and setting clear expectations of the final build.
The UX kit evolved into a comprehensive modular library with common elements, states, and various layouts. After launching with Colgate, we began using it for future projects, expanding the options, and growing the functionality.
I published the UX kit in Figma, making it easy to use elements from the assets panel for quick mockups. This streamlined our workflow, enabling efficient creation and iteration of design concepts for future projects.
Results
The new Colgate template successfully launched, setting a precedent for using lo-fi wireframes as an effective communication tool. By focusing on the needs of Colgate's shoppers, we integrated search functionality while retaining useful filters, demonstrating a commitment to user-centric design. Effective communication with the client throughout the process ensured that their requirements were met and that the final product aligned with their expectations.
- Positive Feedback: The new search feature was well-received by users, improving overall satisfaction. This highly popular template was requested by other customers and became known internally as the "Colgate Template".
- Next Steps: Early results showed increased user engagement and a higher rate of successful product searches. Looking ahead, we plan to use the insights gained from search data to further refine Colgate’s website and continuously improve the user experience.
- Byproduct: The project illustrates the benefits of thinking in systems and creating reusable components, which we later used to improve similar features for other clients, such as Nestlé. The UX kit we developed for this project became a valuable asset, enabling us to replicate successful patterns across future projects.
