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 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
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.
- Sticky filter bar: easy to filter “on the go” without having to scroll back to the top.
- 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:
- Identify the type of products the company offers.
- Present the different product categories in an organized way and easy-to-navigate.
- Tell the company’s story.
Before:
Home page before the transformation
After:
Home page after the transformation
