WeVideo
2022
Building WeVideo's First Design System
Created and led WeVideo's first design system to improve consistency, accelerate product development, and establish a scalable foundation for future product growth.
Overview
Creating a scalable foundation for product development
As WeVideo's products grew, our designers and engineers were repeatedly building custom UI components to solve the same problems. This slowed design and development, created inconsistencies across the product, and made quality assurance increasingly difficult.
I assembled a cross-functional team with myself as the design system team lead and 2 engineers to build WeVideo's first design system. We established shared design and engineering standards, created reusable components, and documented best practices that became the foundation for our product teams.
Outcome
Reduced development time by 15%
Reduced QA time by 40%
Adopted by every design and engineering team
Established a scalable foundation for future product development
Problem
Custom components were slowing every team down
Without a centralized design system, designers and developers frequently created new versions of existing UI components whenever they needed them. Even simple interface elements like buttons, inputs, modals, and dropdowns often existed in multiple variations.
This created several problems:
Inconsistent experiences throughout the product
Longer design and engineering cycles
Increased QA effort due to component variations
Difficult handoff between design and engineering
Limited scalability as the product continued to grow
Instead of solving larger product problems, teams were repeatedly rebuilding the same interface patterns.
Research
Understanding where inconsistency existed
Before building anything, I wanted to understand the current state of our product and identify where standardization would have the greatest impact.
I audited both our Figma libraries and the live product, documenting:
Duplicate components
Missing interaction states
Accessibility gaps
Naming inconsistencies
Design-to-code mismatches
Frequently recreated UI patterns
Working closely with engineering, we also identified which components consumed the most development time and which primitives appeared most frequently throughout the application.
These findings allowed us to prioritize the work that would create the largest impact earliest.
Goals
Defining success before building
We established four principles to guide every design system decision:
Create a 1:1 mapping between design components and production code
Deliver a consistent and predictable user experience
Build scalable and accessible components
Increase efficiency across design, engineering, and QA
To keep the project manageable, we intentionally limited the initial scope to WeVideo's web platform, where the majority of our users and product development efforts were concentrated.
Process
Building the system iteratively
Assemble the team
I led a dedicated Design System team consisting of myself and two front-end engineers. We established shared ownership between design and engineering from the beginning so every component could be implemented consistently across both disciplines.
Prioritize the foundation
Rather than attempting to rebuild the entire interface at once, we identified the primitives and reusable components that appeared most frequently across the product.
This allowed us to deliver value quickly while creating a strong foundation for future expansion.
Design, build, document
For each component we:
Defined visual and interaction standards
Designed every required state and variant
Built matching production components
Documented usage guidelines
Gathered feedback from designers and engineers
Iterated before broader adoption
By documenting components as we built them, teams could confidently adopt the system without needing additional guidance.
Component design
Token definition
Documentation
Storybook
Outcome
A foundation that scaled with the product
The design system was adopted across every design and engineering team at WeVideo, becoming the default way new product experiences were designed and built.
By removing unnecessary decision-making and reducing duplicated work, the system improved efficiency throughout the product development lifecycle.
Impact
15% reduction in development time
40% reduction in QA time
Consistent user experience across products
Faster design-to-development handoffs
Increased confidence when shipping new features
Established a scalable foundation for future product growth