Project: Orange Navigation

My reponsibilities: UX Design, UI Design

The Orange shop had been around for several years when I looked at tackling the navigation. Previously, it was a long list of exposed links in a left hand panel. When the navigation was created, no doubt this made sense but over the years, as more and more links were added to this area, it became overloaded.

Where were the issues?

Orange Nav Old.png

There were several:

  • Type legibility: An older design meant a smaller font size (11px) on Orange which was below the normal requirements for comfortable use on a modern laptop/desktop/tablet. It was also a little unclear how the sections were divided.
  • Top level confusion: It wasn't clear from the top level navigation whether you were in Personal or Business
  • Navigation grouping: Certain elements had been added to the wrong sections, simply because there was no better section in which to add them
  • Navigation length: The left nav was actually so long that it overshot the page content on several pages
  • Repetition of the site title: The Orange Shop was repeated in the main site header and in the navigation, and it only served use as a rather unclear home page link
  • No way to shop by brand: Surprisingly, for a business where customers most certainly looked for specific brands, there was no shop by brand element

My first user test

I knew that tree testing or card sorting was going to be the best approach with a navigation re-work. I opted for an open card sort, as it seemed the most logical approach. Several of the categories seemed like they would fit together quite well, but with others it was going to be interesting to see how people grouped them.

I ran a guerilla-style tree test on around 12 participants. Due to the wide reaching demographic or Orange, I had to pick a broad spectrum of people, including a security guard at the office and my partner's father.

When I collated the results, it started to confirm what I'd suspected with regards to the obvious groupings, and the less than obvious elements also started to knit together into groups that made sense.

Approaching a build

To get the navigation live, I had to approach it in two phases:

  • Revise the navigational structure and measure for a month
  • Collapse all of the elements in the nav and measure for a month

Without an A/B testing system or access to research funding, taking the bold move to just put the navigation live was the only option. Due to that requirement, both I and the business management decided that the phased approach made sense as introducing the new navigation in its entirety may have been too much of an immediate shock for customers (and the business).

At Orange, customers would only browse the site at certain times of year, either around the time they were due an upgrade, when they were looking to switch to Orange, or when buying gifts at Christmas or for birthdays. All of these are relatively short time periods of frequent activity, so a customer needed to see a relatively similar navigation from one day to the next.

Assessing the results

Again, without A/B testing, the impact of the navigation needed to be assessed in quite an ad-hoc manner. I looked at KPIs like clickthrough and purchases, and found there was no negative impact with the first phase.

Thankfully, that enabled me to release the second phase which had equally good results.

Orange revised nav shop by brand.png

I've learned since that it's important to get qualitative as well as quantitative feedback for a project of this type, as changing a core navigation to something easier to us will almost always generate useful verbatim feedback. This useful to keep everyone on-board with the changes afterwards, and to make sure any learnings and positive changes are taken into future projects.