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.
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
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:
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
Grid System
Body
Column: 3
Gutter: 50
Components
Icons
Expand
Collapse
Close
Document
Download
Active nav
Inactive nav
Buttons
Light Background
Dark Background
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.
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.
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.
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.
