GoGuardian - Galaxy Design System
Designed GoGuardian's design system Galaxy to help improve the productivity of designers and engineers
Interaction Design | UX Design | UI Design | Motion Design
Designed GoGuardian's design system Galaxy to help improve the productivity of designers and engineers
In the summer of 2019, I worked at GoGuardian as UX Design Intern located in Los Angeles, California. GoGuardian is an Ed-Tech company that provides K-12 schools and districts with software for safe access to online educational content along with technology management.
Galaxy was initiated by the design team to create the latest design components and design code for the Design and Engineering team. The aim is to increase the productivity for both teams and have a consistent design style for all GoGuardian products.
Since the project was in its initial stage, as an intern, I was assigned to take over the project and collaborate with the Design Manager to bring in some fresh perspective. I was responsible for creating, setting rules, and iterating on some of the major design components.
Research, Ideation, Created rules, Visual Design, Interaction, Motion Design, Usability Testing
10 Weeks | June - August 2019
Sketch, Principle, Invision, Craft, Contrast, Abstract, Confluence
Design Manager, Engineer & Myself
To create a foundation for the design system that can help designers and engineers to have a consistent design on all the products.
The initial designs for GoGuardian products had no standard design guidelines, which resulted in redundancy in design components and inconsistent design across products.
The following are the highlights of the main components I designed and set rules:
Designed a universal search bar to implement on the product's dashboard and internal pages.
Designed three sizes of dropdown menus: small, medium, and large based on the character limit.
Designed four sizes of modals as per character limit along with destructive message and form fill up modals.
Designed three sizes of text fields based on character limit along with four variants: Normal text field, text field with subtext, text field with optional tag, and error state text field.
Designed four types of information card and seven types of action cards.
Designed two types of list view tables normal and compact view with three variations.
Designed three states of the checkbox: unchecked, checked, and multiple checked state.
Designed two variants of accordions for the drop-down checklist and FAQ section.
Designed the primary filter dropdown menu for all tables.
Designed the main buttons for all products: primary, secondary, tertiary, and delete buttons in default and hover state.
GoGuardian products are mostly for IT Admins to manage devices, filter content for safe digital learning.
Some of the core GoGuardian products are for teachers for classroom management and digital learning.
Few GoGuardian products are for the counselors to monitor and ensure the overall well being of students.
The design team set three principles to follow while creating the design system. All components must adhere to these goals.
There should be no inconsistencies, and every element in the design system can apply to all the products without looking off-brand.
Aim to make collaboration easy between and within teams.
The design system should serve as a strong and flexible foundation such that it gives you a basis while still allowing customization.
Aim to shift efforts from production work on to the design system to reduce the team's time for more creative problem-solving tasks.
The design system should be a comprehensive source for design and engineering teams to look for design guidelines.
Aim to provide an informative system to share knowledge across and within teams more efficiently.
It’s difficult to create a consistent design without defining the spacing relationships of the elements in a page. Therefore we adapted to the 8-point system using multiples of 8 to set dimensions, padding, and margin of both block and inline elements. Also, the majority of screen sizes are divisible by 8.
Enables us to:
• Create flexible components for various screen sizes
• Eliminate need for engineers to guess padding/sizing/spacing
• Eliminates pixel fitting
• To lay a foundation for responsive design
World Wide Web Consortium (W3C) creates open standards that ensure the long-term growth of the Web. To become compliant with Federal Accessibilities standards, we needed to ensure that the products are accessible for our users.
Text Contrast Ratio:
• 4:5:1 ratio for small text
• 3:1 ratio for large text
Forms:
• Have Text Labels for each field
Color:
• Ensure that there’s sufficient contrast
• Not to solely rely on color to be the only differentiator
• Use symbols along with color
We started brainstorming designs by involving different perspectives in the process.
Design Manager and myself had a weekly white-boarding session and invited other designers to brainstorm ideas and show them the progress each week for approval.
To get different perspectives and to ensure that our designs make sense, we hosted a few workshops with the engineers and marketing team and asked them to draw and critique our designs.
We took inspirations from Material Design, Polaris, and Lightning design systems as they serve diverse users with different technology experiences.
We had weekly meetings with the entire design team to do A/B testing of design components to get feedback. We emphasized on it until approved, ready to be updated, and available to the team.
After designing all the components, I documented the rules for each component to help teams use as a guide when using or modifying them.
Following is the breakdown of how we aim to maintain and update the Design System for designers.
The updated design system is currently being used by the design team to design new products and update the design style for legacy products feature by feature.
Since my internship came to an end, the Design Manager is working along with the engineering team to build design tokens and add it to the code base.