AlignAI Design System

Project Overview

Role:

Product Designer

Duration:

March - May 2023, current

Client:

AlignAI

Tools :

Figma, Jira, Notion

My Role

I was the sole designer responsible for creating the design system during this project. I created all foundational elements of the design system and user interface components with documentation.

Opportunity

Develop and implement a design system for AlignAI’s web app to bring consistency, enhance accessibility, and elevate usability across the user experience.

Outcome

AlignAI’s design system was completed in May 2023, with continued updates to meet changing product needs.

Problem & Objectives

Opportunity Revealed by Usability Heuristic Evaluation

One of the challenges to an ever-evolving digital product is consistency. While AlignAI’s product was poised to fill unmet needs for enterprises that are adopting Artificial Intelligence, the many iterations the product underwent yielded inconsistencies.

Shortly before my arrival, the design lead completed a usability heuristic evaluation that revealed areas for growth. This analysis showed a need for more consistency and clarity. The solution was a single source of truth- a design system.

Aiming to Streamline and Adapt

Unified Design Language: The primary goal was to establish a unified design language that reflected the brand's identity and values. This involved defining core design principles that would guide the aesthetic and user experience throughout the application.
Efficient Collaboration: A library of reusable UI components and clear guidelines were needed to enhance collaboration between design and development teams. This aimed to improve efficiency, reduce redundancies, and ensure a seamless workflow.
Scalability and Adaptability: Anticipating the growth and change of the application, we needed a system that would grow with us. The design system must maintain a consistent and visually pleasing UI as the product evolves.

Role & Outcome

Impactful Responsibilities

Foundations

Created foundational elements that consisted of a color palette, typography scales, spacing systems, grid systems, and imagery guidelines.

Component Library

Designed a library of reusable user interface components that used the brand theme established at the foundational level.

Feasibility & Level of Effort

Collaborated with developers throughout the process to ensure feasibility around design choices and low engineering level of effort.

Documentation & Governance

Wrote clear documentation guidelines alongside the component library to clarify use, with clear examples and non-examples.

Accessibility

Ensured all foundational elements and UI components were created with accessibility in mind, including meeting WCAG 2.1 AA color contrast requirements and input feedback.

Cohesive & Streamlined Results

Consistency Across Pages: Implementing the design system resulted in a cohesive user interface, ensuring a consistent visual experience across all pages and features of the web application.
Efficiency Gains: Design and development teams experienced increased efficiency due to the availability of a centralized library and clear guidelines. This streamlined workflow allowed for faster iterations and reduced turnaround time.
Scalability and Adaptability: As the application evolved, the design system demonstrated scalability and adaptability, seamlessly accommodating new features and updates while maintaining visual coherence.

Foundations

I divided the design system into two parts: foundations and components. I started by establishing the color palette, typography, page grids, elevations, conventions for page layouts, and guidelines for imagery. I also chose an icon library and narrowed it down to a subset of styles within the library.

A purple and white color swatch is run through an accessibility checker. It meets WCAG AA and AAA contrast ratios.

I carefully curated a color palette with defined primary, secondary, and accent colors. This added vibrancy to the interface and established a hierarchy that guided user attention to key elements. While choosing the color palette, I continuously checked color contrast levels to ensure compliance with WCAG 2.1 AA accessibility guidelines.

I then leveraged color variables to improve the consistency of the design and reduce the margin of error for production. I created primitive-level variables from the color palette I defined and then aliased them into the semantic layer. This met the needs of the UI without increasing the level of effort that would've occurred with aliasing into a component variable layer.

A list of semantic color variables attached to primitive color variables.

A list of various font styles in the design system.

Selecting typefaces, font sizes, and spacing, I created a typographic system that ensured readability and maintained a cohesive visual identity. The typography system was implemented consistently across the application.

A set of scalable and recognizable icons was developed to enhance user comprehension of actions and information. These icons followed a consistent style and meaning, creating a cohesive and intuitive interface.

Components

I designed a comprehensive library of over 36 reusable user interface components. Each component adhered to the established design principles, contributing to a cohesive visual language and user experience.

A button with component properties that allow toggling an icon on and off.

I leveraged the power of Figma’s component properties to minimize the number of variants. When using instance swap, text and boolean properties with intuitive naming conventions, I’m able to improve the experience of designing with the components.

In creating each component, I created documentation with guidelines. These guidelines included examples and non-examples to help illustrate each point. I wanted to ensure clarity and support comprehension for other current and future designers at the startup.