Crafting A Design System
Crafting A Design System
Embedded Files
Company and Sector: Verta Inc (AI/ML Platform)
Objective: Establish the first ever design system for an AI/ML startup.
Role: Design lead
Project duration: 3 months
Overview
Verta, an AI/ML startup acquired by Cloudera in 2024, operated at a rapid pace of feature development.
Strong need for a design system for consistency and efficiency.
Enable focus on UX problems and creating customized client workflows.
Process:
The first attempt
I started by identifying the core components across all features - buttons, alerts, breadcrumbs (total 20).
After reviewing the list with the CEO and Development lead, I started working with an intern on the first draft of component design.
We studied established design systems like Carbon, Material Design, and Lightning.
Our first draft fell short, lacking detail and revealing significant gaps in usage, anatomy, and interaction.
Phase 2: Learning and adapting
We took the feedback from our first draft and refined our template. This led to the creation of a simple template with clear sections for Types and States, Anatomy, Usage Scenarios and Notes - for interaction behavior, special treatments.
This revised template proved effective and became the blueprint for the remaining components.
Template for the components
Phase 3: Building the system
With the requisite template in place, we moved forward with creating the core components. Following a consistent design, review, and publish cycle, we successfully launched our first iteration of the design system, featuring 20 essential core components.
Samples of components developed
Samples of components developed
Learning
Learning
Bridge communication gaps
Documented design decisions and interaction behavior using old fashioned pink notes to capture the thinking for remote development team.
Greater need for speed
Prioritized simplicity and accessibility over creating time consuming, immaculate design prototypes.
Focus on documentation
Clear written documentation, simple PDFs with annotated component designs ensured accurate information transfer, allowing developers to review instructions and notes at their own pace.
Success
Success
20
core components
25%
less design time
Consistency
with brand values
Page updated
Google Sites
Report abuse