Football comparison tool

  Client: adidas |   Role: Lead UX & UI Designer

Overview

PROBLEM

A recent user test across the adidas football boot pages informed us that users were not fully understanding the differences between the model lines, nor the differences in price points across the products.

With a target range of mid-teens (though not disregarding older users), I was tasked with enhancing these pages so that the information was clear and relevant to each type of visitor.

CONTRIBUTION

Sole UX designer: Conducted analysis based on analytics and previous user tests, investigated relevant benchmarks, produced sketches, wireframes and multiple prototypes whilst coordinating user tests at same time to confirm final direction.
Lead UI Designer: Set the UI style, and art-directed another designer to complete the UI.

OUTCOME

The solution focused on a product comparison tool that allowed the user to select and compare the differences between various football boots. User tests positively appreciated the clarity of information over materials and functionality.

STEP 1: ANALYSIS

I analysed the original user test results and put together an Invision board that would be used to present my research and proposals.

PARTICIPANTS MADE THEIR SHOPPING DECISIONS FIRST BASED ON PRICE, THEN STYLE

Learning: it is all the more important to make the technical advantages of the higher price point clearer if we wish to upsell

ONLY 2 OF 7 PARTICIPANTS CONCLUDED THAT THE DIFFERENT LINES ARE BUILT FOR DIFFERENT TYPES OF PLAYERS

Learning: clarity needed to be given to the differences between model lines

SEVERAL PARTICIPANTS DESCRIBED THE TEXT AS “FLUFFY” AND SAID THAT IT DID NOT ADD TO THEIR UNDERSTANDING OF THE PRODUCT

Learning: attention should be given to copy, so that it is succinct, easy to digest and meaningful

STEP 2: BENCHMARKING & USER TESTING

I researched other competitors to see how they were approaching the problem, as well as non-competitors addressing the issue of conveying information for model ranges with different price ranges. These benchmarks were then user tested.

STEP 3: WIREFRAMING & PROTOTYPING

The next steps were to take the learnings and go sketch, import, test, and prototype various solutions. Stakeholders were invited for feedback at key milestones. Feedback was taken on baord and incorporated into the final proposal.

STEP 4: DESIGNING AND TECHNICAL DOCUMENTATION