Navigation — Redesign
User testing, Insight gathering, Prototyping, Journey mapping, Stakeholder management
Introduction
We recently introduced a new web platform (Kindred Web Platform). This has been an ongoing project involving my team of Product / Content Designers alongside the User Research team. Not to mention engineering and way too many Stakeholders!
A new platform means out with the old and in with the new, no more legacy (yay)! It also presents us with opportunities, as well as challenges. In a team that can feel tech led, it is sometimes hard to push forward with significant improvements to the user experience. However, in this case we worked hard to get the development team on-board with a more user centered approach .
Framing the problem
Framing problems can be difficult, especially when we lacked any real insights and direction from stakeholders. The navigation and IA would all have to be re-built and managed on the new platform. It seemed counter productive to reproduce a legacy solution that may contain usability issues.
To discover any usability issues we initiated user testing, including card sorting on usertesting.com and basic task-based tests, yielding a preliminary mental model focused on one of our more basic brands. Initial results suggested minimal changes, leading to short-term improvements. However, realising the need for a scalable solution for multiple brands, we collaborated with the Lead User Researcher to conduct qualitative and quantitative tests on our largest brand (Unibet), guiding us toward a more comprehensive redesign and user validation process. This approach, though extensive, ensured confident, brand-specific solutions. For a quick overview, watch the video below.
Research methodology
With the help of our Lead User Researcher — we set up tree testing + card sorting across several markets. This allowed us to remove the visual aspect of the website and rely on our users to sort the navigation into categories. The advantage of this type of testing is scale (the combined sample size was 300 users), this was essential to provide us with the quantitative data we needed to gather significant results.
We also ran qualitative (usability) tests, in parallel to identify common patterns and pain points with the existing solution. While the sample size is smaller (10-15 users per test) it allowed us to create user profiling (different behaviour depending on age / nationality). It also provided verbal confirmation of the problems we identified in the quantitative tests.
Key findings
Users struggled to find what they were looking for as the main navigation and the on-page navigation are inconsistent
50% of users did not understand how to use the on-page navigation
Products appear in more than one category, leaving the user confused
Some products were under represented in the main navigation, making them harder to find.
“Only 1 in 2 users successfully use the on-page navigation.”
Designing the solution
The overarching theme that came out of the user testing was that our on-page navigation had to be consistent to the global navigation, in order to make sense to the users. This sounds obvious when you say it out loud, but it can be easy to overlook these problems when you have been close to the product for a long time. Adding additional navigation (especially on mobile) feels helpful and intuitive. However, there was no doubt that it had become a source of frustration to our users.
We also made the decision to merge two categories (Casino and Live Casino) within the navigation, as the tree testing exercise told us it made more sense to our users this way. This approach creates a ‘deeper’ navigation structure that seemed less intuitive to us at first (you have to tap more to find what you want). Our user testing did not validate this assumption though, so we created a few different options to see which performed best (Again using both qualitative and quantitive user testing methods).
We built our solutions starting with simple site maps, these were then validated by (yet another) round of tree testing. As you can see in the presentation (below) the results were very successful!
This additional testing was important, as our final solution was focused around a different brand vs the initial round of testing. Given that the same themes appeared across two brands in multiple markets, we can be confident that our ‘final design’ can be applied as a multi brand solution.
Roll out plan
After we got the ‘thumbs up’ from our Stakeholders I created a brand agnostic prototype to illustrate how the new navigation works (at scale). As the new platform gains traction, so does interest from around the business. The Kindred Web Platform is faster, slicker and accommodates a whole host of new features. It also offers an improved user experience due to a more intuitive navigation structure (thank God).
The prototype below is intended as a guide for our (internal) users to explain how the navigation can scale for the type of website they want to create. I have tried to make it as ‘smart’ and interactive as possible (using new Figma features, such as variables). This wizzy new tool allows the user to configure the design before exposing the navigation. You then get a preview of your chosen IA and how the products render within the new structure.