Shopware Storefront Search
Shopware’s enterprise / beyond version has an extended search functionality, in which the customers can, apart from products, find manufacturers, categories and also blog posts. I have extended the designs of the search with blog posts and made some general UX improvements.
Job UX improvement
Client shopware AG
Market B2B / B2C
Context
We have developed a new blog feature and the published posts have to be shown in the storefront search for our merchant’s customers. While reviewing the screen design, I quickly realized that some UX improvements would be appropriate here as well. In consultation with the product owners, I have made a small redesign of the whole search.
Problems
The flyout has grown with each feature and no longer has a clear structure. The recognition of the search results is not quick and clear due to the uniform design a clear separation between groups would be appropriate. In addition, the flyout is limited in expandability.
Research
To ensure the optimal UX for the user i have looked at various studies on optimal search designs from the Baymard Institute and decided for the following UX improvements:
Clear sections
The typography in the search is very uniform and hardly distinguishable from each other. The user has no clear line to follow. The grey dividers between the results disturb the reading flow and don’t help.
Clear search results
The search results in the flyout are not clear. It is not clear in which quantities the price applies. It could be a multiple pack, or a single product. In the preview you can see some suggestions, but not the number of hits or if there are more than the shown ones. Also the highlighting of the entered result is inconsistent, it’s bold on the left, but not highlighted in the left column.
Combine search categories
The search results are divided into products on the left and search terms, categories and manufacturers on the right. If we continue this pattern, the blog posts and other additions would show up in the right column, that would make the flyout and mobile use even more difficult.
Limit the search results
In theory, an unlimited amount of suggested results can be displayed, which means that for some queries, 50 or more search results are displayed in the flyout, which is way too much.
Results
Before
After
Improvement
Background color contrast
I have saturated the overlay in the background a bit more to create a greater contrast. Now, the flyout stands out more from the background and the focus is on the search results.
Clear sections
I have removed the distracting dividing lines around the images and between the results to create a clearer image. The headline of each search category now stands out more from the rest and is separated from the results by a single divider. I merged the previous search categories and added the category name to each search result. The blogposts are shown separately under the suggestions. Each of the sections is limited. A Baymard study found out that users usually don’t look at more than the first 3-5 search results.
Clear search results
I have added details to some important parts. This leads to better understandability for B2B customers, which product quantity the price refers to for example. The preview is now limited and has a "Show all" link in every section header, which leads to an overview page of the respective search category. The search term is now highlighted in each suggestion.
Different devices
Since the search can be called up on any device, the search has to be adapted for them. In the mobile preview, the search results are shortened to 4 suggestions in order to cut the suggestion category in the flyout. I wished I could have made the mobile search full-screen to get more space for results, but that would take too much time to develop, therefore we’ll go with the classic flyout in the first iteration.
