Navigation Menu Redesign

Old Menu Navigation below:

Problem
Users needed a navigation that would be compatible with Chrome and modernised for a better user experience. After testing the old navigation menu with users we found that:

• Users had to scroll down through the items in the menu to get to the next tab which was time consuming.
• When expanding/minimising items in the menu users complained that the +/- button was to hard to click on.
• The header with the home, search etc.. icons on was confusing and misleading. Users couldn’t search for an address and view the menu items at the same time.
• Creating an Event was at the bottom left of the navigation, users complained that this was hard to reach.
• The old navigation was too light in colour and didn’t stand out well when viewing data on the grids.

Addressing the problems

1. Scrolling through items
   The CEO and I sketched ideas for how the users might find items within the tabs and decided on having two panels. The first panel had the tab names and the second panel had the menu items displayed.
2. Locking/Unlocking the Secondary Panel
   We didn’t want to allow the secondary panel to take up too much space over the grid so we allowed the user to lock/unlock it.
3. Changing the expand/minimise icon
   After researching icons we deciding that having an open/close arrow fitted in well with the interface.
4. Getting rid of the header on the navigation
   We moved the Search to the top right of the navigation bar for easier access and incorporated the other tabs on the header such as system browser into the primary navigation.
5. Moving the Create actions to the navigation bar
   The actions such as creating an event were moved to the top right of the navigation which allowed users to find this on the screen with greater ease.
6. Updating to a darker colour scheme
   We decided to make the primary navigation a darker grey then the secondary navigation to differentiate between the two.

Competitive Analysis
Microsoft Teams has an icon with the text underneath which worked well visually so we took inspiration from this.

Microsoft Teams Navigation

New Menu Navigation below:

Feedback was excellent! Users said that the new home screen was really modern and the items on the navigation were easy to find. The redesign was a success.