Anca Dobrea
UX Designer

A more efficient shopping journey for seasoned runners 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. 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.

Sport Shoes


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 site. 

We also wanted to analyse'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 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'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.

Sport Shoes

Examples of sugestions from the UX audit deck

Competitive Analysis 

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

Sport Shoes

We researched 5 of the major competitors  to gain insight into their UX and determine which features made them stand out.

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.

Sport Shoes

Example of on page customer survey question

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 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.

Sport Shoes

Our four target user personas

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


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’ 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.

Sport Shoes

This mural bord allowed us to fully determine our solution’s features list and prioritize them.


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.

Sport Shoes

The original website: Listing Page (left) and Product Page (right)

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.

Sport Shoes

User flow snapshop exploring the Shoes Finder feature

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.


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.

Sport Shoes

Example of early stage li-fi wireframe design for the Shoes Finder feature


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

Sport Shoes

Selection of pages (steps) of the Shoes Finder feature.

I started working on a few key screens in low-fidelity to find the best solution in terms of usability and personalisation. After testing and refining, the overall layout started to shape:

  1. The Shoe Finder asks questions about the shopper’s goals. 

  2. The final product recommendations show one ‘Best Choice’ product and three ‘Alternatives'.

  3. Clicking on the shoe’s profile brings the user to the shoe’s detail page.

  4. Alternatively, the user can choose from other matching results.

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

Sport Shoes

Orignal Product Page design (left). New Product Page design (right).

  1. To address the biggest user pain point of hidden information and a non-intuitive layout, the final product page designs bring out main feature information higher on the page, reducing the amount of heavy text and replacing that with rich image content. As we learned from research, when users are looking for shoes they open 10-15 pages to compare products and don’t have the time or the intention to read all that long product description. 

  2. We exposed the shoe sizes which reduces the number of clicks and helps users find what they are looking for faster. We learned from GA that this is what they clicked on first on the old PDP. 

  3. We also reviewed and added a new ‘a size and fit’ section to increase customer confidence in buying online.


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

Sport Shoes

Shoes Finder interactive prototype (desktop)

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.


  • 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.


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.

Sport Shoes

Roadmap matrix grouped by effort and impact