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:

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):

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:

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):

• 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:

• 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.