The Problem

A huge clean-up and re-structure.

Consistency
The original Pro:Direct suite of websites consisted of 7 independent sites designed in their own individual way. (Soccer,Running, Rugby, Cricket, Basketball, Tennis, Select) One of the issues faced by this setup included customers having to re-learn a website when browsing between different sports, which was a common behaviour. This setup, combined with out-dated design and a lot of technical debt resulted in a very poor user experience with a high cognitive load.
‍
Brand
The Pro:Direct brand has a reputation of premium quality. Unfortunately, this presence was not represented in the online experience. The next goal was to bring the online experience up to the high level of the brand.
‍
Legacy Design and Tech Debt
As well as each site being completely individually designed, a further separate mobile version of each site existed. Making the website responsive would solve this issue. Over the years, many different UI elements and styles had been added individually resulting in a lot of design inconsistency.

The Pro:Direct brand had a strong presence globally and was recognised for it's premium photography. Unfortunately, this strength was not being highlighted on the eCommerce store.

What does success look like?

Core Metric = Conversion Rate
‍Increase Conversion rate by 20%
‍Increase average order value 10%

Quantitative & Qualitative Research

‍A combination of quantitative and qualitative research was carried out to gain insights into how existing customers were using the site. Discovering pain points as well as any positives that could be carried across into the re-design would help to achieve the best possible result. This discovery phase began by gathering key data via multiple channels and tools. These included: customer interviews, stakeholder interviews, surveys, identifying frequent customer support enquiries, Google Analytics to track existing online behaviour and conversion metrics.

Google Analytics helped to highlight areas of frustration, especially within the checkout process. This area of the site was a key opportunity for growth and improvement.

Discovering existing customer journeys provided a clear way to identify opportunities for improvement, such as checkout drop-offs. New personas were then created to define new, improved journeys.

Information Architecture

One major issue that was causing a lot of user frustration was the discoverability of products. With sub-standard search functionality, users relied heavily on finding products via the navigation menu. Unfortunately, the existing navigation was poorly organised resulting in a lot of clutter. Simply put, it struggled to handle such a vast amount of products and product categories without showing a vast wall of text.
‍
To address this issue a stakeholder meeting was held to evaluate the existing product inventory and how the business wanted to promote the most popular product categories. From here, we gathered all product categories and simplified the structure and category relationships. The aim was to make it simple to get to any product quickly, within a few clear steps rather than slowly with one step.  
‍
Changing such a core part of the user experience required researching current user behaviour. In order not to disrupt existing users' experiences too dramatically with the re-structured navigation, the core category ordering remained fairly similar but included a simplified structure with stronger focus on visual hierarchy. To achieve the best balance, we tested design changes on both existing customers and new customers.

Key Customer Insights

• Hard to find new products
• Messy interface
• Untrustworthy checkout experience
  Inconsistency between sport categories

• Horrible mobile experience!
• Slow, clunky performance
• Inconsistent on website and mobile

Design

Design > Test > Iterate

The design process consisted of a continued cycle of Design > Test > Iterate. By testing prototypes frequently throughout the design process, it was simple to guide any iterations as part of the process, rather than waiting until the end of the process to find out a lot needed to be changed. This saved a lot of time in the development process.
‍
The starting point of the re-design was to look at the existing site structure and work out what needed to stay and what could be simplified and stripped out. To address one of the main challenges of site consistency, it was decided to use the same core structure and style for all 7 sites, with a clear way to transition from one site to another.  
‍
Before any styling or UI elements were designed, an initial set of wireframes were created following some early sketched ideas.

The Power of a Design System

In parallel to designing the site structure and layout, a design system was built. This included a set of new UI elements such as CTA buttons, colour palette, font guidelines, form elements, icons etc. Creating a design system was essential to the speed and efficiency of the re-design but also had long-term benefits. It would allow consistency to remain strong in the user experience for future iterations.
The use of a design system made it very quick to add any styled elements to the validated wireframes, which were then converted to interactive prototypes.

Prototyping for success

Prototypes were created and varied in interactivity, depending on the specific task being tested. High-fidelity prototypes were a great tool for testing advanced functionality, such as form validation, sticky elements and animation. A typical prototype would start with a goal to test. After asking user test participants a series of discovery questions about their behaviours and preferences, a set of key tasks were attempted to be completed. During this process I would monitor their actions, identifying any hesitations or signs of confusion whilst the user was talking through their thought process and actions.

In-Store Use Case

Although Pro:Direct is an eCommerce business, they have a flagship store in London. The website needed to be usable on large touch-screens, which meant creating an 'In-Store' mode, which would enlarge page elements.

Testing & Rollout

To validate the new designs, prototypes were shown to customers along with a set of tasks to complete and a series of questions. These testing sessions helped to highlight any pain points or bugs with the new design. It also provided a direct line of contact to our customers to gain a real insight into their behaviour and expectations of the design. The designs were then iterated and tested once again until the desired result was achieved. Once the new site was built, it was initially rolled out to 5% of customers. This allowed us to identify any pain points or bugs that could not have been discovered via a prototype. Once any issues were ironed out, the rollout gradually increased to 100%. The new site was live to all users and ready to be continually iterated upon in a clean and efficient way.

Business Impact