Search by Algolia
How personalization boosts customer engagement
e-commerce

How personalization boosts customer engagement

You land on your favorite retailer’s website, where everything seems to be attractively arranged just for you. Your favorite ...

Jon Silvers

Director, Digital Marketing

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?
e-commerce

What is retail analytics and how can it inform your data-driven ecommerce merchandising strategy?

There is such tremendous activity both on and off of retailer websites today that it would be impossible to make ...

Catherine Dee

Search and Discovery writer

8 ways to use merchandising data to boost your online store ROI
e-commerce

8 ways to use merchandising data to boost your online store ROI

New year, new goals. Sounds positive, but looking at your sales data, your revenue and profit aren’t so hot ...

John Stewart

VP, Corporate Communications and Brand

Algolia DocSearch + Astro Starlight
engineering

Algolia DocSearch + Astro Starlight

What is Astro Starlight? If you're building a documentation site, your content needs to be easy to write and ...

Jaden Baptista

Technical Writer

What role does AI play in recommendation systems and engines?
ai

What role does AI play in recommendation systems and engines?

You put that in your cart. How about this cool thing to go with it? You liked that? Here are ...

Catherine Dee

Search and Discovery writer

How AI can help improve your user experience
ux

How AI can help improve your user experience

They say you get one chance to make a great first impression. With visual design on ecommerce web pages, this ...

Jon Silvers

Director, Digital Marketing

Keeping your Algolia search index up to date
product

Keeping your Algolia search index up to date

When creating your initial Algolia index, you may seed the index with an initial set of data. This is convenient ...

Jaden Baptista

Technical Writer

Merchandising in the AI era
e-commerce

Merchandising in the AI era

For merchandisers, every website visit is an opportunity to promote products to potential buyers. In the era of AI, incorporating ...

Tariq Khan

Director of Content Marketing

Debunking the most common AI myths
ai

Debunking the most common AI myths

ARTIFICIAL INTELLIGENCE CAN’T BE TRUSTED, shouts the headline on your social media newsfeed. Is that really true, or is ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How AI can benefit the retail industry
ai

How AI can benefit the retail industry

Artificial intelligence is on a roll. It’s strengthening healthcare diagnostics, taking on office grunt work, helping banks combat fraud ...

Catherine Dee

Search and Discovery writer

How ecommerce AI is reshaping business
e-commerce

How ecommerce AI is reshaping business

Like other modern phenomena such as social media, artificial intelligence has landed on the ecommerce industry scene with a giant ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

AI-driven smart merchandising: what it is and why your ecommerce store needs it
ai

AI-driven smart merchandising: what it is and why your ecommerce store needs it

Do you dream of having your own personal online shopper? Someone familiar and fun who pops up every time you ...

Catherine Dee

Search and Discovery writer

NRF 2024: A cocktail of inspiration and innovation
e-commerce

NRF 2024: A cocktail of inspiration and innovation

Retail’s big show, NRF 2024, once again brought together a wide spectrum of practitioners focused on innovation and transformation ...

Reshma Iyer

Director of Product Marketing, Ecommerce

How AI-powered personalization is transforming the user and customer experience
ai

How AI-powered personalization is transforming the user and customer experience

In a world of so many overwhelming choices for consumers, how can you best engage with the shoppers who visit ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show
algolia

Unveiling the future: Algolia’s AI revolution at NRF Retail Big Show

Get ready for an exhilarating journey into the future of retail as Algolia takes center stage at the NRF Retail ...

John Stewart

VP Corporate Marketing

How to master personalization with AI
ai

How to master personalization with AI

Picture ecommerce in its early days: businesses were just beginning to discover the power of personalized marketing. They’d divide ...

Ciprian Borodescu

AI Product Manager | On a mission to help people succeed through the use of AI

5 best practices for nailing the ecommerce virtual assistant user experience
ai

5 best practices for nailing the ecommerce virtual assistant user experience

“Hello there, how can I help you today?”, asks the virtual shopping assistant in the lower right-hand corner ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

Add InstantSearch and Autocomplete to your search experience in just 5 minutes
product

Add InstantSearch and Autocomplete to your search experience in just 5 minutes

A good starting point for building a comprehensive search experience is a straightforward app template. When crafting your application’s ...

Imogen Lovera

Senior Product Manager

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

Staff SME Business & Optimization - UI/UX

linkedintwitter

Recommended Articles

Powered byAlgolia Algolia Recommend

Mobile search done right: Common pitfalls and best practices
ux

Alexandre Collin

Staff SME Business & Optimization - UI/UX

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