Design UI

In this sprint we will design our user experience, this will be your blueprint for how we want our users to interact with our search and discovery experience. Once you have completed the tasks below you are able to move onto the next sprint.

Design UI
Team members

Depending on the size of your company, some of these roles may be the same person. This sprint it is important we identify these roles and get in contact with them.

Project Manager

Planning and project oversight

Product Manager

Product vision, planning, prioritizing and management

UX Designer

Create experiences for users via design prototyping

Front End Engineers

Build application and visual and interactive elements

We need to map out exactly what we want the user to see at each stage of the search journey. To do this we can use any software, more professional offerings include Figma and InVision Studio but we can just as easily use Miro or even a piece of paper! Anything where we can draw will be fine. When building the UX, you should make sure that you keep Accessibility guidelines in mind. You should also ensure that the you are designing with mobile-first in mind, ensuring that the site works well across all screen sizes.

The speed of Algolia, provides users with the ability to present results quickly and after every key stroke. Because of this, as you type is central to the Algolia search experience.

Don't worry if you are lost, we have loads of ideas in our inspiration library, in fact for e-commerce use cases we even have a UI Design Kit which includes predefined yet customizable components, currently available in figma but with more compatibility on the way! 

Each of the sections below detail a stage in the user’s journey with search and include an example and some questions we should ask ourselves when designing these.

Finding the search bar:

The larger the search bar, the higher the engagement. For this reason it's always better to present the search bar ready to type, not hidden by an Icon. Traditionally, users look for search bars in the top right hand corner of the screen.

  • Where will the user be able to access the search bar from?
  • Will this be animated?
  • Will the text placeholder tell the user what they can search for?
Finding the search bar

Before performing a search:

From the moment users interact with the search bar, there is an expectation of feedback. This is the opportunity to provide further prompts and promotions to your users. This could be in the form of user search history, trending products or suggest search terms.

  • What will happen when the user clicks on the search bar? 
  • Will you offer recent searches
  • These are offered as a plug in with our autocomplete library.
  • Will you offer the user frequently accessed content?
Before clicking the search bar

Typing in the search bar:

There are 2 main patterns, for desktop websites, to provide users with an as-you-type experience: instant search and autocomplete. 

Instant search puts your result front and center and removes the need for a separate result page. Which is great for products with good imagery and site search. See this example from our inspiration library

Autocomplete, in contrast, provides a small overlay in which you can federate information from multiple sources. See this example from our inspiration library

On mobile, where the interaction interface is more prone to error, query suggestions proves the best way to get a user to results which are relevant to their intent quickly as it limits how much they need to type. See this example from our inspiration library.

  • What will happen when the user types in the search bar? 
  • Have you included query suggestions (Algolia offers these out of the box)? 
  • Will you show different types of results in a federated search?
Typing in the search bar

Search results page:

For desktop experiences, it is traditional to find facets on the left hand side. However over the last few years fashion retailers have begun to use drop downs above the results. The latter option reduces engagement but provides more space to display products.

For mobile experiences filters are often in a separate panel.

  • How will results be displayed to the user?
  • Will you offer the user facets so they can further refine their search?
  • How will each of the facet values be presented? 
  • Can a user clear all of these at once?
  • Are you helping the user easy navigate results (number of results, pagination, uncluttered results)?
  • Will you offer a ‘sort by’ so a user can sort their results?
  • Are you using hierarchical categorization so the user can easily refine?
  • Have you checked the widget showcase?
  • Do you want to show banner pages?
Search results page

No Results Page:

Even with the best relevance, users will search for things that don't exist leading to no results for their search. When this happens it is important to provide feedback as to why this happened and consider displaying other options for a continued journey. See this example.

  • What will you show to the user when there are no results? 
  • Are you providing good call-to-actions on that page to keep the user on their journey (check out bestsellers, another category)? 
  • Is it clear what the query leading to no results is?
No Results Page

Now we must plan where our insights events should be sent so we can implement them without friction later on.  

We can do this directly onto our mock ups as seen here, or we can make a copy of this template to note down which events you would like to include. This documentation explains which events need to be sent, and here is a list of all the possible events