Designing and Developing a Successful Search UX for your Website

How to develop a great search ux for your website

Aug 23rd Design

Image for Designing and Developing a Successful Search UX for your Website

Most of us consider the search bar to be one of the most primary features to be included when navigating through a website or platform. For designers and developers, however, it can be the most complex and intricate part of any digital project. Search functionality can make or break a user’s experience, especially within commercial applications or content-heavy sites. It is an essential part of navigation, not only allowing users to search for what they want instantly, but it also gives businesses a deeper insight into what their customers are looking for.

The search experience is considered the process of when a user starts to look for an item, and it ends when they have found what they are looking for. Providing a good search experience for the user is crucial, and there are many elements which must be considered throughout the search process to ensure the experience is seamless. Developing an exceptional search experience for users can help enhance customer relationships, improve user retention and increase conversion rates.

This week on Medium, we discuss what to consider when designing and developing a search experience, identifying different areas within the search process and the factors to consider at each part of the search. 

1. Identifying the Needs and Wants of the Clients and their Users

To develop a successful search experience for the user, designers must first determine the needs and wants of the user and the way they search. Data-driven research is important to implement into your UX strategy to help identify how users are searching.

You can observe where users are searching, by utilising heat maps to determine where users may be looking for the search bar or how they approach the web page when searching for results, you can also monitor the most common search queries by observing Google Analytics. Are user’s searching for a particular product or are they looking for a specific webpage or piece of content? By identifying these search behaviours and patterns, designers and strategists can develop the most suitable search for the user.

Here at Univers Labs, we always undertake in-depth user analysis to understand how individuals use the search on a website or platform. By utilising heat maps, conducting in-depth interviews and recording how users navigate through the site, we can identify any issues or pain points.

A great example of this is the work we did for G.F. Smith, leading manufactures in speciality papers. We utilised user stories and interviewed dozens of paper consultants, designers and customers to understand how they searched for products on G.F Smith’s website and asked them about any issues they had while using the site. We then used this information to provide a search experience to support these behaviours.

2. The Search Process

There are multiple elements to consider when designing and developing a search experience for a user. For a website or digital platform, the search process can be broken down into three main parts.

  • Initiating the Search
  • Search Input
  • List of Results

3. Initiating the Search

A search bar may look relatively similar across all websites and platforms from a user’s point of view, but from a design and digital perspective, there are many elements to consider. A designer must determine how prominent the search bar should be on the site, and several elements will influence the position, size and number of pages the search is present on.

Deciding how prominent the search bar should be when navigating through a site or platform, will depend on the type of website it is, the products or services on offer and the end goal. For example, users who visit large e-commerce sites such as eBay are likely to be looking for a specific item; therefore, the search bar is heavily relied upon and is positioned prominently within the site. Sites that are more content heavy or for non-eCommerce sites such as news websites, users are less likely to rely on search and the position of the search bar can be less obvious and may only be present on the homepage or as a single icon.

4. Search Input

Once a designer has determined how prominent the search should be on the website or platform, it’s essential to identify how the user can get the most out of the search. Many features can be implemented within the search to make it more personal, specific and relevant to the user. Omni-search, auto-complete and auto-suggestions are all great ways to make the search input more beneficial to the user.

Auto-complete

Auto-complete helps the user define an answer by aiming to predict the user’s query based on the characters the user has entered into the search. The UK travel site, Trainline uses auto-complete to recall railway stations based on the letter’s the user has entered into the search, saving the user time and reducing inaccuracies if the user cannot remember or spell the name of the station correctly.

Auto-suggest

Auto-suggest offers virtually endless options and ideas within the context of the website, which is related to the characters the user has typed into the search. Auto-suggest can provide alternatives to the user, which they may not have even considered.

Omni-search and auto-suggestions for Promocell

We recently worked on a digital project for biomedicine pioneers, Promocell. We undertook an in-depth analysis of their current site to understand how their customers used the website. Promocell’s website offered over 7000 different biomedicine products, and it was clear that user’s found it difficult to browse the extensive range of products easily.

Omni-search and auto-suggestions for Promocell’s new website

Our designers determined that the current search was not performing adequately; therefore, we replaced it with a new search function. We implemented Omni-search and live suggestions into the search, making the process dramatically faster as it allowed the user to search for any item on the site through a product code, description or information source and return results whilst the user is still typing. This is an on-going project and we are still advancing the search to further enhance the user experience.

Auto-suggestions for easyHotel’s new website

Auto-suggestions can be implemented even further within the search and help guide the user to what their searching for by using auto-suggestions. We’ve worked closely with the budget hotel chain easyHotel, developing a new website and search function for their site. We implemented auto-suggestions within the new search, which returns relevant results based on the keywords the user types into the search bar, extending the search to hotels, cities and countries.

5. List of results

The results page should clearly show the results of the user’s query in a clear layout, giving the user the option to refine their query further if necessary. Research suggests that if users do not find relevant results during the first search attempt, they are unlikely to return to a website; therefore, it’s important to firstly make sure that results are accurately returned and secondly that they are efficiently displayed.

A New Results Display Page for Promocell

Our in-depth UX analysis of Promocell’s website indicated that the search results page could be much improved. The current results page displayed many small images within rectangles with minimal text to accompany them, wasting a lot of precious real estate on the page. We also identified that several different products had been marked with the same stock photo. We recommended an approach where textual product information appears with a price on one line and a feature that allows users to click through for more details, including photos if necessary. We also suggested that if the images were not necessary, such as generic or stock photos, to remove them from the site.

6. Conclusion

There is a lot to consider when determining the most appropriate search for your website or platform. It’s crucial to gather deep insights and develop a thorough understanding of both the user’s needs and the client’s goals, to ensure that the search supports the user while guiding them to reach the client’s or company's end goals.

The search will also be dependent on the purpose, size and scope of the site or platform, so it will be essential to consider these aspects through every part of the search process. Developing a successful search experience takes time, and it’s important to create a strategy for the entire search process, forming it around the needs of the user and the goals of the client.