GoGuardian Beacon Dashboard

RESEARCH / STRATEGY / LOW AND HIGH FIDELITY UX MOCKS / ACCESSIBILITY / VISUAL DESIGN

GoGuardian Beacon is a student suicide prevention tool used by school staff. A dashboard was designed to give enterprise customers from large school districts a high level overview to track alerts from different schools. Release of the dashboard resulted in the following:

• 14% increase in the number of resolved alerts after one month

• 38% increase in NPS

• Helped close a 300k package deal with a school district

• Finalized a 3 year deal for over 400k with multiple school districts

The Problem
The existing alerts page only serves as a repository of generated alerts, which makes it difficult for enterprise admins to track status of alerts across different schools for reporting. Additional challenges included:

• Threat of Customer Churn

• Large design and engineering effort
  

Questions
Before diving into research, I had some questions I wanted to get clarity on:

1. What problem do we need to verify?

2. Which users will the new dashboard impact?

3. What are the different needs and user flows?

4. What top metrics do users want to see on the dashboard?

The Team
I led and executed the entire UX design cycle from research to engineer handoff. The team consisted of Product Manager, General Manager, Lead Engineer, UX Copywriter, Data Scientist, Implementation Specialist, Safety Support, and Customer Success.

Duration

The release was separated into two design phases which included research. Phase Zero was completed in 7 weeks and Phase One lasted 12 weeks.

UX Project Plan

I started off by creating a tentative UX Project Plan for stakeholders to keep track of my progress, access related resources, and comment along the way.

Personas / Jobs to be done Workshop

I wanted to dive deeper into the different customer types that would be using the new dashboard and facilitated a workshop with stakeholders who had extensive knowledge of the Beacon customer base. This workshop included the General Manager of Beacon, Product Manager, Customer Support, and Implementation Specialist. The goal of the workshop was to identify specific user types and their permissions levels depending on user goals, frustrations, influences, environment, and roles. Three different personas were created based on the activity.

Surveys

I sent out a survey to customers to get an idea of needs for the dashboard depending on the size of the organization and role. I also wanted to understand top information users expected to see on the dashboard.

User Research Calls

I also spoke to 5 of our top customers to ask them a series of questions regarding their journey. This was followed by a drag and drop exercise to identify the most important metrics they wanted to see on the dashboard.

Sharing Findings

The research notes were taken within Confluence and synthesized to create a high level summary. The findings were presented to stakeholders along with UX recommendations based on feedback.

Low Fidelity Mocks

The sorting activities during research helped me organize the most important information users wanted to on the dashboard. I explored various layouts and design options leveraging colors used in other GoGuardian product dashboards. I also shared the designs with the design team to get feedback.

Further Color Exploration

Inspired by illustrations created by the Marketing team, I worked with a Graphic Designer to incorporate images and experiment with alternative color palettes.

Data Visualization Research

I also took an online course on mastering data visualization and read articles on Medium, interactiondesign.org, and the Nielsen Norman Group to keep up to date with recent trends. I then collaborated with other UX Designers to discuss, document, and implement best practices to ensure consistency across all product suites.

Handoffs and Accessibility

For the Final designs, I implemented new colors pulled from illustrations. The layout was also updated to draw the eye to most important information which is the number of alerts generated. An illustrative banner was added with a greeting for a more personal experience. Before hand-off to Eng, I worked with a third party accessibility vendor to walk through the mocks to get additional feedback to improve inclusivity in the designs.

Final Thoughts

The release of the dashboard increased task success, NPS, and customer adoption as well as reduced customer churn. I was also able to track frequency of use, areas with most usage, and identify typical user flows via segment events in Amplitude to prepare for the next phase release.