Summer 2022
GoGuardian Admin: Reporting and Insights
Redesigning the IT Admin dashboard to provide more insightful, relevant, and actionable data for better decision-making and user experience.
Team and Process
Team
User Researcher
Adrienne Tucker
Led interviews and surveys to gather insights from IT Admin users.
Product Management
Darian Spicer
Ensured alignment between user needs and product goals.
Lead Product Designer
Jules Bennett
Translated research insights into actionable design solutions.
Process
1
Generative Research
Conducted user interviews and surveys to identify pain points and areas for improvement.
2
Prototyping & Testing
Iterated on designs with user feedback to refine and improve the experience.
3
Design handoff and QA
Delivered finalized designs to engineering with full specs for development, followed by QA testing to ensure accuracy.
The Problem
The current GoGuardian Admin reporting experience falls short of the needs of K-12 school IT admins who rely on it to filter and monitor student digital behavior.
This leads to frustration and inefficiency, as admins struggle to make informed decisions due to irrelevant or non-actionable data.
An image of the current state dashboard
“The dashboard is the least useful page in GoGuardian.”
IT Admin
Users report the data is neither actionable, relevant, nor accessible.
Through 27 user interviews and a survey with 40 IT admins, we identified three key pain points:
Data Isn’t Relevant
Admins need data that highlights problematic behavior or potential filter bypasses, not just top student activity.
Data Isn’t Actionable
The current dashboard lacks clear connections to actions IT admins can take based on the data.
Data Isn’t Accessible
Much of the data is hidden or inaccessible on smaller screens (less than 1920px), affecting usability.
The Solution
Project Objective
Update GoGuardian Admin’s reporting tools to deliver more relevant and actionable data, helping IT admins improve filtering efficacy.
Key Guiding Principles
1
Design for a non-technical user
2
Design to include data that is relevant and actionable
3
Design to make filtering more efficacious and proactive
4
Design with accessibility in mind
5
Design to accommodate various screen sizes
6
Design to help users feel more confident in their filtering
Personas
Two personas guided our design decisions:
Linda the Librarian
Limited technical experience but handles tech issues at a small school, managing content filtering requests and complaints.
Abe the IT Admin
Highly technical, manages filtering and monitoring at a large school district, constantly troubleshooting issues to keep students safe and productive online.
Note: More detailed personas are available in another project.
Scenarios and User Flows
Scenario 1
Linda Unblocks a Website
Linda receives teacher complaints about Wikipedia being blocked. On the dashboard, she sees it’s categorized under Academic Dishonesty and unblocks it.
“Ugh…why is this site being blocked? Oh, I see! It’s being miscategorized. I need to unblock that specific site.”
Linda the Librarian
User flow
Teachers report Wikipedia is blocked.
Linda logs in to GoGuardian.
Dashboard shows Wikipedia as a top blocked site, categorized as Academic Dishonesty.
Linda checks rules and emails teachers.
She provides feedback on miscategorization.
She unblocks wikipedia.
Low-fidelity proposed solution
Content Dropdown: Toggle between content types like blocked websites.
Category Tags: View category tags for browsing events.
User Actions: Take action directly from the dashboard.
Scenario 2
Abe Troubleshoots an Unfiltered Student
Abe receives reports of Sue accessing Instagram. He discovers Sue is offline and not covered by a policy. He uses a troubleshooting guide to get her back online.
“Why is Sue able to access Instagram? Oh, it looks like she is offline! How can I get her back online and covered?”
Abe the IT Admin
User flow
Abe is notified of Sue’s access to Instagram.
He logs in to GoGuardian.
Dashboard shows Sue offline for 12 days.
He emails teachers with an update.
Abe troubleshoots and checks that Sue is now filtered.
Low-fidelity proposed solution
Student Dropdown: Toggle between different student reports.
Student Actions: Export or act on student reports.
Support Information: Access troubleshooting tips.
Scenario 3
Abe Reviews Category Activity
Abe notices increased student activity in the "Clothing" category. He filters to see more details and decides to block this category for middle school students.
“It looks like there is a lot of traffic in the Clothing category. Maybe we should block it?”
Abe the IT Admin
User flow
Abe learns students are shopping for clothes.
He logs into GoGuardian.
Dashboard shows increased activity in the "Clothing" category.
Abe consults with staff and decides to block this category.
Low-fidelity proposed solution
Data Type Toggle: Switch between different data visualizations.
Granular Filters: Filter data by categories.
Updated Chart: View more relevant data visualizations.
Initial testing results
Usability testing
After 8 usability tests, we found significant improvements:
1
Actionable
Data insights were considered actionable and aligned with user goals.
2
Proactive
Insights enabled proactive decision-making, rather than reactive.
3
Useful
Metrics like time spent and number of students added value.
4
Valuable
Slight increase in NPS score
“I’m able to do pretty much everything from the dashboard itself, and there were things I didn’t even know I could do.”
IT Admin
Survey Results
Survey of 51 users confirmed the new insights were more valuable than the current dashboard data.
Current data
New data
Students online
Blocked reason
Top activity
Smart alerts
Unfiltered students
Top blocked students
Top blocked activity
Time spent on Edu. content
Top uncategorized activity
Time spent on each category
More frequent
Less frequent
Less important
More important
Hi-fidelity designs
Before and After
The updated reporting and insights experiences reduces cognitive load while providing more actionable, relevant, and configurable data.
Dashboard
Built from usability feedback, the high-fidelity prototype includes actionable insights and streamlined data.
Entity details page
Updated design applied to pages for websites, videos, searches, etc.
View more drawer
New filters added to make navigating reports more flexible.
“The changes made to the dashboard are more informative and better looking. It is easy to see and navigate around.”
IT Admin
Responsive design
The design ensures users can access reports on any device, improving flexibility and usability.
Impact and Handoff
The design led to meaningful improvements across key UX metrics.
Summative Testing Results
↑ 17%
Ease of use when completing key tasks
↑ 12%
Perceived ability to keep students safe
↑ 15%
Actionability and relevancy of data
↑ 29%
Perceived attractiveness of updated UI
Note: 50 usability tests were conducted, unmoderated, with two cohorts representing diverse market segments and roles. Each cohort was given tasks in varying orders to minimize order bias.
“This adds some nice features to make data more readily accessible instead of digging through menu options.”
IT Admin
File Preparation and Handoff Strategy
Phased Approach: We structured the handoff into phases, allowing each phase to build on the previous one. This incremental approach made the handoff process manageable and effective.
Incremental Approach: We organized key flows into sections, providing clarity and focus for the development team. This breakdown helped developers understand the context and made the handoff process more efficient.
Reflections
Minimizing Bias in Research
Collaborating with an expert user researcher helped me recognize and reduce biases during the design and evaluation phases. The research methodologies they introduced were key to ensuring that design decisions were based on accurate user feedback.
Tackling Incremental Progress
Redesigning a substantial portion of the user experience can be daunting, so we broke the project into smaller, well-defined epics. This allowed the development team to make steady, manageable progress and helped prevent feeling overwhelmed by the scope of the project.
Ensuring Alignment on Foundations
As development progressed, I realized that the UI was not fully leveraging the foundational layout upon which the design was built. This experience highlighted the importance of clear communication during handoff, particularly regarding invisible but critical design elements like structure and layout.