Cymantix Design System

About

Building a multi-software design system from the ground up, connecting interdisciplinary teams with a common design language foundation.

UX UI DESIGN
DESIGN SYSTEM MANAGEMENT
DOCUMENTATION
ACCESSIBILITY

Team

Lead Designer — Trina Tuazon
Experience Officer — Elizabeth Nguyen
Front-end Engineers — JoJo Yang, Yichen Yu

Problem

Since 2021, Cymantix lacked any formalized design system. The company heavily relied on back-end engineers to carry out both form and function, without any real visual language. Each component was redesigned over and over again, without one source of truth that everyone can refer to.

  1. Conflicting ideas on direction

  2. Inconsistencies between web, branding, marketing teams

  3. Multiple components with the same function

  4. Siloed teams

Challenge

How might we create a visual language that can cover all products within the Cymantix umbrella? How might we build this using accessibly compliance? Lastly, how might we align and manage a system throughout all Cymantix teams?

Foundation

The Cymantix Design system is structured to be scaled for each brand. The trick to a successful design system is to establish a foundation. The foundation of a design system should consist of a few things: spacing and grid system, brand colors, typography.

Spacing & Grid System

I decided to use an 8-point grid system for this project. Since most Cymantix products are used as web-based solutions, I used a 12-column grid to support a web-responsive system.

Brand Colors

Our client wanted the brand colors to be reminiscent of child-like qualities of fun and curiosity. Extensive color research centered around accessibility and brand were used to create a functional and expressive color palette.

Typography

We introduced a typescale that was based on display headings, utility headings, paragraph styles, and supporting styles. The font, Be Vietnam, is well suited for startups and tech companies. It is engineered for optimal readability and connotes a modern and trustworthy tone.

Component Library

The component library is a collection of reusable components scattered throughout the entirety of the user interface. Reusable components are key to scaling frontend development without losing control over UI consistency.

Buttons

Each button was broken by Size, Variant, State, Icon, and Feedback. With all the different properties, we came up with a total of 560 unique buttons. Our goal was to lead with accessibility in mind. This meant continuously testing for color contrast and size for those with visual disabilities.

Responsive Design

Using Figma, we were able to create different variations on components using multiple breakpoints for responsive design.

Interaction Design

Each component was organized with interaction examples so that expected interactive states are clearly communicated.

Accessibility

Design systems are only useful if it’s accessible. We focused on accessibility requirements as a set of design constraints to help create a better product. Since most of our contracts involve government entities, we wanted to best align design efforts with ADA and WCAG standards

We focused on testing all of our brands’ color systems to ensure sufficient color contrast throughout the design themes.

Color Contrast

Feedback and error states helps users complete tasks. Users with disabilities may interact with content in atypical ways. We designed feedback states to mitigate any potential mistakes. This means combining our brand themes with utility colors and feedback states (error, success, warning) paired with help text.

Feedback

What’s Next for Cymantix?

The role of a design system designer is no easy task. We iterate, change, and learn a lot as the software scales. Currently, Cymantix is working on building and rebuilding new and existing softwares using hit design system and hope to implement these changes by 2023 fiscal year.

Looking back at our successes and losses, we learned some valuable lessons:

  • Design Systems are ongoing — They are living systems that require time and attention to actively grow and maintain. These systems provide technical limitations to keep a consistent design language throughout the Cymantix-sphere. Facilitating adoption is a challenge worth undertaking.

  • Accessibility adds a layer of complexity — Designing with accessibility in mind should always be a priority. Of course, this doesn’t come without its challenges. Since most of Cymantix contracts were government-based, we had to consider a lot of accessibility limitations that we wouldn’t otherwise consider. However, defining accessibility requirements and getting buy-in at all levels of the organization from the beginning will impact conversations down the line.

  • Building these systems take time — If you find yourself embarking on the journey of building a design system from the ground up, set reasonable timeline expectations. Design Systems take time, communication, and full support from cross functional teams.

As the Cymantix continues to scale their business, the library of tools and resources is thoroughly laid out so that adoption of this system can be used by teams moving forward.