(re)Designing Navigation Menu

For a long time we had a navigation menu that has worked efficiently for us. However, over the period of time the number of products had grown. A good navigation should make excessing content easy, but our navigation couldn’t provide the same experience to an user.

In order to improve usability, a complete redesign of the navigation was in order. Here’s the story of how we went for it, the challenges and opportunities we found.

The Challenge

The thing that makes navigation so difficult to design is that it can be so versatile. Navigation can be simple or complex; of a few pages or of multilevel architecture; different content for different users; and many more. Because navigation vary so much between websites there are no sets of guidelines for organising navigation.

Organising

Probably the the most difficult task was to organise the whole content in the relative groups. This was the most challenging because we didn’t have access to real users and having been associated with the brand for so long we had our own mental models of the groups. In order to overcome that we used two methods:

  1. Primary and Secondary Navigation
  2. Information Architecture

Primary and Secondary Navigation

We sorted our content into two categories Primary and Secondary. Primary category had the content which is used by most of users like products, services etc. Secondary had the content which was used by a few users like Support, Login, Signup etc.

1.Medium Navigation Menu

For example Medium homepage shows two group of navigation items. In first group we can see For you, Editor’s pick, Reading roulette, etc. While, in second group the one on top right corner we can see “Write a story”, search option, notification icon, etc.

In the above example we can say that first group is for primary navigation and second group is for secondary navigation.

Information Architecture — Card Sorting

Once we had the content for the group next we thing that we wanted to do was create information architecture and check for the sanity of labels. We used card sorting technique (cheap and proven) for this.

2. Card Sorting

For card sorting we first prepared a list of candidates who can participate in the process(while selecting candidates we made sure that we had candidates to represent all sets of possible users). Then we had cards containing name of the products and a few blank cards.

During the whole process there were 2 main questions for which we were looking for an answer:

  1. Can the users relate the labels in the navigation design to their explicit goals of exploring products ?
  2. How are they categorising the products ?

While, the first question answered how relevant the label for the product is. Second question gave us some interesting patterns, in which user were categorising, which we didn’t consider earlier.

On analysing we got some interesting insights like:

  • Some labels were not clear to user.
  • Some labels needed more description (especially new products).
  • Some users had categories products based on type rather than uses. (For example, you can categorise apple products based on Music and Video rather than Product line iPad, iPhone, iPod).

Removing Ambiguity

After completing card sorting and agreeing to a final categorising of the product there were still some ambiguity remaining in the design. For example, some products were repeating in multiple categories, some products appeared very similar (based on labelling), etc.

We tried many ways to remove those ambiguity like, coming with a small icon next to label, trying small description for new products, using tags with label etc.

After a lots of to and fro we finally settled with having tags for new products and small description of the products which were not clear to user(as per our card sorting exercise).

After all, they have to sell

In the end we were ready to present two options to product manager (The Boss). There were some suggestions from them which we either didn’t agree or partially agreed upon. To some extent we were able get our way but not without having some changes.

It was important as they are responsible to sell the product in the end, and they also have perspective of the users.

Conclusion

Some of the most important lessons I learned from this project:

  • Get as much of data as you can, before you start. Do your homework before you jump into a redesign.
  • User testing is key.
  • Document what you learned and achieved.
  • If you think you can handle an entire redesign alone, you’re wrong. Collaboration is everything.