boohooMAN
Update of the search feature and search recommendations.
Background
boohooMAN had an existing website search facility and whilst funcional it lacked features such as recently viewed and the ability to show upsells/cross sells. There was also a concern over accessibility with the current design.
Brief
To improve the useability of the search feature by changing the layout and adding recent searches, trending items and suggestions.
Approach
Conducted research by looking at some competitors and analysing their website search facilities.
Updated my knowledge on best practices relating to search features and looked at case studies relating to the subject.
After compiling the research and insights I shared this with the business to outline my findings and to set expectations.
Search ideation
The ideation phase contains a collection of best practices and use cases as well as an analysis of competitors, existing user flow and existing pages with a output in the form of a functionality specification.
Best Practices and Use Cases
A collection of articles from the web detailing best practices and use cases were added to the ideation Figjam with bullet pointed summaries added underneath to highlight key points.
Competitor analysis
A collection of articles from the web detailing best practices and use cases were added to the ideation Figjam with bullet pointed summaries added underneath to highlight key points.competitor analysis was conducted in which members of the team could add their own observations.
Mapping out the current user flow
Review of the current search feature
In a similar way to how the competitor anylsis was conducted, a review of the current search feature was conducted with the team and notes were combined and added to the FigJam.
Functionality Spec
The last part of the ideation process involved creating a functionality specification that describes what the search feature needs to do. Outlining the functionalities, features, and expected behavior, ensuring all stakeholders have a clear understanding of what is being proposed.
New search feature designs
The design file contains 4 different versions for mobile screens and desktop screens, A page for approved designs to be handed over to the developers and a collection of components used in the designs.
Mobile designs
Version 1
In this version, the original search bar design is retained with the main changes being in relation to the active search feature. The pre search state shows recent searches made by the customer and then top searches performed by other people who have visited the website. These are clickable/selectable links designed as small buttons. Towards the bottom of the screen there is a row of trending products in the form of product cards that are selectable. The designs show an option with Trending products and also one with featured brands in place of trending products.
The search results show some suggestions related to the inputted search term that are also clickable/selectable links and then a row of returned products that relate to the search term.
Pre Search
With keyboard
Pre Search
Without keyboard
Featured brands
With keyboard
Featured brands
Without keyboard
Search results
With keyboard
Search results
Without keyboard
Version 2
In this version, the original search bar design is modifed into a smaller size which is slighty narrower in height and the rest of the changes to the pre search and search results area being the same.
Pre Search
With keyboard
Pre Search
Without keyboard
Featured brands
With keyboard
Featured brands
Without keyboard
Search results
With keyboard
Search results
Without keyboard
Version 3
Smaller search field with rounded edges to form a squirtle type shape.
Pre Search
With keyboard
Pre Search
Without keyboard
Featured brands
With keyboard
Featured brands
Without keyboard
Search results
With keyboard
Search results
Without keyboard
Version 4
Smaller search field with rounded edges to form a squirtle type shape and the addition of a cancel link/button that clears the search.
Pre Search
With keyboard
Pre Search
Without keyboard
Featured brands
With keyboard
Featured brands
Without keyboard
Search results
With keyboard
Search results
Without keyboard
Desktop Designs
Version 1
Pre Search
Default before search is active
Pre Search
With the search field active
Pre Search
Search field active showing brands
Search results
Desktop version with search results
Version 2
Pre Search
Default before search is active
Pre Search
With the search field active
Pre Search
Search field active showing brands
Search results
Desktop version with search results
Version 3
Pre Search
Default before search is active
Pre Search
With the search field active
Pre Search
Search field active showing brands
Search results
Desktop version with search results
Version 4
Pre Search
Default before search is active
Pre Search
With the search field active
Pre Search
Search field active showing brands
Search results
Desktop version with search results
Approved designs
Designs for when the customer initialy opens the search feature
The designs below show what the customer is presented with when they click or select the search bar making the search feature active.
The search field has a more prominent design making it stand out and more accessible. The recent searches and top searches are clickable links and the row of trending products are also clickable/selectable product cards that show information about each product at a glance. There is also the ability to clear/cancel the search.
Designs for when the customer enters something into the search field
The designs below show the returned results in the form of a row of related categories and then a row of products that are scrollable like a carousel on mobile but displayed in a grid on desktop devices. They are full sized product cards that show all of the relevant product inforation at a glance and they are clickable/selectable links that take the customer to the product page.
