Navigation can be one of most important aspects of any design interface to get right. For this navigation, the user must be able to navigate through a whole heap of complex rich pages.
It was integral to listen to our users and understand their pain points before working out how I could improve upon the current nav.
The current nav bar, shown below was frequently having new links added. It was evident that we needed to categories some of the options.
Users had been asking for some type of sub-menu for the Analysis and Admin sections for a while. Both of these links took the user to a separate dashboard where they could choose what section to proceed to. The dashboard pages didnât offer any further information, only the link titles. Having links appear directly on the nav as some sort of dropdown could definitely help improve this. đđ»
One thing that always struck me about the nav, was the âbusy-nessâ of it. As the links grew, new relevant icons were needed, and that was not always an easy or relevant task. It was becoming visually overwhelming. I wanted to keep the âaccountâ, âhelpâ and ânotificationâ alerts separate from the main menu options.
Reviewing the stats on G.A, I knew the green âNew Learningâ button was a main link as it linked directly to an important page in Balance, so this needed to stay. The help button however was hardly used, as we had a direct chat link on every page. I decided to remove this.
Problem Statements (user, need, goal)
Creating the following problem statements for this project helped keep focus on the goals:
Mr Miller, a teacher at St Lukes Halsall, wants to view a pupils grade within the Analysis section, followed by viewing the same pupils âprofessional judgementsâ, also within the Analysis section. He wants to seamlessly navigate from either feature, in a speedy and fluid manner.
Mrs Jones logs in after the sites been down for a timed period due to âmaintenanceâ. She would like to instantly know why the site was down and if it was down for only maintenance or for new features. Knowing this information would help keep her informed and would allow her to investigate the new features so she can use them and ultimately benefit from the features.
If I can condense the analysis and admin dashboards and the three planning landing pages into a mega menu of some sort that appears on hover, this would not only address the pain points raised from users, but also help reduce the hierarchy to two levels.
As shown below, the current site hierarchy is three levels deep which is a good start. I definitely want to try and steer away from adding further levels, just to keep the site accessible and less disorienting for the users.
Concept 1 nav bar:
Concept 1 - Teaching hover state:
Concept 1 - Analysis hover state
Concept 1 - Admin hover state
Responsive Nav Bar
â
For responsive I kept the tablet view similar, with the options wrapping for ease.
For mobile, I used a more traditional draw method navigation approach for simplicity.
â
Tablet visual:
Mobile prototype:
Concept 1 user feedback
I presented the designs to the main board of stakeholders for review. I recorded some of the concerns below. It was clear from the feedback that there was further room for improvement.
A lot of the concerns were around future proofing the design and making it easy for us to add extra features to the nav with minimal design and dev time.
Nav Bar - concept 2 desktop
Taking the above feedback into consideration, I decided not to categories the main links under a âteachingâ heading. I also decided to drop the mega menu and use a more traditional dropdown menu (see concept 2). This would mean that any new features could be added with less design and development time required.
I wanted to use the illustrations that I originally intended for the âTeachingâ mega menu, so instead I decided to add them to the homepage.
The homepage is undergoing a full revamp, but as an MVP, utilising these illustrations made a huge improvement to the current landing page.
I decided that as we needed to keep the analysis and admin dashboard pages too, we could again, include the various illustrations created on these pages instead as well as add some descriptive copy for each section.
Concept 2
Analysis page
Some of the feedback received from stakeholders meant that I needed to allow user to access a button on the Analysis dashboard that allows user to access past data for previous academic years.
As a result, we decided to still allow the user to choose the dashboard from the dropdown on the new nav bar.
Rather than keep the current dashboard design, which only showed the headings for each analysis link, I added some descriptive text, and the unused illustrations, just to help this page become a little more descriptive and useful.
For phase 2, we will be looking to change the dashboards to show relevant stats, charts, etc.
Current Analysis dashboard
Proposed Analysis dashboard
New features
The stakeholders were really keen to include a ânew featuresâ tool in the nav. At the moment when the site is back up after a period of maintenance, mostly due to a release, no information on why the site was down is shown to the user, apart from any marketing or social comms.
I decided to create a full screen draw that would display articles with different tags to help categories the notifications. To begin with, I had ânew featuresâ, âupdatesâ and âmaintenance' notice tags. I would add to these, but for MVP, these seemed like appropriate tags for Balance.
The âlearn moreâ button would go through to Zen Desk were the support team complete thorough and up-to-date messaging for users.
I stamped each notification with a date and a reference to when it was posted, for example, Â â2 days ago - 12 Sep 2020â.
Although a simple tool to add, iâm really excited about the new feature tool as I know that it will instantly benefit users, letting them feel connected to the product. It will also allow us a platform to introduce new features going forward.
Site navigation is about creating something that entices users to interact with the product. It can often be over looked, something which I was determined not to let happen. Being able to think about the site plan, reducing clicks, the usefulness of the original dashboards and how to improve them, made this once again, an enjoyable challenge which required listening to the user and the stakeholders with an open mind.
