Designing an e-commerce site for a local sports business to showcase their expertise and personal approach.
My role: UX strategy, information architecture, user and competitor research, wire framing & visual design, prototyping, testing.
01_Understanding the opportunity
02_Discovery: user & competitor research
03_Defining the user need: personas & user flows
04_Developing the product: ideation, testing & iteration
05_Delivery & next steps
01. Understanding the opportunity
The brief
To design an e-commerce site to reflect Hype Sport's brand & values. In particular their local appeal, service & expertise.
The opportunity
E-commerce sites are generally impersonal, inexpert and lack quality curation. It became clear from user interviews & our competitive review that an expert and personalised approach was something that other stores did not provide.
The solution
An e-commerce website that incorporates Hype Sport's excellent customer service, expertise, and personal approach.
02. Discovery
User interviews
We interviewed 5 people that frequently purchased sports/fitness goods from e-commerce websites, our main findings were that:
- users often went to local stores when they needed advice;
- they generally found online retailers to have poor service and expertise;
- users found it difficult to find help, or even to find contact details.
Competitive analysis
At the same time as conducting user research we started a competitive review. Our aim was to find what similar platforms were doing to support users, and what could be improved upon. Our main findings were that:
- limited customer service & advice;
- impersonal service;
- limited curation (usually just promotional).
03. Defining the user need
Personas
The findings from our user interviews formed the basis for our 2 personas, Max who owns a yoga studio, and Steve who is a fitness fan and loves winter sports. We chose to focus primarily on Max for the first stage of design work as his goals and frustrations reflected the majority of our users interviewed.
Our personas, Max & Robert
A summary of our key persona - Max
User flow
Max is trying to find some yoga equipment for his studio, but he is finding it difficult to track down quality mats that are recommended by other practitioners (especially for a good price). What Max needs a website where he can get advice, and choose from a good selection of products. The simplified user flow below shows the key steps of Max's journey:
Max's simplified user flow
04. Developing the product
Card sorting
We conducted open and closed card sorting with around 10 users to inform the information architecture and organise the sitemap.
Design Studio
We conducted a design studio to come up with all kinds of weird and wonderful solutions to provide better service and advice online. Then pulled out the feasible ones to progress with.
Design Studio
Testing & iteration
Using our initial sketches we started to paper prototype and test with users. Iterating with further paper and digital wireframes, and eventually using Invision to prototype.
Testing the mid fidelity wireframes
05. Delivery & next steps
At the end of the project we delivered a stakeholder presentation, high fidelity prototype, and a detailed design specification including annotated wireframes and a detailed style guide, an example of some of the content is shown below.
Specification & style guide
A sample of the design specification - this was done for each design or wireframe
A summary of the style guide - the full guide includes all styles and interactive elements
Final designs
Take a look through some of our key screens in the carousel below:
