Redesigning Gaggle's Internal Admin Tool
Streamlining incident review, scalable design system, and enhanced usability for safety analysts.
Date
July 2024 - March 2025
Role
Product designer
Company
Gaggle helps K-12 schools ensure student safety by using machine learning and human analysts to monitor digital activity for signs of harm and alert school staff to urgent issues.
Problem
Safety analysts deal with a lot of incidents every day, so they need to work quickly and accurately to make sure everything gets processed on time. Once an incident comes in, the goal is to process it under 40 minutes. On average, it can take around 19 seconds to process an item, but the goal is to get it down to under 28 seconds. The problem was that the existing tool had a lot of usability issues — like unnecessary content, inconsistent design, poor UI/UX practices, and workflow inefficiencies — which created bottlenecks and a high cognitive load.
Solution
I led a complete redesign of Gaggle's admin interface and design system. This included building a robust design system in Figma, streamlining workflows with intuitive navigation, and reducing friction by removing unnecessary clicks and content. I also enhanced usability and clarity, ensuring safety analysts could easily understand and process incidents.
Because technical constraints were a priority, I used the MoSCoW method to prioritize features based on their importance.
A New Look
Step 1: Entering the Queue
Below is the starting page that displayed a list of different work queues with the option to enter an automatic queue.
Highlighted issues:
The list of different queue types weren't being used
Primary action was entering the automatic queue, but the button doesn't draw immediate attention
Interface feels cold, monotonous, utilitarian, and unwelcoming.
Key Changes:
Removed the unnecessary list of queue options
Centered dialog: Improves clarity and reduces cognitive load by focusing the user’s attention on their primary action of entering the queue. It minimizes distractions by hiding less relevant UI elements in the background. You can also add a keyboard shortcut (press Enter) to speed up the workflow without adding UI complexity and reducing clicks. (must-have)
Human-centered graphic & empowering text: Reviewing incidents can take an emotional toll on the analysts since the content can be distressing. Adding a calming and empowering graphic helps reduce anxiety, making the workflow feel more human-centered and supportive, and aligning with the well-being and safety goals as a brand. Fade in animation can enhance warmth.
Step 2: Viewing an incident
At this step, the safety analyst needs to decide whether they should create an incident and alert the school or resolve the incident.
Highlighted issues:
Poor visual hierarchy of item details
Unnecessary work queue section
Lots of visual clutter
Stress-inducing elements
Key Changes:
Remove work queue section and replace it with a menu header that reduces visual clutter and optimizes screen space
Also includes a button to exit the queue and gets rid of the duplicate Exit button on the bottom footer
If needed, can also show the item queue count in the header to gauge workload and queue type for context into urgency
Turn drawer into a container to get rid of the double drawers when they create an incident. Ensures that the left panel remains accessible.
The big red and green buttons felt overwhelming and dominated the UI. Lighten the button colors before a decision is made to reduce stress and improve focus on the content.
Improved layout and spacing for readability
Inside the item details container:
Remove items that users don't use or notice to reduce unnecessary clutter
Improved visual hierarchy - Group details in 3 sections in a logical and chronological way, so it makes scanning details faster and helps visually separate the info for readability.
Add a “Copy all together” button to reduce 4 clicks into 1.
Make the timer a neutral color to make the process less stressful
Step 3: Create an incident
If the safety analyst decides that they should alert the school on the incident, they will create an incident and it will open a drawer.
Highlighted issues:
Overcrowded layout with 2 drawers open at the same time.
Lots of visual clutter
Key Changes:
Push item details to the left and open drawer to the right . At this point, they are focused on creating the incident. So, hiding it maximizes the workspace for incident creation and minimizes distractions from unnecessary details. They can still access the details by dragging or scrolling.
Put the content category descriptions as a tooltip. This information is only useful when a user is learning categories. Tooltips keep it accessible for new users without cluttering the UI. Similarly, remove “major” and hot keys since its unclear and unused.
Add next button. Instead of not showing the button or showing disabled buttons, allow the user to press the button and provide feedback on what they need to do. (i.e. if they didn’t select a category, tell them) This gives them a pause before moving onto next section and allows for inline error messaging.
Add label for attribute type to prevent confusion. Previous UI doesn’t make it clear that analysts must select one of the buttons to move on.
Step 4: Send emails
Once the item has been categorized, the safety analyst will send emails to alert the school staff.
Highlighted issues:
Inconsistent design
Poor user feedback
Visual clutter
Key changes:
Inconsistent design
Poor user feedback
Visual clutter
Result
The redesign led to a 35% increase in user engagement and a 25% boost in conversion rates within the first quarter post-launch. The new branding received positive feedback from both customers and stakeholders, solidifying Zenith Finance’s position in the market as a modern and reliable financial services provider.