Home Screen

Selected Interventions

Navigation Menu Redesign

Problem

Users needed a navigation that would be compatible with Chrome and modernised for a better user experience. After testing the old navigation menu we found that they 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 +/- buttons were too small to click on.  

The header with the home, search etc.. icons on above the ‘Activities’ tab was confusing and misleading because users couldn’t search for an address and view the menu items at the same time. The old navigation menu was too light in colour and didn’t stand out well when viewing data on the grids. When users are Creating an Event at the bottom left of the navigation, they complained that this was too hard to reach.

1_041VBy1YfPybZJqGJc4w4w

Old navigation menu with the Account tab expanded

Process

The CEO and I sketched ideas for how our 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. We didn’t want to allow the secondary panel to take up too much space over the grid so we allowed our users to lock/unlock it. This worked by pushing the main grid across to the right when it was locked while when it was unlocked it would slide over the top of the main grid. 

The arrow on the bottom left of the primary navigation allows the user to minimise it so that only the icons show. Once minimised the user can then expand it by clicking on the arrow.

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 on the bottom left. This worked by pushing the main grid across to the right when it is  locked while when it is unlocked it slides over the top of the main grid. We also decided to use small arrows when expanding and minimising menu items in the grid. 

 

10229BFD-0731-4598-8127-A072BE167909

Sketches of the navigation

We moved the search to the top right of the navigation bar for easier access and incorporated the other tabs on the menu such as System Browser. We decided to make the primary navigation a darker grey than the secondary navigation to differentiate between the two.

Screenshot 2021-05-10 at 11.22.18

Updated Navigation V1

When we tested the ‘Updated Navigation Menu V1’ on users they said that the  lock/unlock at the bottom left of the secondary panel was hard to reach so we moved it to the top right which was easier to find. They didn't use the arrow to expand/minimise the primary navigation to see more of the grid so we thought this could be simplified. 

We conducted research and looked at how modern interfaces were designed. We found Microsoft Teams had an interesting interface by displayed the menu differently with an icon with the text underneath which worked well visually so we took inspiration from this.

Menu

Microsoft Teams Interface 

Solution


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.

si

Final Version of the navigation menu with the ‘Search’ and ‘Create Event’ moved to the top righthand side of the header.