Galaxy Design System

Project Contribution:

Role: UX Lead (Design strategy, Research and rapid prototyping)
Supervised and assigned design work for: 1 UX Lead, 1 UX Designer, 1 UX Intern
Tools: Sketch, Invision
Making the case for a design system
In a handful of years GoGuardian had managed to capture a significant market share of the K-12 edtech space. GoGuardian had managed to create six different products that met customer demand. All six products were built, operated and looked like distinct products which led to a lack of cohesion between our product suite - this was killing us on the build side. 

When I joined GoGuardian, there were only four designers supporting all six products and an ever growing product management and engineering teams. Both Product Managers and Engineers wanted to engage with us, but there wasn’t enough time or enough designer to adequately give time and attention to every design request. 

There was a lot of redundancies in how designers approached new projects. The design team was fascinated by the problems that we were tackling; but working in the pixel was tedious and ate into our critical thinking time - solving user problems. I started going deep into diagnosing the root cause of our issues. I interviewed each designer and our design manager to see where we could be more efficient. As I went deeper with my investigation, I discovered that we needed a more efficient process of turning out wires/mocks/prototypes  - we needed a design system.

The Pitch Meeting

I worked with our UX intern to audit and document each UI element that was used across all products. Boy did we find a lot of redundancies. We found multiple versions of buttons, dropdowns, navigation, modals, etc... Here's a screenshot of all of the button types that we used in our designs: 
I got the green light to work on our design system but I could only apply 20% of my time; I still had to balance individual contributor work and other DesignOps initiatives. At the time, I was working as the UX Lead for a self service project that enabled our smallest tiered customers to trial, purchase and renew product licenses all within our Org Management product (learn more about this project). My manager had me present my design systems pitch deck to the design team. The presentation worked. The other designers saw the value that a design system could bring. Our associate UX designer and our UX Lead designer decided to chip in and help. We began by identifying our design principles that would guide us in building out our design system. We decided to name our design system - Galaxy, like in the education space, there's much to explore and learn from those that have come before us.

Here are our Galaxy Design System Principles:

Honest + Direct

We aim to evoke feelings of trust, calmness and confidence in our products for our users.

Familiar

We aim to spark feelings of comfort, relatability and predictability for our users in an effort to reduce product cognitive load.

Compassionate

We aim to generate feelings of friendliness, positivity and empathy such that all users to feel cared for.

After doing a couple of rounds of research and meeting with PM's and Lead Designers, the Galaxy team was able to identify that our customer base could be segmented out into three distinct user types:

IT Admin

Most knowledge of tech tools.

Teacher

Intermediate knowledge of tech tools.

Counselor

Least knowledge of tech tools.

Hurdles

We began working on Galaxy with the sole intention of making it for designers and then communicating our findings with Engineering. After attending the Clarity design systems conference in December 2018, I walked away with so much vigor to engage with Engineering as soon as possible, instead of solely focusing on creating Galaxy for the design team. When I got back to the office, reality dropped me to my knees, our engineers were tied up and unavailable. After speaking with a few of the lead front end engineers, it was clear that they liked the idea of having a design system but they didn’t have the capacity to dedicate resources to the project. It wasn’t a soft no or a dismissal but it was a direct order from the top - engineering resources were to fully focus on shipping our newest product - Beacon, a suicide detection and prevention tool. I had to accept the reality that I would have to march forward solely focusing on creating the design system for designers.

After much work we've been able to ship Galaxy. It is now part of every designer's workflow. Here are a few of the components that were created. Here's a link to view a number of these components in figma.

Proving out the value of Galaxy

Now that Galaxy was released, I needed to collect the ROI of the endeavor. Each designer had to create a set of components from scratch and then pull the corresponding premade component alternative from Galaxy. Each exercise was timed and recorded. Here's the link to the series of test scenarios.

As more complexity was introduced, Galaxy was in a league of its own. Here’s some of the feedback that was captured during testing: 

What's the ROI of Galaxy?

Galaxy has been able to give our team 2500 work hours back in a year! Using Galaxy has led to a reduction of 50% less time for designers to spend pushing pixels. This has enabled designers to spend more time solving for user problems, exploring and experimenting via user research and design exploration.

What's next?

After a lot of work, we’ve been able to ship Galaxy. I’m really proud of what we accomplished in 7 months of part time work. Since I work with such an ambitious group, we were able to even identify and create motion states. We intentionally left out illustrations, empty states and loading states (skeletons) to be worked on in Q2 of 2020 by our very talented UI Designers.

We’ve rekindled the conversations with Engineering to start  the adoption process of Galaxy. The interest is starting to peak again from our ENG colleagues. Can’t wait to get our components converted into design tokens and make the lives of Engineers easier.