GoGuardian is an educational technology company that offers services such as monitoring student activity online and filtering content. Within our team of UX designers, we collaborated with a seasoned senior UX designer to craft a content management system and enhance product literacy.
GoGuardian is an educational technology company founded in 2014 and based in Los Angeles, California. The company's services monitor student activity online, filter content, and alert school officials to suicidal or self-harm ideation.
We were asked to rethink GoGuardian’s “Admin” feature of policy creation and configuration elements. The scope under the policy creation feature also includes policy display, management, and organizational units.
Several district IT managers have reported that they were having trouble understanding the policy section of the Admin feature. The challenge was to first understand and evaluate how the primary users of GoGuardian’s Admin product navigated through the current product’s policy section so that we could ideate ways to improve product literacy and streamline the onboarding process. This in turn should increase user confidence, and optimize the overall experience for our target audience.
Interactive Infographic
The IT managers were struggling to understand how policies are applied to Organizational Units(OU).
A family tree infographic of the OUs simply displays the hierarchy within the OUs and how certain policies are passed down from parental OUs.
Visual Tutorial
The previous version of the GoGuardian Admin feature didn’t offer an intuitive way to help confused users other than providing a direct phone number to a GoGuardian IT Specialist.
Our team decided to offer a visual aid where it highlights each feature that school district managers must know in order to correctly apply policies to certain Organizational Units
Restructuring OUs and Policies
Separation of information wasn’t as intuitive as intended. Most users were struggling to navigate.
Instead of dividing the categories into School Mode, Home Mode, and Policy List, our team has decided to insert the policy list into a single landing page to avoid confusion.
The Double Diamond method was requested from the client.
The Double Diamond process is divided into four main phases — Discover, Define, Develop, and Deliver. Because of the nature of our users, our client has provided us with recordings of the interviews they conducted. Discover phase wouldn’t have been possible without their data.
What do we need to know? How can we know?
Unfortunately, the admin feature is not available to the public. The only way to gather information about users’ needs is through user interviews of active school IT managers.
A journey map was used to visualize the process IT managers go through in the Admin feature. We wanted to understand how confident users felt each step of the way while addressing their pain points.
Taking a closer look at the journey map provided by the GoGuardian team, our research team determined that we needed to focus primarily on product literacy which was forcing users to learn how to use the product by trial and error. If we can remove that core problem, we would hope to discover other problems that users might face with the current version.
Although the issues seemed scattered and unrelated to each other, we were able to isolate two major improvements that could address most of the problems.
The Source of All Problems
Users needed more guidance to help them navigate through all of the product’s features.
A Core Element of GoGuardian Software
Users were confused about where policies are located and how they are applied.
After our first client’s meeting with these findings, we were asked to focus on improving overall product literacy first before attacking policy management.
In order to focus on improving overall product literacy and users’ confidence in each task, we needed to understand whether they were having any issues with the user flow itself. By studying the existing user flow, we hoped to declutter and organize information and increase overall product literacy.
Since we have defined the problem and discovered potential solutions, we decided to start wireframing some of our ideas in Figma.
In order to increase users’ confidence in each task, we needed to understand whether they were having any issues with the user flow itself.
By studying the existing user flow, we hoped to declutter and organize information and increase overall product literacy.
GoGuardian team did find the new layout visually attractive, but they didn’t exactly see the new carousel version working better than the old version. However, they have given us a go on the Help feature and combining policy list with OU list.
After our second meeting with GoGuardian team, we decided to test out our wireframes. Using the screens we have designed, we created a prototype and tested it on Maze.
Although we have solved the problem of cluttered information, we were unable to smoothly introduce the Organizational Unit Tree to new users without giving them a long explanation of each feature.
After making all the changes, we wanted to run another usability test with different groups of people. The result was more promising!
From here, we started designing high-fidelity prototype for GoGuardian team to review and deliver.
GoGuardian team was pleased with the result and we handed over our files with our research findings, new components, and 23+ new and improved pages.
“A process that is not critically dependent on prototyping is not a UX process.”
Julian Caraulani
A Wide Range of Users
Users ranged from IT experts to school teachers. It was very difficult to design something that would be friendly for both types of users. It also took a lot of time to have our users test our prototypes since we couldn’t offer any compensation for taking out their personal time for us.
Client's Unavailability
Due to this project's nature, we could not hold more than two meetings with the client until the final delivery. More feedback would have offered a chance to deliver something that could have been more aligned with what the client was looking for.
Lack of Design System
Due to security reasons, the GoGuardian team could not give us access to their design systems or their software. Our team was able to watch existing tutorial videos to understand the problem, but it wasn’t enough to really understand the program until further into the project. Every design element had to be created from scratch. This process took away too much of our time and limited our chance to improve the design further.
Software Development
After wrapping up the project, the client mentioned that developing an interactive infographic like the OU tree would be both time-consuming and expensive. I wish we had the opportunity to inquire whether our design aligns with their budget and adjust our design accordingly.