3 min read

Design your search and discovery UI

Search inevitably is key when people look for specific products in an online store. It's the door to the entire product catalogue, so having an outstanding, well-structured, and optimized search UI is a must.

However, it’s not enough. With the advanced features provided by some well-known search engines, shoppers need a new dimension to connect effortlessly to the most relevant products, enjoy a smooth user experience, and take advantage of outstanding search and discovery capabilities.

Design search and discovery

Interface X and Interface X for Apps, the solution

Interface X and Interface X for Apps are a collection of libraries that lets you create a smooth, personalized search and discovery experience, while significantly minimizing development time. Interface X, and its version for native apps, will renew your search experience interface layer, rendering the magic of search and delighting your shoppers with all experiences in one: user, search, navigation, and product discovery.

There are many things to think about when designing a UI for search and discovery to provide a consistent user experience and look-and-feel: every little design element, the layout structure, animation, component, configuration, and behavior count. Interface X and Interface X for Apps cover everything and even go beyond, thanks to their standalone, configurable building blocks that allow you to quickly construct the search UI for your store: Interface X Components and Interface X Components for Apps.

Mix and match your experience

Each Interface X Component represents a graphical part of the UI, with its own unique view and behavior. They’ve been smartly designed to work together yet independently, so a single component adds real value to your UI by itself. The more components you add and combine, the more functionality you get.

You can craft your own UI bundle with the right components for your store. There are numerous X Components to choose from, and the catalogue evolves quickly with new experiences.

To help you discover the components and leverage the UI design process, most of the X Components are distributed into modules which are intended for different purposes: functional experience, interface design and behavior, web and design standardization… Just pick and choose the modules and components that best suit your needs.

What does X mean?
  • Lightweight libraries
  • Developer friendly. Quick & easy to install and configure
  • Standalone. Work individually or together
  • Out-of-the-box. Ready to go!
  • In your pocket. Multiple components at your disposal
  • Mix & match. Customize to satisfy any design or behavior requirement
  • Mobile-ready. Designed both for web and native apps
  • Adapt to different search services
  • Easy-to-use. Intuitive search and discovery

Discover Interface X Components for web

Check out these X Components for Vue.js applications. They’ll certainly come in handy if you want to make the difference!


Check out the Interface X for web open-source project (opens new window) on GitHub!

Discover Interface X Components for Apps

Check out the X Components available for Interface X for Apps, that can help you create your native app search solution.


Some X Components are supported by Empathy Platform search and discovery features. If you’re using a different search engine, make sure it supports all the functionalities you need.

Try X Components to…

  • Surprise your shoppers by rendering shopping-aimed search and discovery features that intuitively guide and inspire them with trends, suggestions, and recommendations, based on your shoppers’ behavior.
  • Add a predictive layer to your search UI that gathers all search functionalities in one, from autocomplete and autosuggest to ideas of what to look for next.
  • Delight your shoppers with an elegant and multi-configurable SERP to help them discover what they’re exactly looking for.
  • Enhance the shopping experience by adding additional features to the SERP, such as add-to-cart buttons or product rating information.


Explore the Empathy Platform interactive map for a sneak peak of the X Components available!