Left-Hand Navigation







background
For this project, the goal was to bring an updated theme to an already existing product. The most difficult part would be consolidating the dense amount of menu options into a simple navigation layout. I began work with the main stakeholder of this project, determining what would be the best way to present the software to users. We worked through the different features and menu options and determined what the best path forward was. Getting the left hand navigation ‘right’ was especially important as it would likely be the first interaction point for users.
Process
The Material Design framework was utilized for other software redesigns internally, so I decided to use its framework for this re-imagining. To the left you will see the previous design. Based on an outdated design styling, the goal was to give the software a fresh coat of paint while also consolidating the plethora of menu options into 4 simple navigation points. We also wanted to make these 4 menu options occupy a larger target space than what was typical for left hand nav bar sizing.
I was asked to create a few different color styling options as well for usability testing purposes. Other software platforms utilized the Material blue theming, so I built around this color first.
These wireframes were then sent to the development team to begin building off of.