GoGuardian has three distinct user types - IT Admins, Teachers and Counselors. Our main user base - IT Admin have to traverse through our suite of products on a daily basis. The issue here is that all six of our products are distinct from one another. Each product has its own navigation style, information architecture and idiosyncrasies which has led to user context switching frustration and fatigue. I led a series of working sessions to see the possibility to have a unified global navigation that could enable an IT Admin to swiftly and effortlessly move from one product to the next.
My contribution to the project:
Role: UX Lead (Product + Design strategy, Research and rapid prototyping)
Supervised: 2 UX Designers
Tools: Sketch, Invision
Here is a quick breakdown of who are the GoGuardian user types:
Most knowledge of tech tools.
Intermediate knowledge of tech tools.
Least knowledge of tech tools.
Working Session 1
The goal of the first working session was to audit our six products to identify common user paths. We quickly realized that we needed to create a unified ecosystem for all GG products. We needed to introduce an easier way for users to complete their work, regardless of role. We wanted to break our product silos.
- We wanted to reduce users' cognitive load by forcing them to switch from one product navigation to the next in order to complete a task.
- We identified multiple workflows and impediments that kept us from shipping new product features.
- For example, if a Teacher needed to create a Student report, there was no way for them to navigate to Org Management to run and pull the report. The current navigation was hurting our future progress.
- We were impeding our users from completing their tasks
After identifying a ton of product silos, we were focused on introducing an intuitive and easy to navigate experience throughout our products.
Currently in Production, we had a mixture of 3 horizontal navs, 2 vertical navs and 1 horizontal + vertical nav. Here are all of the navigation types we have across our product suite:
Working Session 2
I supervised the creation of a demo of a set of wireframes that experimented on what a global navigation could be. After some healthy and passionate discussions with PM's, PMO and Engineering it was clear that what was being proposed was not achievable in the short-term. We decided to reduce our scope to release a global navigation.
I initially wanted to create the global nav so that the engineering team could code it as a design token and release it across all six products in a single release. I wanted to avoid fragmentation across products at all costs; given that this was the present state for our users. The sad truth was that after speaking with most PM’s and Engineering leads, it looked like each code base was at distinct levels of React JS maturity and it would be an 18+ month endeavor to get all code bases to the same version of React to gain parity to ingest a singular global navigation. So the decision was made to release the navigation in one of our products, iterate on it and then release it to subsequent products.
Initially we wanted to beta test the global navigation in Org Management. Org Management is our platform product where power users setup and manage access to all other GG products, third party integrations and user permission settings. The idea was to introduce the new navigation to our most technologically literate user base. Our average Org Management user is a Director of IT or lead IT Admins who are very aware of how our suite of products work. Additionally, Org Management users are our smallest segment of users, so changes to the UI wouldn’t be too destructive. Once we'd studied and iterated the Org Management navigation, we’d then move on to our Admin product. Unfortunately, the entire Org Management engineering team was tied up with two major projects - turning on integrations with third party apps and self service for our smallest tiered customers.
So no dice. On to the next product Admin.
The Admin product is the main product that our IT Admin customers use the most. Admin is the product where IT Admins can set policies (website filtering), monitor browsing activities, track and retrieve lost devices, etc... Here is where I hit another roadblock - the product was getting a new PM and the new PM would not be available to start working on the product until six months later. The Admin product was off the table.
Finally, I went to the Teacher PM. I mentioned the vision that we had for unifying our products and how introducing a global navigation would be the first step in getting us to our desired future state. The PM stopped me after my second slide and said “this needs to happen in the current Teacher code base rewrite.” He went on to mention that the current Teacher navigation was broken and that the entire Information Architecture hierarchy was lost on teachers. There were pivotal features in the Teacher product that were being lost on teachers, because the current navigation was not intuitive. He agreed to take on global navigation on one condition: we needed to address and fix the entire IA structure of the Teacher app. Deal.
Bring on the scope creeeeeeeeeeeep.
I quickly ran back to my desk and began doing an IA audit of the Teacher product. We began to do user testing within days. We learned that the new navigation reduced friction for users. The new nav and the redesigned IA were so intuitive that users finished all user testing exercises in 10 minutes. Yes that’s right 10 minutes. We had allocated 45 minutes for each user testing session. Users would naturally navigate to the right places in the app or would instinctively complete the following user prompts. The PM was so blown away that he used the remaining user testing session to ask about other experiences that a user would like to see change in the app.
The new navigation shipped! Here it is in all of it's glory:
- The new global navigation shippppped!
- The new nav was easier to build from scratch, instead of refactoring the current nav that was broken, confusing and failed many accessibility standards.
- From the design perspective, the new nav meet all WCAG 2.0 AA standards. We’re currently undergoing an accessibility audit for our codebases.
- The new nav enabled user requested features to take more prominence in our apps. One example of this was, when a teacher ran a session (real time classroom views of student screens) and the teacher needed to navigate away from the page, there was no easy way for a teacher to go back to the session. A teacher would have to go through 3 different screens in order to go back to the session.
With the new nav, we can now display a running session across the UI. The teacher can go to the session easily from any screen in the UI.
- Now that students are back in school, we have been receiving positive feedback from teachers that the workflows make more sense now. They’re “discovering” and “finding” features more easily. Discoverability along with NPS has has shot up. NPS is now at 76%.
We’re continuing to monitor how teachers are adapting to the new navigation. I am now engaging with the Admin and Org Management PM’s to do a joint launch for the global navigation for both products. Fingers crossed.