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 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.
A number of key deliverables were required for the project:
The new site design provided users with:
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.
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.
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.
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:
I conducted a variety of card sorts which helped me comprehend how users grouped and organised different products.
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.
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.
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.
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.
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.
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.
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.
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.
Changes made to the product page, for example, include:
The design iterations resulted in the final mid-fidelity prototype. The two key flows are shown in the two GIFs below.
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: