top of page
Hay - Mockup.png

HAY
Website Design

I completed this project in the role of a UI/UX designer as part of my CPD certification accredited by the School of UX.

Background
HAY is a Danish design company that creates and sells furniture, lighting and home accessories. They aim to offer well-designed products that are accessible in terms of price and design.


Team Structure
I took the lead on this project, independently developing it. However, I did conduct user testing with my Bootcamp colleagues. I also maintained communication with my tutor, reporting on my progress and seeking guidance.

Hay-screenshot.png

My Responsibilities
My task was to carry out a design review, conduct usability testing and create high-fidelity mock-ups of a website or app that I felt needed improvement – in this instance I chose www.hay.dk.

Design Review

I reviewed the current website to evaluate what works and what doesn’t - assumptions from my point of view.

What Works
 

  • Clear brand vision to differentiate the company from its competitors

 

  • Great use of space with beautiful imagery

 

  • Clear categorisation of products in header menu

​

  • Good indication that users need to find a supplier (they can’t buy products directly on the website)

What Could Be Improved
 

  • The name and price of products can only be viewed on hover

 

  • The layout looks like a magazine rather than a functional online catalogue

 

  • The subscribe CTA doesn’t have an exit button

​

  • It’s difficult to differentiate between the product styles and colour variations

User Research

I wanted to validate all the design assumptions from my design review.

Scenario Walkthrough
I conducted a usability test via Zoom with 5 target audience members. During the test, participants recorded their screens while completing a task on the website, providing lots of insight to test my hypotheses.

60% of users would prefer to see the product ranges in the navigation menu without the need to expand it.

4 out of 5 users felt like they spent too much time scrolling and hovering on each individual tile to see product names.

User Journey Mapping

To help understand the users journey within the site, I created a map to visualise the key steps of their browsing experience.

Wireframing

Hay - wireframing_edited.png

Accessibility

Before developing the design system, I looked into accessibility to ensure a site that works for everyone.

WCAG Validation
My main goal was for the design to comply with the industry’s Web Content Accessibility Guidelines:

Icon-Tick.png
Icon-Tick.png
Icon-Tick.png
Icon-Tick.png
Icon-Cross.png
Icon-Cross.png

Text size is legible & can be easily changed

​

Content is not cropped

​

System is accessible on different screen sizes

​

System is responsive & doesn’t take long to load

​

Optimal colour contrast ratio

​

Hierarchical heading structure on all pages

CTA Contrast
The CTA had very low contrast in the WCAG test, making it very difficult to read for all (especially those with low visibility or colour blindness).


Hierarchical Structure
The heading elements aren’t in the correct order, making it difficult to navigate and understand when using assistive technologies.

Style Guide

Colours

#000000

#1E3FC3

#979797

#F2F2F2

#FFFFFF

Typography

Fonts.png

Grid System

HAY Layout Grid.png

Body
Column: 3
Gutter: 50

Components

Icons

icons_edited.png

Expand

icons_edited.png

Collapse

icons_edited.png

Close

icons_edited.png

Document

icons_edited.png

Download

icons_edited.png

Active nav

icons_edited.png

Inactive nav

Buttons

CTA.png

Light Background

CTA.png

Dark Background

Subscribe Pop-Up.png

Subscribe CTA

Navigation Menu

Default

Product focus mode

Dowloads Menu

Default

Expanded

High-Fidelity Prototyping

I used my wireframes and design system to created a high-fidelity prototype on Figma. This helped to visualise the website's layout and informational structure.

Prototype2.png

A/B Test 1

Product Listing
In an effort to improve the organisation of product listings, I created an alternative layout. The changes include a more user-friendly hierarchical structure, along with clearer product categorisation. I set up an A/B test using Lyssna, comparing both versions of the these designs to gauge their effectiveness.

Variant B (re-designed version) has a great probability to be the best based on 100% of the testers preferring this option.

Hypothesis.png

Original
Selected by 0% of participants

Re-designed
Selected by 100% of participants

A/B Test 2

Product Variants
To streamline the user experience, I merged the chair and armchair variants into a single, unified page. This eliminates confusion and the need for users to navigate through multiple pages. To determine the most effective version, I implemented an A/B test using Lyssna that allowed me to assess user engagement and identify the most helpful format.

Variant B (re-designed version) was favoured and found clearer to navigate by 87% of the testers.

Test 2 Hypothesis.png
A_B Test-2.png

Original
Selected by 13% of participants

Re-designed
Selected by 87% of participants

Project Insights

Having a personal interest in HAY's design aesthetic definitely added a layer of enjoyment to this project. While I'm passionate about interior design, I was mindful of potential bias. To ensure objectivity, I used data to validate my design decisions, confirming that they aligned with the project’s hypothesis.


Next Steps
During usability testing, there were issues identified regarding the menu navigation hierarchy. While I did implement some changes, conducting an A/B test would have provided data-driven confirmation of these improvements. This is a valuable oversight to consider in future projects.

bottom of page