HYPE | A UX Design Case Study

Designing a new e-commerce concept site for a customer focused sporting goods store

A montage of a variety of medium-fidelity wireframes from the project.

Project Overview

Summary

Hype Sporting Goods is an e-commerce site that provides a highly-curated, service-focused, 'local shop' experience for customers purchasing sporting goods online. It removes the pain of buying sporting goods online by providing a product purchasing and checkout flow that is both efficient and simple.

My role

My role was to lead the design for Hype's new e-commerce site in a two week sprint, collaborating with a small team. I followed the British Design Council's Double Diamond process with its four phases: Discover, Define, Develop, Deliver.

Key deliverables

A number of key deliverables were required for the project:

Results

The new site design provided users with:

The Hype logo.
The logo I designed for the project to reflect HYPE's brand personality.

Design Process

Competitive analysis

I commenced the design process by conducting a competitive analysis which identified opportunities for Hype to set themselves apart from their competitors, such as through bespoke product ordering and loyalty schemes.

A table showing the focused competitive analysis
The focused competitive analysis

Hype's heritage, customer service values and hand-curated selection of products were also identified as being key unique selling points in relation to their competitors.

Keeping the design process user centred

In order to keep my design process centred on the user, I based all future design work on the characteristics and requirements of a persona - Rachel - who best represented Hype's primary user.

Reframing Rachel's user journey into an outcome statement and accompanying storyboard enabled me to really focus the rest of the design process and ensure that the site met her requirements.

The storyboard showing Rachel's problem and her outcome
The storyboard for Rachel's outcome statement

User research

I conducted semi-structured user interviews. One of the main findings from these interviews was regarding the user's desire for simplicity, in particular a smooth and hassle-free checkout process when shopping online:

"I need things to be simple."

"It annoys me when you can only proceed with your payment once you've signed up.""

Other insights from the user research included:

Information architecture

I conducted a variety of card sorts which helped me comprehend how users grouped and organised different products.

A user conducts an open card sort using index cards with different items written on each.
A user conducts an open card sort.

A surprising finding from this was that users didn't organise products by sport but rather did so by 'type' - e.g. men's, women's, equipment, nutrition and so on.

The partial results of a user's closed card sort.
The (partial) results of a user's closed card sort.

Using the findings from the card sorts, I created a site map of the website, ensuring the site structure was designed from the user's perspective.

A diagram of the sitemap, based on the different card sorts.
The final sitemap based on the card sorts.

Visualising Rachel's flow

Using the site map and Rachel's outcome statement, I was able to visualise what Rachel's key flow would be through the creation of a 'happy path' flow.

A diagram of Rachel's 'happy path' user flow.
Rachel's happy path.

The happy path identified the key site pages to focus on in the design process, sketching a wireflow to show Rachel's progress through these pages.

Five wireflows of Rachel's happy path.
Wireflow of Rachel's happy path.

The wireflow showed that the checkout process takes up the majority of Rachel's activity on the site and therefore making this process simple was a priority.

Zeroing in on ideas

However, I focused the initial ideation work on the product page owing to it acting as the 'gatekeeper' of Rachel's progress to the checkout flow, and being the most complex page in the flow.

Rapid sketching and development of initial designs was achieved through running a 'design studio' with other members of the team. This was a hugely useful process as it allowed the design to be rapidly developed and refined whilst keeping Rachel's problem at the centre.

Photos of the output from the 'design studio'.
Stages of the 'design studio' with the final output on the right.

Paper-prototyping early designs

In order to quickly identify whether the design was working or not, I created a paper prototype which I used to conduct usability tests. This showed that users struggled to find the purchasing section on the product page and were confused by the separate buttons for 'buy now' and 'add to cart’, feeling apprehensive about what 'buy now' would mean.

Refining the design through usability testing

Following a couple of rounds of paper testing, I took the design into a medium fidelity digital version. This increased the value of the usability tests and resulted in a number of changes to the design based on user feedback.

Photos showing notes from usability testing and the affinity mapping process.
Usability testing notes were organised into trends

Changes made to the product page, for example, include:

Three screens showing early sketches to the final mid-fidelity prototype.
Design iterations of the product page.

Solution

The design iterations resulted in the final mid-fidelity prototype. The two key flows are shown in the two GIFs below.

Product flow

A gif showing the product flow of the mid-fidelity prototype.
The product flow.

Checkout flow

A gif showing the checkout flow of the mid-fidelity prototype.
The checkout flow.

Outcome

Hype's new site design was received very positively, with both the client and the users. Users especially liked the clear layout and the quick and easy checkout process. The design presentation was also received very positively by the client.

Moving forward, my recommendations for the site include: