Design Systems

Create a modern, user-friendly design system that enhances Cordial’s visual identity and fosters a positive user experience.

Overview

Challenge

Our product’s design system was outdated, misaligned with brand standards, and causing inefficiencies in the design-to-development workflow. Inconsistent UI patterns led to a fragmented user experience and slowed down feature development.

Objective

To modernize the design system, enhance brand consistency, and improve scalability for future product growth. A unified design language would streamline team collaboration and ensure a more cohesive user experience.

Impact

Increased adoption of the design system, improved UI consistency and contributed to a significant increase in our sales pipeline. The refresh also reduced design and development time, allowing teams to ship features faster with higher quality.

01 Design Audit

-Cordial Design system
-Component Libraries
-AAA Design systems

02 Brand Alignment

-Brand and Marketing
-Foundations

03 Design Execution

-XD to Figma
-Components
-Architecture
-Documentation

04 Development

-Applying the new library

05 Post Development

-Handoff
-Timelines
-Pipeline

Dashboard - Channel performance_edited.jpg

Challenges

Overuse of primary color, accessibility issues with font size, inconsistent font styles, poor accessibility standards with buttons, inputs, and their different states.

Improper use of greys with flat design and muted data visualization colors

Navigation awareness issues when nav is collapsed causing system adoption and ramp up issues

Brand Alignment

We collaborated closely with the brand team to ensure the design system aligned seamlessly with updated brand standards, creating a more cohesive experience across marketing and product.

AAA Systems

We drew inspiration from AAA design systems like IBM Carbon, Adobe Spectrum, and Shopify Polaris to inform our structure, ensuring scalability, accessibility, and best practices in component design.

Library Migration

Migrated to Figma, leveraging variables, semantic tokens, static tokens, and variants to create a scalable, consistent, and more flexible component library that improved design handoff and development efficiency.

Token structures

{category-type-subcategory-state}

--global-color-text-disabled

--color-gray-700

#858585

Robust Components

We leveraged Figma to build a more robust and scalable component library, utilizing variants, variables, and structured naming conventions.

This transition also eliminated redundant components from Adobe XD, streamlining the system and improving efficiency for both design and development.

Structure and Documentation

Created a well-organized component library, clear documentation, and structured pages for easier discoverability and adoption.

Implementation

The Cordial Modern Refresh involved a comprehensive reskin of the entire platform, updating approximately 40 views to align with the new design system.

This included key areas like the content builder, orchestration workflow builder, data visualization dashboards, and code editors, ensuring a consistent and modernized experience across all functionalities.

Success!

The modernized design system streamlined developer handoff, making component and project work more efficient by reducing ambiguity and ensuring consistency.

This led to faster project timelines with fewer UX and QA review cycles, and in the following quarter, we saw the company’s largest pipeline and sales milestone.