Overhauling EdTech's top web filter to protect over 23 million students
Role:
Senior Design Lead
·
Company:
Lightspeed
·
Year:
Q3-Q4 2023
I was tasked with leading a complete design overhaul of Lightspeed's core web filter product that manages web traffic and device permissions for 23 million students internationally and drives over $60M in annual revenue.
CHALLENGE
Challenge: How might we rethink web filtering for IT admins from first principles to better protect kids online?
The legacy product suffered from a cluttered user interface, burdened by excessive rules, toggles, and settings. This complexity extended to policy and group management, which was cumbersome and required frequent navigation between different group interfaces. Additionally, troubleshooting policies was challenging due to the intricate system of combined policies and inherited rules applied to users and groups across school district.
Business objectives
- Increase retention / decrease client churn
- Increased net new clients
- Achieve 80%+ client switch-rate to the new system (during summer months)
SOLUTION
Solution: An innovative web filter product designed from the ground up to save IT Admins time and school districts money.
I led design for a comprehensive design overhaul, resulting in completely new information architecture, a refreshed user experience with more organized page layouts, clearer hierarchies, and streamlined settings. Policy-to-group relationship management became easier and more time-efficient, as all policies could be managed from a single location. And troubleshooting policies was simplified by assigning discrete policies to users and groups, eliminating the complexity of inherited rules.
Business outcomes
- Under development
Final Result An image of the main navigation showing simple cards that lead to the three core areas of the new product experience.
DESIGN WALKTHROUGH
Compact policy view
The legacy experience (shown below) was cumbersome, with over 30 web categories, subcategories, and disorganized filtering features that were hard to find. I aimed to compress key areas of the policy experience, improve the page hierarchy, and update the toggles and controls to modern UI best practices. This allows IT admins to easily understand system settings at a glance.
❌ Old policy details The legacy experience featured a long, disorganized list of web filter rules, requiring extensive scrolling during setup and troubleshooting.
✅ New policy details The new web policies detail page was designed to reduce scrolling by reorganizing the hierarchy and compressing key modules.
DESIGN WALKTHROUGH
Contextual web category blocking tool
By drawing inspiration from various industries and UI/UX best practices, I developed a new method for managing categories. Inspired by Apple's screen time management tool, the new approach allows users to easily block and unblock categories and quickly understand each category's description for more context.
DESIGN WALKTHROUGH
Simplified policy management
In the legacy experience, IT admins had to switch to a different interface to view policy rules assigned to a school or district within a region, with rules potentially inherited between groups. To simplify this, I proposed a 1:1 relationship between policies and groups, allowing them to be viewed in one place and saving IT admins valuable time. Furthermore, I was able to convince key engineering stakeholders to abandon our outdated inheritance structure for simpler nested list layout which kept some of the core benefits of the legacy system.
❌ Old policy management experience The legacy experience required switching between different user views in order to understand and troubleshoot policy rules for different users and groups, a process that could take hours.
✅ New policy management experience I advocated for a simpler approach to policy management which involved a 1:1 policy-group relationship that could be viewed and managed in a single place, saving IT admins time an money.
DESIGN WALKTHROUGH
Global troubleshooting tool
Previously, if a student needed access to a site, an IT admin had to navigate to the student's profile, review all applied policy rules, and then modify the relevant policies. This process could take hours. With the new policy-group relationship, I designed a global troubleshooting tool accessible from anywhere in the product. This allows IT admins to quickly link web policies to their impact on users and groups, enabling more efficient troubleshooting.
❌ Old troubleshooting experience The cumbersome legacy experience required locating a student, identifying which specific rules were affecting their web experience, and then finding the policy to make changes.
✅ New troubleshooting experience I introduced a new global troubleshooting tool that allows IT admins to quickly diagnose issues from anywhere in the product.
DESIGN WALKTHROUGH
Secondary research & cross-team collaboration
This project required close collaboration with Product and Engineering partners to address all technical implications affecting the final design. The filter product was used by diverse stakeholders, each with unique and extensive needs. Ensuring the design met these varied requirements was crucial to the project's success.
My Product partner and I used Miro to compile all design and technical requirements which helped to improve communication with the larger Engineering and Product teams.
Zoomed in view of some of the Miro requirements including client feedback and a breakdown of different technical approaches to inherited policies.
I used Maze to conduct extensive usability testing around the new IA and updated categories module.
I conducted a user study with several high value clients to collect level feedback around our new information architecture and core feature set.
Snapshot in-progress documentation created before an official hand-off to Engineering.
Team acknowledgement
The success of this project would not have been possible without the contributions and support of my amazing team members.
- Brook McShane Bock, Chief Product Officer
- John Clark Cochran, Senior Design Lead
- Matthew Burg, Senior Product Lead
- Derek Laurie, Senior TPM
- Rob Chambers, Vice President, Platform Strategy
- Ryan Bond, VP, Engineering