For the best experience, I collect usage information as per the guidelines in the privacy policy

Case Study

Footpatrol — design a habitual navigation

Skills
  • User Experience
  • Workshop
The Brief

Design a navigation, vital to mobile users

Through extensive research and experimentation, help users seamlessly find their way around the website and deliver a strong user experience. Design a navigation that works across all devices and doesn’t require people to adjust to a different mental model when moving from desktop to mobile.

Throughout this project, I was overseeing the user experience, brand creative and ever-evolving optimisation plan.

The Research

Defining the rules for navigation UX

Transparency – It is always better to assume that the users have no technical understanding of fashion jargon. Avoid overwhelming the users with choices and cluttering the navigation with text will affect the usability.

Recognition – Don’t reinvent the wheel unless it is necessary. Use industry standard descriptions and iconography.

Consistency – consistent design is intuitive design. We aim to eliminate confusion and help the users learn how to navigate faster.

Footpatrol Paris
User experience

Information architecture is a foundation of efficient UX

I was tasked to update the navigation with an aim to reduce the complexity and optimize the information architecture. I proposed a mobile-first approach because responsive navigation patterns force us to simplify and concentrate on the structure.

The information architecture was researched using card-sorting to spot actionable patterns in the way users think about content. It helped to reveal how many categories users suspected, learn about the labels used for each category which gave a lot of insight into the classification the target audience used.

Footpatrol navigation card sorting exercise
Prototyping

Reveal usability issues & areas of improvement

I created a series of digital prototypes to help reveal any usability issues and areas of improvements as early as possible. The prototype was distributed internally to get feedback from the various teams involved which opened up some complexities.

The design had to be effective. People must be able to recognise what it is, how to interact with it and quickly get to their end-goal without confusion.

Footpatrol wireframe designs for navigation
Design

Interface Design

Once the wireframes were signed off, I was then able to move into the UI design. The design didn’t need to be complicated; clarity inspires confidence.

I focused on micro-interactions; looking into how we could make it easy for users to interact with our website and provide instant, relevant feedback.

The interface was on brand and utilised smart interactions that I presented in such a way that the users could find what they were looking for quickly.

Footpatrol desktop mockup of the homepage
Footpatrol desktop designs of the navigation structure
Implementation

Test & Learn

Based on the feedback, navigation and search are considered the most valuable features and needed evaluating before making any changes. I worked closely with the data and optimisation teams to set up numerous tests based on naming conventions, re-positioning search and UI style changes.

The aim of the tests was to understand the behaviours and analyse which variant has a positive impact on our primary metrics. As a team, we set up 3 KPI’s to measure—site search usage, conversion rate % and behavioural tracking.

A learning curve

Conclusion

After weeks of hard work collaborating with keystakholders, designing several iterations and creating a test plan, this project sadly got put on hold.

Looking back I learnt a lot about the importance of data, user research and getting key stakeholders onboard with your direction. I want to highlight three things I think will have the most impact on my ongoing career and UX process moving forwards:

✔️ Take the time to learn the back-end system your working with and the way in which products are set up. The majority of issues I faced throughout this project was down to category set-up in the back end.

✔️ Presenting a digital prototype saves so much time in the long run – I use InVision to upload my Sketch files too. Prototypes allowed key stakeholders who weren’t fully committed to the project to quickly visualise and communicate any feedback.

❌ In terms of delivery, It was a shame not to see this project go live. Although there wasn’t a major problem to fix, it was designed to improve the user’s experience and tackle some of the reoccurring pain points we discovered. A more in-depth kick-off meeting would have solved some issues we faced further down the line. 

Footpatrol Paris

Worked on at JD Sports Fashion PLC