Redesigning navigation across enterprise software

Arbor Education

As the sole designer at the company, I led the redesign of navigation for Arbor, a Management Information System for schools.

Role

Product Designer

Domain

Edtech

Duration

May 2020 – Sep 2021

Team

Product Manager, Engineers

Context

Arbor is a Management Information System (MIS) used by over 1,600 schools and 300,000+ users in the UK. It streamlines various school processes, from teachers taking attendance and issuing detentions to parents paying for school trips. I joined Arbor as the sole designer within a 130+ employee company, working as part of the front-end team.

Problem

With no designers or UX processes, product managers built new workflows using an existing design system. This led to siloed UX, with no oversight of the platform’s overall user experience. Over the years, product managers had added pages into the navigation in an unregulated manner, resulting in a chaotic experience.

Goals

Help users quickly find what they need within the navigation, so they can spend less time searching and more time teaching.

Reduce trial and error mentality when trying to learn how to navigate around Arbor. Improve learnability by making navigation more intuitive.

Break down user hesitancy and encourage both new and existing users to utilise areas of the MIS they’re unfamiliar with.

Ensure users know how they arrived on a page and know where to go next with clear signposting and CTAs.

Ensure users can navigate quickly, reducing time spent searching and increasing time spent on meaningful tasks.

Final concept

The final concept streamlines navigation by introducing primary categories from modules within Arbor and introducing global “bookmarks” for quick access actions. I designed a left-hand navigation that’s built to grow, allowing for easy addition of more modules as Arbor expands.

Next steps

I moved to another company before I could see this project through to launch. If I were to continue, my next steps would’ve been:

– Finish defining the IA across all modules in Arbor
– Prototype an improved UI and usability test
– Sense check terminology with users
– Release a beta of the new navigation to a small group of users

Research

To understand the scale of the problem, I audited the current top navigation, which contained 229 endpoints, and found that users frequently cited navigation problems in NPS feedback – 53 times, 10x more than positive comments.

Key findings

I conducted surveys, interviews, and usability tests with users (teachers, school leaders, and admin staff) to identify pain points. The results showed 77% of users had a negative experience navigating Arbor, with only 23% finding it quick and easy to locate pages. Usability tests revealed new users took twice as long to find pages, often relying on trial and error by opening and closing every dropdown.

Concept generation

I developed five concepts and hosted a workshop with my team to gather feedback and refine them. After voting on our favourites, we narrowed the options down to two.

Shortlisted concepts

The shortlisted concepts included one that used the top nav, keeping navigation similar to the original but used more categories. The other removed the top navigation entirely, shifting everything to a left-hand panel.

Chosen concept

I shared both concepts with users and stakeholders to gather feedback and determine the preferred option. Users and stakeholders unanimously chose the left hand navigation concept to move forward with for the final design.

Defining the IA

During concept development, I structured the primary navigation around Arbor’s modules. To refine the information architecture within each module, I collaborated with product managers to group standalone pages and define subcategories.

Allowing for personalisation

When speaking to users earlier in the project, they expressed a desire to customise their MIS based on their school colours at a system level. So I explored allowing system admins to edit their theme.

Outcomes

Getting multiple product teams aligned on these changes was a huge win in a company that wasn’t UX focused. It meant UX was finally being considered at a structural level.

User research and testing helped confirm the need for a redesigned navigation, with strong preference for the left-hand panel concept. This provided a clear path forward for the team.

Key takeaways

Effectively presenting ideas and research is essential for gaining buy-in across the company. Since navigation changes impacted all teams, (particularly the support team!) securing their support was crucial to moving this project forward.