Created a dedicated search results page with smart filters for easier navigation. Optimised search logic to deliver more accurate and relevant results. Designed a ‘No Results’ page with helpful suggestions to keep users engaged.
01
The challenge
Previously, the search function was minimal. Although the search bar was visible, it was tightly squeezed into the navigation. Users could type search queries, but only quick results were shown, which were often inconsistent and frequently led to broken pages. Pressing the search button or the enter key elicited no response.
02
The solution
We identified two key areas for improvement. The first was the position of the search bar and the quick results panel, which Josh addressed. The second involved introducing a new search results page where users could view and filter items, considering how queries and logic would impact the page’s presentation, which I undertook.
Analyse data and analytics
Study research and best practices
List pages needed with search logic applied
Create desktop and mobile designs
Discuss designs in a refinement session
Update designs based on feedback
03
Research
Top searched terms and accessory-related queries, 01/02/23–31/01/24
Based on experience and best practices, we knew we needed an intelligent quick results panel and pages. However, it was important to consider user behaviour with the search function. Observing the top searches helped identify that users’ search queries were more generic rather than specific, and their interaction with the search bar typically lasted only a few seconds, likely due to a frustrating experience.
I extracted valuable insights from the Baymard Institute’s articles and research projects regarding how to handle the website search experience.
Specifically, for the search results page, I summarised key takeaways from Baymard into four groups. This made it easier to reference when designing and explaining decisions to stakeholders.
Key takeaways
SEARCH QUERY TYPES
– Redirect exact product titles to the product page, with an option to view all results
– Redirect product-type searches to the matching category page
– Show only the most relevant results for specific attribute or feature searches
– Tag products by keyword so searches like “budget phone” surface the cheapest options
SEARCH FORM & LOGIC
– Make queries easy to edit and delete; use the query as a header
– Support special characters and long queries, allow copy and paste
– Keep the scope selector close to the field
– Reset filters when a user resubmits the same query
RESULTS LOGIC & GUIDANCE
– Show alternative or related queries
– Offer alternate paths when there are no results
– Autocorrect obvious misspellings, offer the original term too
– Highlight near-perfect or perfect matches
RESULTS LAYOUT & FILTERING
– Auto-switch between grid and list depending on results
– Update product images to match the variation searched
– Prominently display the total number of results
– Use a “load more” approach
SEARCH QUERY
Generic phone name
e.g. iphone
Results page with phones and accessories
Popular, budget, premium
e.g. cheap phones
Results page with relevant sort applied
Colour, price, network, brand
e.g. black iphone
Results page with relevant filter applied
Specific phone name
e.g. iphone 12
Product page
Help query
e.g. delivery times
Help centre
Obvious misspelt query
e.g. iphon12
All of the above, with a note it was auto-corrected
Query not matched
e.g. oppo
No results, plus quick links
Essentially, all search results would lead to the search results page, product page, help centre, or a no results page. The objective was to ensure that different types of queries directed users appropriately, ensuring an efficient experience through the use of pre-applied filters, quick links, default variants, and helpful information.
04
The design
Before
The previous header showed the old placement of the search bar and how typing different queries yielded underwhelming results. There was also no search button.
After
Josh upgraded the header and search panel, displaying results, promotions, and USPs. The aim was to make the quick search smart and versatile, using the search results pages I created as a fallback if someone pressed the button or enter out of habit or because they wanted to view products or information in a larger format.
Different search terms would pre-apply various filters where possible — ‘iPhone’ applies Apple in brands, ‘Budget phones’ sorts low to high, ‘Grey iPhone’ applies Apple, grey, and updates products to the grey variant.
Results pages showing pre-applied filters for ‘budget phones’ and ‘grey iphone’
Mobile results pages, including autocorrect and the no-results state
