Search by Algolia
What is B2B ecommerce? Everything you need to know
e-commerce

What is B2B ecommerce? Everything you need to know

When you think of “customer experience,” what comes to mind? People, right? Specifically, consumers. Retail customers. That’s easy; the ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is ecommerce merchandising? Key components and best practices
e-commerce

What is ecommerce merchandising? Key components and best practices

A potential customer is about to land on the home page of your ecommerce platform, curious to see what cool ...

Catherine Dee

Search and Discovery writer

AI-powered search: From keywords to conversations
ai

AI-powered search: From keywords to conversations

By now, everyone’s had the opportunity to experiment with AI tools like ChatGPT or Midjourney and ponder their inner ...

Chris Stevenson

Director, Product Marketing

Vector vs Keyword Search: Why You Should Care
ai

Vector vs Keyword Search: Why You Should Care

Search has been around for a while, to the point that it is now considered a standard requirement in many ...

Nicolas Fiorini

Senior Machine Learning Engineer

What is AI-powered site search?
ai

What is AI-powered site search?

With the advent of artificial intelligence (AI) technologies enabling services such as Alexa, Google search, and self-driving cars, the ...

John Stewart

VP Corporate Marketing

What is a B2B marketplace?
e-commerce

What is a B2B marketplace?

It’s no secret that B2B (business-to-business) transactions have largely migrated online. According to Gartner, by 2025, 80 ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

3 strategies for B2B ecommerce growth: key takeaways from B2B Online - Chicago
e-commerce

3 strategies for B2B ecommerce growth: key takeaways from B2B Online - Chicago

Twice a year, B2B Online brings together industry leaders to discuss the trends affecting the B2B ecommerce industry. At the ...

Elena Moravec

Director of Product Marketing & Strategy

Deconstructing smart digital merchandising
e-commerce

Deconstructing smart digital merchandising

This is Part 2 of a series that dives into the transformational journey made by digital merchandising to drive positive ...

Benoit Reulier
Reshma Iyer

Benoit Reulier &

Reshma Iyer

The death of traditional shopping: How AI-powered conversational commerce changes everything
ai

The death of traditional shopping: How AI-powered conversational commerce changes everything

Get ready for the ride: online shopping is about to be completely upended by AI. Over the past few years ...

Aayush Iyer

Director, User Experience & UI Platform

What is B2C ecommerce? Models, examples, and definitions
e-commerce

What is B2C ecommerce? Models, examples, and definitions

Remember life before online shopping? When you had to actually leave the house for a brick-and-mortar store to ...

Catherine Dee

Search and Discovery writer

What are marketplace platforms and software? Why are they important?
e-commerce

What are marketplace platforms and software? Why are they important?

If you imagine pushing a virtual shopping cart down the aisles of an online store, or browsing items in an ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is an online marketplace?
e-commerce

What is an online marketplace?

Remember the world before the convenience of online commerce? Before the pandemic, before the proliferation of ecommerce sites, when the ...

Catherine Dee

Search and Discovery writer

10 ways AI is transforming ecommerce
e-commerce

10 ways AI is transforming ecommerce

Artificial intelligence (AI) is no longer just the stuff of scary futuristic movies; it’s recently burst into the headlines ...

Catherine Dee

Search and Discovery writer

AI as a Service (AIaaS) in the era of "buy not build"
ai

AI as a Service (AIaaS) in the era of "buy not build"

Imagine you are the CTO of a company that has just undergone a massive decade long digital transformation. You’ve ...

Sean Mullaney

CTO @Algolia

By the numbers: the ROI of keyword and AI site search for digital commerce
product

By the numbers: the ROI of keyword and AI site search for digital commerce

Did you know that the tiny search bar at the top of many ecommerce sites can offer an outsized return ...

Jon Silvers

Director, Digital Marketing

Using pre-trained AI algorithms to solve the cold start problem
ai

Using pre-trained AI algorithms to solve the cold start problem

Artificial intelligence (AI) has quickly moved from hot topic to everyday life. Now, ecommerce businesses are beginning to clearly see ...

Etienne Martin

VP of Product

Introducing Algolia NeuralSearch
product

Introducing Algolia NeuralSearch

We couldn’t be more excited to announce the availability of our breakthrough product, Algolia NeuralSearch. The world has stepped ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

AI is eating ecommerce
ai

AI is eating ecommerce

The ecommerce industry has experienced steady and reliable growth over the last 20 years (albeit interrupted briefly by a global ...

Sean Mullaney

CTO @Algolia

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

Customize page and component design for mobile and web, apply best-practice guidelines for your industry

An effective consumer Search and Discovery process for products is key to the success of any ecommerce website. A UI kit for search contains the visual and interactive components and screen layouts to ensure a best-in-class online experience. 

According to consumer-insights writers Alistair Rennie and Jonny Protheroe at Google, “As the internet has grown, it has transformed from a tool for comparing prices to a tool for comparing, well, everything. That’s clear in how we’ve seen purchase behavior change over the years….”

A well-thought-out ecommerce user experience is critical because of what Rennie and Protheroe call the “messy middle” of the purchase journey: the online shopping stage in which people explore and evaluate their product buying options, where they’re susceptible to recommendations, ratings, and reviews. 

The underlying functionality that drives the customer journey through the messy middle is search. Customers come to an ecommerce site in search of the perfect item. They look at their search results, which may encompass everything from products, features, and prices to reviews, delivery costs, and delivery or pick-up options. If satisfied, they keep searching until they find what they want, but only if the search experience measures up to their expectations. Customers expect relevant content to immediately appear at their fingertips. They’re also continually evaluating the finesse of the site’s overall user experience, along with the company’s branding and reputation. 

Why a UI kit for search?

A UI kit facilitates the design of a shopping experience that provides easy viewing of all the details a customer needs in order to sift through the messy middle. In essence, the kit cleans up the mess, lighting a clear path to the shopper’s ideal item, as well as letting them enjoy further shopping exploration and discovery and converting them into a loyal customer.

The secret lies in design simplicity and well-placed navigation features (the search bar, facets, product categories, and menus). The best design revolves around easy access to product recommendations and related items. It incorporates visual techniques that highlight relevant or related content. It may encompass federated search, which allows shoppers to find non-product items such as articles and FAQs along with products, ideally all provided by a single, enjoyable Search and Discovery experience. 

A UI kit can also help web and mobile designers create and customize experiences that incorporate industry best practices, thereby maximizing ROI in addition to winning over site visitors.

The Algolia approach

If you search the Web, you’ll find plenty of UI kits targeted to ecommerce. They tend to focus on enhancing the global online shopping experience, not on creating effective search, browse, and conversion functionality

At Algolia, we took note of the popularity of these widely focused UI kits and realized that we could create our own version geared specifically for our forte, Search and Discovery. Ecommerce websites that institute first-rate search impress their customers and gain their trust, ultimately increasing revenue and building brand loyalty. Our mission has always been to empower companies to create great search experiences, so this was the logical next step. 

In the past few years, we’ve been streamlining our software to make it easier and faster for developers to build excellent Search and Discovery experiences — with or without a search box. For example, we’ve added relevance features such as personalization, merchandising, and AI-driven recommendations, as well as upgraded our InstantSearch and Algolia Autocomplete libraries.

However, we also realized that we hadn’t focused enough on empowering business teams, designers, and developers to envision a robust front-end experience when creating effective UI and UX. We determined that more guidance and resources were needed in that area, and we set out to make it happen.

Introducing our first UI kit

We created a free and open source E-Commerce Search and Discovery UI Kit to let web and mobile designers seamlessly collaborate with business stakeholders and developers to set up best-in-class search UI/UX that also encompasses beyond-search-box functionality. 

This kit is designed to improve shoppers’ perceptions of speed and relevance, search and browse navigation, and lots more. For example, we’ve included personalized product carousels and product detail pages that contain cross-sell recommendations. We’ve included the ability to let shoppers search customers’ product reviews, as well as easily locate brick-and-mortar stores where they can pick up their purchased items.

This UI kit contains two types of resources:

  • Customizable screen layouts you can easily tailor to fit your brand and use in addition to your own website mockups 
  • A library of UI components such as search bars, refinement lists, and carousels, which you can select to customize existing screens or use when creating original mockups

The kit also offers best-practice recommendations on the most optimal page layouts and components to use for your particular industry and product types.

Based on best practices

This UI kit has been born out of years of monitoring our Algolia UX best practices and researching Search and Discovery patterns. Additionally, we’ve incorporated key findings cited by industry leaders such as Google (in its ”UX Playbook for Retail: collection of best practices to delight your users”) and Baymard Institute (in its E-Commerce UX Research Articles).

Inspired by Brad Frost’s Atomic Design concept, our UI kit is 100% customizable and optimized to reflect modern workflow design. We ensured that these eight key requirements would be met:

Image of a atomic design

What’s in this UI kit?

  • Responsive mockups

Your designers can access more than 30 responsive screen mockups of a full Search and Discovery solution for mobile, web, and desktop platforms. These are layouts embodying user-experience patterns that shoppers would expect to find when they visit modern ecommerce sites. 

Designers can use these prototypes as prebuilt starting points, then customize them to reflect industry norms and branding.

The retail web design options include:

  • Home page layouts with global navigation headers and user-tailored carousels built for discovery 
  • A multicategory autocomplete (“predictive search”) search box with query-suggestion functionality
  • A product listing page that works well for both searching and browsing, with filters and a sort panel
  • A product detail page that includes recommendations and lets shoppers search user reviews
  • A store locator that lets shoppers find the closest brick-and-mortar location if they prefer to pick up the item

Here’s an example of a home page design for mobile that features a content carousel (which can be powered by Algolia’s Search Personalization):

Image of a UI kit UX

Ecommerce site usability can be enhanced by adding autocomplete functionality. You can show shoppers query suggestions, particular brands, product category pages, FAQs, and items, all in a single view that can be easily built using Algolia Autocomplete

Here is a mobile autocomplete search bar from our UI kit:

Image of a mobile autocomplete

On your site’s product detail pages, you can let users search customer reviews, along with viewing cross-sell suggestions (related items and frequently bought together items, powered by Algolia Recommend):

Image of a UI kit mobile detail page

  • Mixable and matchable components

In addition to responsive page layouts, designers will appreciate having access to a variety of individual UI components for page layout and navigation. These components, which have all been built using auto-layout and variants, range from the simple to the complex. They can be adjusted, mixed, matched, and moved as needed to reflect your site structure and branding. This flexibility applies to pages, the search bar, and the design elements.

Here’s a sample search box with variants for mobile and desktop:

Image of a UI kit searchbox

  • Simplified designer-developer collaboration

Our UI kit can also help facilitate conversation between the design and business teams, ultimately leading to the timely creation of a great solution. Designers can create a first viable version to show management, and then progressively streamline later iterations. When everything is approved, developers can access measurements and code snippets to smooth the transition to development. 

What’s next?

We’ll be improving the UI kit views and components, as well as creating a UX “playbook” of insights and recommendations for building the views in the kit. In addition, the kit will no longer strictly contain design tools; we’re creating developer “templates” that provide usable code to implement the visuals. 

How to get started

Ready to check out Algolia’s UI kit? It’s accessible in Figma on our website.

If you’re a designer, you can either start with the predesigned mockups and customize them to fit your company brand, or you can add UI components to your own mockups and design system

If you’re a developer, start browsing the contents of the kit to get inspired and see what you might end up building. 

We hope you’ll dive in and explore the UI kit. Check it out now!

What do you think?

Because we’re in continuing developmental mode, we’d love to hear from you about your experience with our UI kit: 

  • How has it been helpful for your design team or business folks?
  • Is there anything you think is missing?

Please share your thoughts in our community.

About the authors
Catherine Dee

Search and Discovery writer

linkedin
Alexandre Collin

Product Manager - Frontend eXperiences

linkedintwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

How to satisfy user intent when considering search vs browse
e-commerce

Peter Villani

Sr. Tech & Business Writer

How to streamline your search UX design
ux

Catherine Dee

Search and Discovery writer

The (almost) ultimate guide to site search
product

Ivana Ivanovic

Senior Content Strategist