Mai Le

problem statement

Cyara currently lacks a unified design framework. This results in inconsistencies in user experience, inefficiencies in design processes, and challenges in maintaining brand identity across various products and platforms.

As Cyara continues to experience rapid growth and expansion in its product suite with the sponsorship of K1 Capital, the urgency to establish a Design System that can support scalability and adaptability becomes increasingly critical.

objective

The primary goal is to develop a comprehensive design system for Cyara that encompasses all aspects of design and user experience. This system should standardize design elements, create coherent user interfaces, and embody the brand's values and identity. It should also streamline the design process, enhance collaboration among teams, and ensure a consistent and delightful user experience across all Cyara products and services.

Scope:

• Visual Language: Establish a consistent visual language including color palettes, typography, iconography, and imagery that reflects Cyara’s brand identity.

• Component Library: Develop a library of reusable design components and patterns for web and mobile platforms, ensuring adaptability and scalability.

• Guidelines and Standards: Create detailed guidelines for design principles, usability, accessibility, and responsive design.

• Documentation and Resources: Provide comprehensive documentation and resources for designers, developers, and stakeholders to effectively use the design system.

• Integration and Adoption: Plan the integration of the design system into existing and future products, ensuring smooth adoption by design and development teams.

• Maintenance and Evolution: Establish a process for the ongoing maintenance and evolution of the design system to keep it relevant and effective.

Challenges:

• Ensuring buy-in and collaboration across different teams within Cyara.

• Balancing standardization with the need for flexibility and creativity in design.

• Integrating the design system with existing technologies and workflows (React, Angular, MVC).

• Training and supporting teams in adopting the new system.

Success Metrics:

• Increased consistency in the user experience of Cyara products.

• Reduced time and resources spent on design and development.

• Positive feedback from users and stakeholders on the usability and aesthetic of Cyara’s products.

• Efficient maintenance and iterative improvement of the design system.

Process

1. Audit Existing Components and Decide on Library

We started by reviewing all current products of the Cyara product suite to identify and catalog all existing UI components and patterns. This includes everything from buttons and input fields to larger design patterns like navigation menus. The goal is to understand what components we had which are being reused (or lack thereof), and any inconsistencies that may exist.

A comprehensive research and discussion on which component library to base off of happened in the parallel, to ensure the Design System can support both on-going development projects and existing products.

2. Define Design Principles

Establish a set of design principles that reflect Cyara brand’s values and the goals of Rocket, in collaboration with the Marketing team. These principles will guide the design decisions and help maintain consistency across the product ecosystem.

Colour palette investigation and proposal

3. Establish UI Inventory

Create an inventory of all UI elements identified during the audit. This involves documenting visual properties like colors, typography, icons, and spacing. It’s essential to categorize these elements and begin defining standards for each.

4. Develop a Visual Language

Based on the audit and the defined design principles, the team started developing a consistent visual language for Rocket. This includes detailed specifications for colors, typography, grid systems, and any other visual aspects that will be used across Cyara products.

5. Create a Component Library

Develop a library of reusable components based on the UI inventory. Each component should be designed for reuse and scalability, with variations and states (e.g., default, hover, active) documented. It’s crucial to ensure these components are accessible and adaptable to different contexts.

6. Usage Guidelines, Integrate Code Standards and Documentation

For each component and pattern, write clear and concise usage guidelines. This includes information on how and when to use a component, its variations, and any best practices associated with it.

Code standards and snippets to ensure that the implementation is as consistent as the design are included in the published Storybook. Designers work closely with developers to create these standards and ensure components are built to spec.

Figma is used to share the design libraries, Storybook is used to share component libraries, and Confluence for documentations. Unit tests are written for each component, visualized regression testing is in place with Chromatic, and various accessibility check tools are used throughout the whole cycle, ie. axe, contrast checker, screen readers, and manual testing.

7. Educate and Evangelize

While designing and development is ongoing, we also started to introduce the design system to the rest of the organization through workshops, documentation, and resources. It’s important to get buy-in from both designers and developers, as well as stakeholders. We showed the value of the design system in streamlining the development process and maintaining a cohesive user experience.

8. Iterate and Maintain

A design system is a living product; it requires regular updates, revisions, and governance. In order to maintain it, we also establish a system of processes for the system's evolution, including how components are added, deprecated, or updated. Gathering feedback from users and monitoring the system’s usage to inform future developments are ongoing tasks.

Before

After