Home

Home

Product Grid Redesign

Product Grid Redesign

Home

Product Grid Redesign

Redesigning the Product Grid
Redesigning the Product Grid
OVERVIEW
OVERVIEW
OVERVIEW

To complement changing business strategy, a redesign of existing pages was done to reducing cross-platform and cross-device friction, as well as introduce ergonomic education through progressive disclosure to capture a new target audience.

To complement changing business strategy, a redesign of existing pages was done to reducing cross-platform and cross-device friction, as well as introduce ergonomic education through progressive disclosure to capture a new target audience.

ROLE

ROLE

Senior UI/UX Designer

Senior UI/UX Designer

DISCIPLINES

DISCIPLINES

UI/UX, user research

UI/UX, user research

UI/UX, user research

Key Results

Key Results

+35%

+35%

average increase
in key events

average increase
in key events

average increase
in key events

+13%

+13%

average increase
in active users

average increase
in active users

average increase
in active users

-32%

-32%

average decrease
in exit rates on mobile

average decrease
in exit rates on mobile

average decrease
in exit rates

The Challenge

The Challenge

Secretlab is an established brand in the games and comics scene as a provider gaming chairs, desks and accessories.

Purchasing Secretlab's chairs and desks can be quite different from purchasing regular furniture, in that most of the product differences lies in its technical specifications and functions rather than its form - similar to purchasing a phone or PC - and its main customer base is comfortable with this highly technical shopping journey.

However hybrid work in the post-COVID era saw a rising interest in home setups from people outside the games and comics scene, especially for ergonomic chairs and desks.

To capitalise on this, Secretlab was looking to adjust their marketing strategy with the goal of attracting the new customer base, while retaining existing customers.

My Role

My Role

Alongside my UX Lead, I was responsible for spearheading initiatives to improve the overall customer experience on the website.

RESEARCH

DESIGN

USER TEST & REITERATE

POST-LAUNCH

Research
Phase

Research Phase

Research
Phase

Research
Phase

Target Users

  • New users in the new segment

  • Users who have not made a purchase

  • New users in the new segment

  • Users who have not made a purchase

Methods

  • In-person interview 

  • Online tools for site-specific real-time data (HotJar, Google Analytics)

  • E-commerce research guidelines (Baymard Institute)

  • In-person interview 

  • Online tools for site-specific real-time data (HotJar, Google Analytics)

  • E-commerce research guidelines (Baymard Institute)

Goals

  • Examine how users are using the current journey

  • Identify the strengths & pain points of the current journey

  • Discover and assess potential solutions by competitor or adjacent brands

  • Examine how users are using the current journey

  • Identify the strengths & pain points of the current journey

  • Discover and assess potential solutions by competitor or adjacent brands

To identify the additional target customer segment and discover the pain points in their journey, a customer profile and journey mapping exercise was done with stakeholders.

We then conducted in-person qualitative interviews using the live website where we could observe the user's actions and gather real-time feedback behind certain decisions.

Gathered feedback was cross-analysed with online data tools to verify if these problems were occurring on a larger scale.

Summarised Pain Points

  • Lack of ergonomic product education

  • Cross-device experience is high-friction as mobile website has a lot less functions than the desktop website

Jobs to be done

  1. How might we improve the mobile user experience to aid cross-platform transition?

  1. How might we educate users on key product differences at the appropriate step in their shopping journey?

RESEARCH

DESIGN

USER TEST & REITERATE

POST-LAUNCH

Design
Phase

Design Phase

Design
Phase

Design
Phase

Using the information gathered in the user research, I designed solutions targeting the major pain points. While there were numerous changes that were made, listed below are select optimisations.

Image filters & compare models chart

In our research phase, we found that a large proportion of users expressed confusion about the models on this page, with multiple users failing to recognise that there were several different chair or desk models being offered.

Furthermore, users who recognised that there were different models were unable to find the differences between the models effectively, forcing them out from the main purchasing journey to find information. Some expressed that they might also drop out of the site entirely to find comparison reviews on other websites.

To tackle this problem, I designed image filters and accompanying introductory banners at the top of the page. The existing compare models chart was also optimised and made easily accessible on this page.

Quickview (Mobile)

In many HotJar recordings, we found that a large proportion of users on mobile were entering the product page multiple times just to view more product images before returning to the grid page — an action that is exceedingly cumbersome on mobile.

Corroborating with the above, our in-person interviews revealed that participants would rather drop off the mobile site and return at a later time on the desktop site for a more pleasant browsing experience. This was a significant problem as the site sees a majority of its new users through mobile.

I designed a quickview drawer specifically for mobile to facilitate the mobile browsing experience.

Size-specific prices on hover (Desktop)

The last major optimisation involves a rather unique problem to Secretlab's products. Secretlab's chairs, desks and accessories not only come in many different variants of the same model — they also come in several different sizes at different price points, and these sizes can go on sale independently from each other. In our user interviews, users also expressed frustration at the price on the product page being different from what they see on this page.

An improved design was needed to accurately convey size-specific sale prices while not overwhelming the user with information at first glance. I employed a information-when-you-need-it approach to this optimisation, nestling these added info inside a hover-over interaction so that users are easily able to get the information they need only when they actively seek for it.

RESEARCH

DESIGN

USER TEST & REITERATE

POST-LAUNCH

User Test &
Reiterate
Phase

User Test & Reiterate Phase

User Test &
Reiterate
Phase

User Test &
Reiterate
Phase

Methodology

We conducted a face-to-face usability testing session with 5 participants. Due to confidentiality these participants were company staff, however we chose participants who were largely unfamiliar with our website. Participants were invited to perform a series of tasks on our prototype with a mobile phone, each session lasting 30-40 minutes. Any verbal and non-verbal indications of usability issues and suggestions for improvement were recorded.

Key Findings & Design Recommendations

Key findings across participants were sorted into buckets and solutioning was prioritised according to UX severity. UX severity is defined according to three factors - Impact, Frequency and Persistence. Below are the details of findings that were of "Severe" or "Significant" severity. The prototype was further refined based on the recommendations.

No.

No.

No.

Findings

Findings

Severity

Severity

Recommendation

Recommendation

1

Compare chairs Pop-up
3 participants did not notice the “Compare chairs” button as it blends with the banner design

Severe

Take the “Compare chairs” button out of the image/banner.
Style the link as a button.

2

Filter Labels
All the users express confusion and frustration with the complex product naming conventions and filter options

Severe

Provide explanation for complex names.
Rewrite names to be laymen friendly.

3

Information on All Products
4 users were unsure about the differences between the various chair models, and what features or qualities justify the price differences

Significant

Include a liner to explain the model difference or display the key feature differences.

4

“Show Differences Only”
3 out of 5 users did not notice any difference upon clicking “Show differences” only

Significant

Increase relevance and visibility of the button by putting it just before the list of differences.

5

Quick-view drawer
3 users misunderstood the interaction of “Shop Now”. They assumed it would bring them through the check out flow

Significant

Change label to “View Product”.

RESEARCH

DESIGN

USER TEST & REITERATE

POST-LAUNCH

Post-Launch Phase

Post-Launch Phase

Post-Launch Phase

Post-Launch
Phase

Monitoring & Next Steps

Post-launch, we monitored the pages at 2 weeks and 1 month intervals to ensure that there were no unintended bugs and to catch any oversights concerning the user experience.

Monitoring tools were also used to track how users at scale were interacting with the new implementations, and to inform any further optimisations.