Overview
Patagonia is a renowned outdoor apparel and gear brand celebrated for its commitment to sustainability, environmental activism, and high-quality, durable products designed for outdoor enthusiasts. The company embodies a "business for good" ethos, championing ethical practices, environmental conservation, and social responsibility.
As Lead Digital Designer, I spearheaded the design of Patagonia's new on-site search experience, ensuring it aligned with the brand's commitment to providing seamless and user-centric digital interactions. Leveraging extensive research and industry best practices, I crafted a solution that balances functional UX design with Patagonia's visually distinctive UI style. From concept to completion, I focused on creating an intuitive and aesthetically engaging search experience that empowers users to effortlessly discover the products and information they need.
My Role
Design Lead
Research & Exploration
Stakeholder Management
Prototyping
Development Handover
Team
Digital Designer
Project Manager
Tech Lead
Design Proccess
This project was the result of a UX audit that revealed the impact search was having on the Patagonia website, this was followed by a design process was rooted in a collaborative and iterative approach, leveraging Figma as the primary tool for exploration, prototyping, and feedback. I began with design exploration to generate and refine ideas, experimenting with layouts, interactions, and visual elements to align with both user needs and brand guidelines. Prototyping in Figma allowed me to create interactive, high-fidelity mockups, enabling stakeholders and team members to experience the design as if it were live. This approach facilitated rapid iteration, seamless collaboration, and efficient communication, ensuring that the final product was both user-friendly and visually engaging.
Research: Using Data-Driven Design
To help drive this particular onsite optimisation, in colloboration with our data team reasearch was carried out that determined the high value and of Patagonia's onsite search. Through data tracking and GA4 analysis we discovered users that interacted with search led to better product discovery and purchase conversion. Hence, beyond improving the overall experience of search one of the real pivotol recommendedations in ths project was that we increase the visibility of search by having it displayed as an input field on desktop and mobile as oppose to having it hidden behind a search icon as it was at the time. From here additional research was carried out leveraging best practices from the Baymard Institute to ensure the design adhered to established usability standards and insights.
Algolia Integration
Algolia was our recommended platform in terms of optimising Patagonia's search experience. For context Algolia is a powerful search and discovery platform that enables businesses to deliver fast, relevant, and personalised search experiences across websites and applications.
Part of my approach was to collaborate closely with Algolia. Through this I gained a deep understanding of their platform's capabilities and tailored the design to maximise its potential. This included features like dynamic recommendations and search term suggestions, which were seamlessly integrated into the interface to enhance the overall experience.
UX Flow and UI Designs
To design an effective search experience, we first identified the key steps in the user journey. Collaborating with Algolia, we gathered insights from various Shopify x Algolia search implementations to inform our design.
The goal was to create an immersive experience that helped customers find products and recommendations quickly. With Algolia ensuring speed, our focus was on surfacing the right information at the right time.
As soon as search was activated, users would see relevant content—either based on their previous activity or useful insights like best sellers and trending searches—to enhance product discovery. Additionally
Below is a screenshot of the key screens designed in Figma and lined up in order. The flow was also further illustrated in a prototype set up in Figma which allowed our client and developers to get a better feel for the user experience.
This is a closer look at the design put forward for the Search Active State and Search Autocomplete State:
This is a closer look at Search Results Page for products and articles respectively:
What I learnt
As Design Lead, I was responsible for managing discussions with Patagonia’s team and coordinating with our partners at Algolia. I led briefing calls, workshops, and design presentations—ensuring that the reasoning behind our design decisions was clearly articulated and aligned with both user needs and business goals. Keeping stakeholders engaged was crucial, and their feedback played a vital role in shaping the final designs. I carefully managed and incorporated their input throughout the process, ensuring a collaborative and user-focused outcome.
The Result
The final result is a user-focused on-site search experience that seamlessly combines functionality with Patagonia's distinct brand identity. The design not only addresses user pain points, such as "No Results Found" scenarios, but also proactively guides users toward alternative options like trending products, popular categories, and suggested search terms. By leveraging Algolia's powerful capabilities and implementing research-backed best practices, the solution delivers a fast, intuitive, and visually engaging experience across devices. Ultimately, this design enhances user satisfaction, drives conversions, and reflects Patagonia's commitment to providing exceptional digital experiences.
