Helly Hansen eCommerce navigation

Improving UX and Site navigation to increase conversions.

Helly Hansen UX case study

Overview

Helly Hansen is the leading Scandinavian brand for waterproof sportswear and apparel for ski professionals. I was asked to improve the navigation experience onsite plus the UX of the product listing page and home page in order to increase conversions.

Role

UX/UI Designer (User Research, Prototyping, UI Design)

Duration

Apr - May 21

Research and problem definition

Project goal

Optimize the experience on the home page and product listing page by suggesting new features as well as redesigning the mega menu to improve site navigation.

*Please, be aware that all information in this case study is my own and does not necessarily reflect the views of Helly Hansen.

User research

Analyzing user reviews

Before doing any ideation, I started by analyzing the existing design page by page to understand the core of the product. Checking reviews online also helped me identify the pain points and strengths of the current website. 

Results:

  • Complicated return and reimbursement policy after purchase.
  • Lack of product details on the product page, which leads to a high return rate.
  • Product discoverability issues.
Competitor analysis Helly Hansen

Competitor research

I gathered information about the competition in order to define the basic features of the product listing page and the new site navigation.

Results:

  • The biggest competitors have a “shop all” link on their menus to view all products from a specific category.
  • Some competitors have advanced filtering options for users that are looking for specific sport types.
  • A few allow the users to compare product features.

Design exploration

Mega Menu

High-fidelity Wireframes:

I used Figma to design the high-fidelity Wireframes and create the site’s prototypes.

New desktop mega menu

Before_menuAfter_menu (1)

Desktop menu before vs after

Mobile menu before vs after

Product listing page (PLP)

Current features:

The PLP had already a couple of interesting features that made it easy to navigate and find the right product for the user. 

  1. Sticky filter bar: easy to filter “on the go” without having to scroll back to the top.
  2. Color thumbnails on hover: view more product details when interacting with the product and without having to click.

New features:

I suggested two improvements for the PLP page and prototyped them for both desktop and mobile to ensure a responsive design.

1. Quick view

Why this feature?

A quick view feature will allow the users to view more product information such as the product performance details or the type of sport the item is designed for since those are not easy to determine only by the picture of the product.

This will be possible without leaving the PLP so that the user can continue to navigate the page without losing the current filtering.

 

How was this feature designed?

On desktop, when hovering over the images, the users will see a “quick view” icon (eye icon) that, once clicked, will open a popup with the product overview.

Desktop quick view

On mobile, the quick view icon will be always visible at the bottom-right corner of the image (no hover state for mobile). Once clicked, it will open a sliding card with the product overview.

Mobile quick view

2. Product comparison

Why this feature?

In standard fashion shops, users tend to base their purchase decision on the style of the products. Products are also easier to differentiate from one another (color, style, etc.).

However, for the type of products Helly Hansen offers (sportswear), more than on color & style, users tend to base their shopping decision on specific features that are not easy to identify in pictures (ex. waterproofness, windproof, breathability, etc.).  Therefore, a product comparison feature can make it much easier for the user to compare two items that look similar to the human eye and help them make their purchase decision.

 

How was this feature designed?

On desktop, when hovering over the images, the users will see a “compare” button. By clicking on it, a “compare items” button will appear in the filter at the top with the number of items selected (max 3). When clicking on that button, the user will be redirected to a product comparison page.

Desktop product comparison

On mobile, the users will see a compare button at the bottom of the image and when clicking on it, the item will be selected and a “compare items” button will appear in the filter at the top with the number of products selected (max 3).

After clicking on that button the user will be redirected to a new screen with the product comparison.

Mobile product comparison

Visual design

Home page

I used Figma to redesign the home page so that it’s easier to:

  1. Identify the type of products the company offers.
  2. Present the different product categories in an organized way and easy-to-navigate.
  3. Tell the company’s story.

Before:

Home page before the transformation

After:

Helly Hansen's home page - after

Home page after the transformation

Thanks!

Any questions? Contact me at hello@miriammatas.com ✉️

Share case study!