eCommerce project
Industry leader in the UK
Situation

1. A website of the online shop is outdated.
2. Usability of a mobile version is bad despite the fact that most popular devices for this product are mobile phones.
3. People use the website for information purpose mostly.
Task

Do design for my streams: header and footer including a menu and search flows.
Action

I had user research study: survey results, Google Analytics data, user testing results and a heat map of the main page. I also had an approved UI kit to work with.

Before started to work with the header I had checked competitors to make a list of best solutions.

1. Header
The target audience are people from 35 to 55. In most of cases the persona is a foreman. The online shop is B2B oriented.

There is a study which shows that users don't understand how to use hamburger menu without a label "Menu". So labels must be prominent.

Other persona is a trader — person, who resale goods to his clients without paying VAT.
As a trader
I want to see including or excluding VAT price
So I can see which price I will show to my clients and get this difference between VAT and non-VAT as my income.
- There is a toggle should be provided — inc/ex VAT
- What type of price should be shown it depends on which option is selected — inc or ex VAT price

As a trader
I want to see the total price of added to cart goods in a header
So I can see the total cost without additional transition to the cart and back
- The total price of added to cart products must be in the header
- In case of empty cart no label should be provided

2. Menu

After discovering of cases on most popular online shops I decided to create a main menu more iOS-like. This solution will help to keep focus on one section at the same time. Accordion with folded and unfolded sections is scattering user attention.

Every item in the category list already has its own picture, so I left a picture in front of the category name.

A-Z and Z-A sorting is also popular on the website, so I've put this functionality as a sorting button. It works in a circle: Relevant — A-Z — Z-A — Relevant.
3. Search flow

This task was the most complex, because the search flow is a most popular part of the online shop. Every decision should be made carefully.

Flow for: 1) the very first visit, 2) if a person has some search history, 3) when some part of a text is already typed, 4) if we have enough data in a search request to show detailed results in an overlay window e.t.c.

It's extremely important to show each condition, positive and negative scenario.
Result

Mockups with 1. applied best practices, 2. each scenario depends on customer journeys were delivered to developers. During my work I was relying on data from former usability testings, guidelines, system restrictions and heatmaps and so on. Every possible scenario has been covered. Developers will produce a live prototype with dummy data to make possible conducting usability testing on site.