Client: GoGuardian

Goal: Design a user experience for customers to visually see how their filtering groups are “inheriting” certain rules. This was a complex problem due to having so many moving parts. After consulting with our engineering team to wrap my head around the architecture, I went to work sketching potential solutions. The visualization started to take on requirements:

  1. Needs to be accessible in many areas on the app, without resetting current workflow. For this reason, a responsive modal was a logical choice.
  2. Needs to support “lazy loading” — the visualization would take a few seconds to fully populate while our server did heavy lifting; so loading state was important here.
  3. Needs to show several dimensions of data in an intuitive way

ui_inherit_modal_gga

The sketches evolved into full UI (pictured above), and were then implemented into GoGuardian’s primary product, Admin. This workflow is now one of the most popular within the GoGuardian Admin product, used by thousands of schools in the United States to protect millions of K12 students online.

Tools Used

  • iPad Pro with Apple Pencil
  • Sketch
  • Adobe After Effects