Search by Algolia
What is online retail merchandising? An introduction
e-commerce

What is online retail merchandising? An introduction

Done any shopping on an ecommerce website lately? If so, you know a smooth online shopper experience is not optional ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

5 considerations for Black Friday 2023 readiness
e-commerce

5 considerations for Black Friday 2023 readiness

It’s hard to imagine having to think about Black Friday less than 4 months out from the previous one ...

Piyush Patel

Chief Strategic Business Development Officer

How to increase your sales and ROI with optimized ecommerce merchandising
e-commerce

How to increase your sales and ROI with optimized ecommerce merchandising

What happens if an online shopper arrives on your ecommerce site and: Your navigation provides no obvious or helpful direction ...

Catherine Dee

Search and Discovery writer

Mobile search UX best practices, part 3: Optimizing display of search results
ux

Mobile search UX best practices, part 3: Optimizing display of search results

In part 1 of this blog-post series, we looked at app interface design obstacles in the mobile search experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 2: Streamlining search functionality
ux

Mobile search UX best practices, part 2: Streamlining search functionality

In part 1 of this series on mobile UX design, we talked about how designing a successful search user experience ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Mobile search UX best practices, part 1: Understanding the challenges
ux

Mobile search UX best practices, part 1: Understanding the challenges

Welcome to our three-part series on creating winning search UX design for your mobile app! This post identifies developer ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Teaching English with Zapier and Algolia
engineering

Teaching English with Zapier and Algolia

National No Code Day falls on March 11th in the United States to encourage more people to build things online ...

Alita Leite da Silva

How AI search enables ecommerce companies to boost revenue and cut costs
ai

How AI search enables ecommerce companies to boost revenue and cut costs

Consulting powerhouse McKinsey is bullish on AI. Their forecasting estimates that AI could add around 16 percent to global GDP ...

Michelle Adams

Chief Revenue Officer at Algolia

What is digital product merchandising?
e-commerce

What is digital product merchandising?

How do you sell a product when your customers can’t assess it in person: pick it up, feel what ...

Catherine Dee

Search and Discovery writer

Scaling marketplace search with AI
ai

Scaling marketplace search with AI

It is clear that for online businesses and especially for Marketplaces, content discovery can be especially challenging due to the ...

Bharat Guruprakash

Chief Product Officer

The changing face of digital merchandising
e-commerce

The changing face of digital merchandising

This 2-part feature dives into the transformational journey made by digital merchandising to drive positive ecommerce experiences. Part 1 ...

Reshma Iyer

Director of Product Marketing, Ecommerce

What’s a convolutional neural network and how is it used for image recognition in search?
ai

What’s a convolutional neural network and how is it used for image recognition in search?

A social media user is shown snapshots of people he may know based on face-recognition technology and asked if ...

Catherine Dee

Search and Discovery writer

What’s organizational knowledge and how can you make it accessible to the right people?
product

What’s organizational knowledge and how can you make it accessible to the right people?

How’s your company’s organizational knowledge holding up? In other words, if an employee were to leave, would they ...

Catherine Dee

Search and Discovery writer

Adding trending recommendations to your existing e-commerce store
engineering

Adding trending recommendations to your existing e-commerce store

Recommendations can make or break an online shopping experience. In a world full of endless choices and infinite scrolling, recommendations ...

Ashley Huynh

Ecommerce trends for 2023: Personalization
e-commerce

Ecommerce trends for 2023: Personalization

Algolia sponsored the 2023 Ecommerce Site Search Trends report which was produced and written by Coleman Parkes Research. The report ...

Piyush Patel

Chief Strategic Business Development Officer

10 ways to know it’s fake AI search
ai

10 ways to know it’s fake AI search

You think your search engine really is powered by AI? Well maybe it is… or maybe not.  Here’s a ...

Michelle Adams

Chief Revenue Officer at Algolia

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?
ai

Cosine similarity: what is it and how does it enable effective (and profitable) recommendations?

You looked at this scarf twice; need matching mittens? How about an expensive down vest? You watched this goofy flick ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What is cognitive search, and what could it mean for your business?
ai

What is cognitive search, and what could it mean for your business?

“I can’t find it.”  Sadly, this conclusion is often still part of the modern enterprise search experience. But ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

Looking for something?

Using UI kits for creating great ecommerce Search and Discovery experiences

Jul 7th 2021 ecommerce

Using UI kits for creating great ecommerce Search and Discovery experiences
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. Staff 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