EE Global navigation

EE Global navigation

Goal: An accessible, relevant collection of links within a clear, predictable and modern UI.

 

A rapidly delivered project used as proof of concept for adopting lean/agile methodology.

Aiming to modernise a cumbersome UI, to improve accessibility, to improve labelling and relevancy of content, and to remove considerable tech debt from the original build.

EE Global navigation

 


1. Problem

The previous version of the navigation had a number of significant accessibility issues. Particularly around use via a screen reader, and use of inaccessible colour contrast ratios.

Our data showed lots of links within the nav weren’t being clicked, and unclear labelling was leading to users having to try numerous links to get to where they wanted to be.

We had witnessed in previous user testing sessions users struggling with a clunky UI.

There were also multiple backend instances of the nav, often leading to inconsistencies across the estate, as well as the overhead of updating all versions when a change was required.

Original EE navigation
Original EE mobile navigation

 

2. Approach

Firstly we assembled a small team of a front-end developer, a visual designer and myself as Lead UX. We limited to three senior stakeholders, with whom we had regular meetings and design shares.

 

2.1 My first task was to define a number of over-arching experience principles for the nav, which had perhaps been lost in the previous incarnation.
Then to conduct a review of the analytics into present navigation behaviour, which fed into rationalisation of the content and labelling which we validated via card-sorting session with our users.

nav-exa-principlesExperience principles
nav-hitsAnalytics review
nav-content-rationalisationIA rationalisation
breakpointsBreakpoint analysis

 

2.2 Next, via rapid lo-fi sketching coupled with InVision, we began to audition different UI mechanisms for the navigation.

Whilst some of these ideas provided a WOW factor for the stakeholders, I was of the opinion that a new UI behaviour which a user would have to learn was too big a risk to take with only one round of lab testing available to us to validate any new approach.

I was confident we could solve all problems with the existing UI mechanic so limited the scope of our work to an evolution and refinement of the existing model.

nav-iterations-2
nav-iterations-3
nav-iterations

 

2.3 We adopted a mobile-first approach to the design, and we were keen to work in code as quickly as we could.
This allowed us to share working versions in the design share which we could audition on our devices, and quickly decide on design minutia.

default-in-situ-default-cheese-board copyDifferent treatments for the Login call to action

It also allowed us to evolve the working version during the eye-tracking lab sessions in real time.

Eye-Tracking the new navigationEye-tracking testing


 

3. Solution

Vertical height reduction
Through nesting lesser used options, we reduced the height of the navigation by 40%

Touch targetsTouch targets adhered to Human Interface Guidelines
Reveal on scroll upReveal on scroll up

 

Final designs

Desktop navigationDesktop

ipad-angle-panelTablet

Navigation on iPhoneMobile