JD Sports - Main Navigation
Objective: Redesign the Main Navigation on JD Sports.
Duration: 4 months
Project Team: Product Owner. BA. Onshore Devs.
Key Stakeholders: Trade Director. Head of SEO.
I was the lead UX/UI designer on the project but had a junior shadowing me to help their development. I also did research and testing.
Problem.
Over time, the main navigation on JD Sports' website was cluttered and overwhelming due to a multitude of business areas using it for their own needs.
I was tasked with leading a junior designer through the process of refining the navigation structure from a UX perspective, as well as working with SEO to make sure we would still rank highly on Google and Trade to make sure we didn't see a drop off in conversion.
This project also aligned with a new responsive site JD Sports is looking to launch in 2025, having used a separate m.jdsports domain
Kick Off
My approach this problem started with a kick off meeting where I had the project team in the room and we discussed what we as at team felt were the problems.
Funnily enough, SEO felt that the navigation was working wonders as they were very much enjoying being able to add as many links as they wanted into the categories and Trade were enjoying being able to add extra categories when they wanted (Black Friday, Christmas, Back to School etc)
I quickly realised that this project was mainly going to be about me managing the different stakeholders opinions as much as design.
After the kick off meeting, I put some requests into the SEO team.
Data Gathering.
I requested the top clicked links in the existing navigation in each of the categories (Mens, Women’s, Kids etc) over the previous 30 days and across desktop and mobile.
This gave me a starting point to understand the level of clicks each link was receiving.
Using Hicks Law, I had an understanding of what was the right number of links to show a user, but still needed data to back that up.
User Research
Whilst SEO got the data, I concurrently ran a test on User Testing where I white labeled the site and asked users to talk through their thoughts around it.
May two key aims were to
Identify the main pain points and areas causing confusion.
Gather insights on what users expect from an improved navigation experience.
What I found out was that users found the navigation too cluttered, with too many options that made it difficult to find what they were looking for and overwhelmed them.
Competitor Analysis
My next step was to looking at 10 different sites starting off with competitors such as Nike and ASOS and moving onto out of industry business like Etsy and IKEA to see how they were doing things.
I quickly noticed that simplicity was prioritised through clean, legible menus that minimised confusion.
When logged in, Nike and ASOS offered a level of personalisation to their customers.
IKEA used imagery in a far more intuitive way than JD did
Findings
After the insights gathered through User Testing, the SEO data and my own review of the existing site, I put together my thoughts and presented it back to the project team, as well as the Trade Director and Head of SEO.
My suggestions were:
Limit the amount of first level categories in the Top Navigation to 6 - Mens, Women’s, Kids, Sports, Football and 1 Other (E.G.Black Friday)
Remove the Featured Image from the second level, which saw less than 1000 clicks over a 30 day period.
By removing the Featured Image, increase the number of sub categories to 6, therefore creating space for the Accessories and Brands which would be removed from the first level.
Limit the number of third level links to a maximum of 10 - thus giving a total link number of 60
The feedback was generally well received and was discussed openly and frankly, SEO felt that if they were to accept limiting the number of first level links to 6, then they would need more links at the third level, so we agreed a compromise of 12 links.
Trade were happy to be able to use one of the extra sub categories for an offers/promotional content so were happy to sign off as well.
Wireframes
After the successful conclusion to the meeting, the next step was for me to create some wireframes that could be added to User Testing to gather more insights.
Visuals
Having received positive feedback, it was time to create some high level visuals that could also be user tested
User Testing Feedback
Users responded positively to the new design, frequently describing it as "cleaner" and "easier to use." The streamlined categories received particular praise for simplifying navigation and reducing the effort needed to find key information or features.
In addition to usability improvements, users highlighted the enhanced visual design as a significant step forward compared to the previous iteration.
These changes collectively resulted in increased user satisfaction, demonstrating the effectiveness of aligning design improvements with user expectations and preferences.