SportShoes.com is a leading UK online running retailer with a broad range of over 15.000 products.

Their typical customers include experienced runners, members of running clubs, Ironman competitors, adventurers, trail and outdoor enthusiasts and individuals interested in fitness.

The challenge

With the rise of the internet and personal devices, many consumers now opt for the convenience of purchasing their athletic footwear online rather than through brick-and-mortar shops. SportShoes.com is falling behind its competitors who have stronger online platforms.

My role

• Led UX research and developed user journeys, wireframes and prototypes. 

• Collaborated with another designer on the UI features.

• Worked alongside a Project Manager, Business Analyst, Frontend Developer and two Backend Developers.

Research

We wanted to understand the user behaviour and decision-making process regarding buying athletic footwear in general and uncover current pain points that customers experience when looking for and selecting athletic footwear on the SportShoes.com site. 

We also wanted to analyse SportShoes.com's direct competitors to examine how athletic footwear is currently sold online and identify areas to improve upon.

User interviews

We ran five user tests where I recruited a set of users in our target demographic. Participants were given a scenario to get into the right mindset before starting the test. A full test script was created and users were prompted to perform a number of typical tasks throughout the test.

We started with general questions about their behaviour when looking for shoes: what is important and which factors go into deciding which shoes they want to buy.

Then we asked more specific questions regarding the SportShoes.com website, for example, what they expect to see on the product page or what they expect to see on the following page before clicking on a certain CTA button.

UX Audit

Part of my role was also to consult the client on e-commerce and usability best practices. 

I looked at SportShoes.com's current website and made specific suggestions for improvements across the shopping funnel: homepage, listing page, product page and checkout. Improvement suggestions have been illustrated with industry statistics and inspiration from ‘best-in-class’ e-commerce websites.

Competitive Analysis 

It was important to understand competitor strategies and see if there are any areas of improvement to existing methods. In particular, SportShoes.com needs to differentiate itself by being an expert and by guiding its customers to the right product for them. 

Common Features

• Many competitors offer a shoe advisor tool.

• Many competitors provide category-specific filters for all key product specs. For example shoe width, or heel-toe drop (which is the difference in the amount of material under the heel and the amount of material under the forefoot of a shoe).

• On websites with large data, the categories and subcategories are divided into more manageable chunks. 

Customer Survey

We used short, on-page surveys to ask site visitors about their impressions of the user journey. This would help to uncover simple improvements that could be executed quickly.

For example, we learned that some respondents wanted a filter for running distance since marathon runners need different shoes than 5km runners.

‘You could have another filter based on the distance that the runner is planning to do.’

'Better search parameters. I wanted to find a pair of trainers for myself, but no easy way I could see to limit it down to what I wanted. Adidas / Men's / regular trainers / also the color is a great way to search by. I didn't want to spend ages looking, so didn't bother.’

Synthesise

Synthesise research findings. Who are the users?

User Personas

Research findings were synthesized to create our four target user personas. These personas were used throughout the product design and usability testing phases to ensure we were addressing the user’s needs, wants and limitations.

We broke down the users by their attributes, pain points, motivations, goals and brand preferences and segmented the main users into four groups: 

1. First time marathon runner

2. Regular marathon runner 

3. Regular 5km runner

4. Back to running after a break

Define

What is the problem? How should we formulate a solution?

Feature Requirements 

To prepare ourselves for the next phases in the design thinking process, we outlined SportShoes.com’ business goals, our users’ goals, and technical considerations that must be accounted for in our development.

With insights from our research and the project goals clearly defined, we identified a list of key elements that would be needed to be included in the website design.

Each feature is backed by research data or project goals and then prioritized based on its importance and cost.

Features

Without getting deep into all 30+ page designs, I have chosen only the Listing Page and Product page to showcase the feature choices we made.

Based on the features defined during the strategizing workshops, I began to construct the user experience flow in sketches and wireframes. During design, I focused on fleshing out the following:

Shoes Finder feature

Bringing guided selling online is really important in order to be able to sell running shoes in the right way. In short, in a way that:

• educates the shopper

• helps them choose the right pair for them

• makes the shopping journey frictionless and fun

Advanced filtering

With over 15K products and different customer types, the user still needs to feel like they can easily find what they’re after. This is why we introduced advanced filters like: 

• the drop (heel-to-toe distance)

• stability (neutral or stable) 

• shoe width

• weather conditions (rain or cold weather) etc

Product page

We reviewed the priority of the way information was presented on the page in general.

User Flow

For the Shoes Finder feature, a user flow was created to identify the different paths that a user would take to complete the task. This would allow us to make sure that we consider these in the final design.

We included a tooltip for each step of the process— as we had in mind the user persona with less experience with this type of terminology.

Create & Iterate

Design and iterate on the solution.

Sketches

The first step of the design phase was to take pen to paper and sketch ideas for some of the main screens. These low-fidelity wireframes helped me to determine layouts and establish a visual hierarchy.

Designs

After weeks of design, these are the updates made to the initial release of the SportShoes.com shoes finder feature.

From the sketches, a final product page was designed that would effectively allow users to view SportShoe's product offerings and complete their goals.

Prototype

Using Figma, an interactive prototype was built with high-fidelity page designs.

Usability Test Plan

With the interactive prototype completed, we then executed usability tests to inform us of crucial UX issues that may need to be revised. The tests focused on the following objectives and user tasks:

Test Objectives

• Test the level of ease in navigating and using the site.

• Test whether users can complete a task flow on the site (get a pair of athletic footwear for a marathon).

• Identify the path(s) that participants take to complete their task.

• Observe any user frustrations, difficulty, or confusion during tasks.

Tasks

• Navigate to the Shoes Finder page to learn more about it.

• Start and complete the online shoes finder process for finding shoes for running a marathon.

• From the list of results, filter for the cheapest offered.

• Add product to basket.

Roadmap

I worked with the rest of the project team (product owner, developers, and business analysts) to analyse feedback from the usability tests. 

Each observation was recorded and categorized on the Mural board to create a roadmap matrix. Records were grouped by the impact on the user experience and section of the prototype.