Overview
In today’s competitive e-commerce landscape, a robust search and discovery experience plays a critical role in driving user engagement and conversions. As customers expect faster and more intuitive search experiences, companies face the challenge of delivering a modern solution that can seamlessly guide users through the discovery-to-checkout journey.
Recognizing the growing need for a standardized approach to search and discovery, my team and I set out to design a comprehensive, flexible UI kit specifically tailored for companies using Algolia’s search functionality. Our goal was to empower designers, developers, and product owners with best-practice tools to build, customize, and optimize their search and checkout experiences across diverse e-commerce platforms.
Problem
Algolia is a widely used search engine, adopted by companies of all sizes—from global giants like Nike to small Shopify-based businesses. With such a diverse user base, there was a lack of consistency in how search flows, cart additions, and checkout processes were implemented. Many companies struggled with underutilizing Algolia’s powerful search capabilities, leading to missed opportunities for conversions and poor user experiences.To address this, we needed to create a best-practices UI kit that:
1. Guides designers in creating modern, user-friendly search and discovery experiences.
2. Assists developers in building seamless search solutions, especially when a dedicated designer isn't available.
3. Educates product owners on the components of a state-of-the-art search experience to improve product planning and feature prioritization.
This toolkit would not only provide value to Algolia’s existing users but would also serve as a marketing tool to attract new customers by demonstrating the power of Algolia’s search capabilities.
Approach
To ensure the UI kit was grounded in best practices, I led the team through a series of discovery sessions, incorporating insights from industry standards like the Baymard Institute, Google UX Playbook, Nielsen Norman Group and atomic design principles. We focused on key aspects of the user journey, including:
• Search and Discovery
• Cart Additions
• Store Locator
• Checkout FlowPost-Purchase Experiences
We then conducted a deep dive into user pain points by working directly with Algolia customers, analyzing how they used search and identifying friction in their workflows. One key challenge we discovered was that many customers were unaware of certain hidden features within Algolia’s search functionality, leading to missed opportunities for engagement.
Since Algolia is used by a broad spectrum of companies—it was essential that our design approach was elastic. We needed to create a UI kit that could work for various business models, industries, and product types.
By collaborating with a diverse list of Algolia customers, we championed a flexible design system that would:
• Scale across brands and industries without losing effectiveness.
• Accommodate different search and checkout flows depending on product type, business size, and platform.
Once the research and planning were complete, we began developing the UI kit, which included:
• Brand-Agnostic Color and Typography Variables: These allow companies to easily plug in their own branding while maintaining the best-practices structure.
• Fully Nested Variants: Components were designed to be modular and scalable, ensuring that teams could create complex search and discovery experiences without starting from scratch.
• Layout Examples: Pre-built layouts were provided for search results, filtering, and checkout pages, giving teams a head start in designing their flows.
The kit was designed using atomic design principles, ensuring that the smallest elements (like buttons and input fields) could be reused and combined to create larger, more complex components like search result pages and checkout flows.
We worked in an iterative process, continuously testing the UI kit with Algolia users to gather feedback. This feedback loop helped us fine-tune the kit for real-world use cases and ensure that the designs worked for companies of different sizes and industries.
We also diagrammed the full user journey—showing how search, cart additions, and checkout flows could be optimized across various devices and platforms. This gave customers a clear understanding of how to implement the kit effectively and tailor it to their needs.
Search and discovery experiences evolve rapidly with new trends and user behaviors. To keep the UI kit relevant, we established a system for continuous updates, ensuring that the merchandising team could keep the file current with modern UX patterns. This agility allowed us to adapt the kit to evolving best practices, helping users stay ahead of industry trends.
Challenges
• Elastic Design Approach: Designing a flexible system that could accommodate businesses of all sizes was a key challenge. We had to balance creating a scalable design system while ensuring it remained usable and customizable across diverse use cases.
• Hidden Features Awareness: Many Algolia users were unaware of its full feature set, particularly around search optimization. We needed to ensure the UI kit highlighted these hidden capabilities and provided clear guidance on leveraging them effectively.
• Consistency in Customization: While allowing for brand customization, we had to ensure the core best practices remained intact. This required thoughtful design to maintain consistency while offering flexibility.
Outcome
The Algolia UI Kit was launched as an open-source file on Figma, and it quickly gained traction, with over 8,000 users utilizing the kit to improve their search and discovery experiences. The kit has been praised for its:
• Ease of use: Designers and developers can quickly jumpstart their search projects, significantly reducing the time it takes to implement a new feature or redesign.
• Scalability: The brand-agnostic variables and modular components allowed companies from different industries to customize the kit to their specific needs.
• Educational value: Product owners have reported gaining a deeper understanding of what makes a high-converting search and checkout flow, helping them make more informed product decisions.
While it’s too early to quantify the full direct impact on sales, we did acquire 3 new organizations because of the release. The positive feedback and widespread adoption of the kit indicate that it has become a valuable resource for Algolia’s user base. It has also served as a marketing asset, positioning Algolia as a leader in search technology and increasing awareness among potential customers.
