Case study

Kokosek: UX audit of a children's clothing shop before redesign

The premium shop Kokosek was due a redesign, and first it had to be clear what in the current version helps shoppers and what gets in their way. We ran a UX audit combining Google Analytics and Hotjar data, benchmarking and a heuristic review. The report of about 40 pages became the basis for the redesign.

For Kokosek we ran a UX audit that combined quantitative and qualitative data analysis, benchmarking and a heuristic review of the key purchase paths. The report of around 40 pages, with a list of issues and recommendations, became the foundation for a complete redesign of the shop.

Scope of work

Industry: E-commerce and retail
Product type: E-commerce UX audit
Market: E-commerce / premium children's clothing

Technologies

e-commerce
Product discovery

Key facts

Traffic and behaviour data from Google Analytics and Hotjar
Heatmaps and scroll analysis
Benchmarking based on Baymard Institute and NN Group research
Heuristic analysis of filtering, product page and basket
A report of around 40 pages
The audit as the basis for a complete shop redesign

Before the new shop design was drawn, we used data and best practice to find out what gets in customers' way.

Process diagram of the Kokosek shop UX audit

Goals

01
A picture of customer behaviour
Use Google Analytics and Hotjar data to see how customers move through the shop and where they leave it.
02
A point of reference
Assess the shop against competitors and the e-commerce best practice documented by Baymard Institute and NN Group.
03
A foundation for the redesign
Prepare a list of issues and recommendations that the shop redesign can be built on.

Process

Discover Define Develop Deliver

Audit scope
Audit scope
Areas of the user experience to improve, as the starting point for the shop redesign.
Data collection
Data collection
User traffic and behaviour from Google Analytics and Hotjar.
Heatmaps
Heatmaps
Heatmaps and scroll analysis: which sections attract attention and where users leave the page.
Benchmarking
Benchmarking
A comparison with industry best practice based on Baymard Institute and NN Group research.
Heuristic analysis
Heuristic analysis
Product filtering, the product page and the basket checked for barriers.
Report
Report
Around 40 pages: findings, heatmaps, key issues and recommendations.

Charts of devices and browsers used by shop visitors

Shop traffic data: number of users and session time

What we delivered

A report that kicked off the next stage of the project: a complete redesign of the shop.

Detailed report - around 40 pages covering the findings from every stage of the analysis.
Heatmaps and scroll analysis - the sections that attract the most attention and the places where users most often leave the site.
Benchmarking - an assessment of the shop against competitors and best practice from Baymard Institute and NN Group.
Key issues - elements of filtering, the product page and the basket that can make buying harder.
Recommendations - proposed UX improvements that served as the basis for the redesign.

Scroll maps of the children's clothing shop pages

Challenge: establishing the facts before a redesign

Kokosek is one of the leading premium children's clothing shops. A redesign was due, and before it started we needed to establish what in the current version helps people buy and what gets in the way.

The recommendations had to reflect how customers actually use the site and follow industry best practice. That is why the audit combined analytics data, a competitor comparison and a heuristic evaluation. The aim was changes that would increase engagement and conversion.

The audit was meant to give the redesign a foundation: knowing what to fix before the first screen is designed.

Product page benchmark with Baymard Institute guidelines

Benchmark of a product page image gallery

Analysis: data, benchmarking and heuristic review

We ran the audit on three levels: user behaviour data, a comparison with best practice and a heuristic review of the key paths.

Hotjar heatmaps and scroll analysis showed which sections attract the most attention and where users most often leave the site. Benchmarking based on Baymard Institute and NN Group research showed how Kokosek compares with competitors and which elements are worth optimising.

The purchase path under the microscope

In the heuristic analysis we went through product filtering, the product page and the basket. We looked for elements that act as barriers for users and hold back conversion.

Navigation analysis on the Kokosek shop page

Kokosek mobile screens with issues marked

Results: the report the redesign started from

The Kokosek team received a report of around 40 pages: analysis findings, heatmaps, key issues and recommended UX improvements.

The report became the foundation for the next stage of the project, a complete redesign of the shop. Design work started from a list of specific issues backed by data and industry best practice.