José Arias

Work

Playground

About

Contact

José Arias

Work

Playground

About

Contact

Wave Design System

Scaling Consistency with a Design System that Increased Team Productivity by 20%

Shipped

A systems-driven approach to unifying patterns, tokens, and workflows, reducing friction and accelerating delivery across teams.

Note: Per a non-disclosure agreement signed by both parties, the name of the client was changed. Elements of the work produced for this project have been modified or omitted in their entirety.

Industries

Social Media
Travel

Tools

Figma
FigJam
Monday
Google Docs

Focus Areas

Strategy
Mobile Design
Web Design
Accessibility
Information Architecture

Team

Head of Product
Chief Technology Officer
Product Designer (me)

Tools

Sketch
Paper sketching

Industries

Healthcare
Employment

Work

Strategy
Mobile Design
Web Design
Accessibility
Information Architecture

Team

Founder
Developer
Caregiver Specialists
UX Design Contractor (me)

Project Status

Shipped 2018

↑ 20%

Boost in cross-functional productivity after system adoption

↑ 20%

Boost in cross-functional productivity after system adoption

↓ 30%

Reduction in duplicate UI components, creating a more consistent product experience

↓ 30%

Reduction in duplicate UI components, creating a more consistent product experience

Source of truth: Unified Figma library aligning designers, PMs, and engineers

↑ 20%

Boost in cross-functional productivity after system adoption

↓ 30%

Reduction in duplicate UI components, creating a more consistent product experience

Source of truth: Unified Figma library aligning designers, PMs, and engineers

Overview

Building a Scalable System for Faster, More Consistent Design

Wave was a mobile-first social network for sharing inclusive travel experiences. Several core workflows were already live, but as new features rolled out, inconsistencies, bugs, and redundant patterns began to surface. These issues slowed design velocity, introduced unnecessary rework, and created friction with engineering.

As the product designer, I led the creation of a scalable design system in Figma that unified patterns, reduced redundancy, and provided a shared foundation for designers and developers. The result: faster delivery, smoother collaboration, and a more consistent product experience.

Overview

Building a Scalable System for Faster, More Consistent Design

Context and Opportunity

Recognizing the Right Moment to Build Structure

The product team was in active development when we realized the cracks weren’t isolated bugs but signs of a deeper problem. Inconsistent buttons, duplicated patterns, and misaligned typography were slowing delivery, introducing avoidable rework, and frustrating engineers.

Pausing briefly to establish a design system wasn’t about brand polish — it was a structural necessity. By addressing these inefficiencies before they compounded, we created an opportunity to enforce consistency, reduce redundancy, and strengthen collaboration between design and engineering.

The Challenge

Unifying Patterns Without Hitting Pause

The real challenge wasn’t just fixing what was already live: it was doing so without slowing down a fast-moving team. We couldn’t afford to stop development, yet continuing without a shared system risked compounding bugs, redundant patterns, and costly rework.

The design system needed to deliver three things simultaneously:

Consistency — a unified set of components and interaction patterns that held across workflows.

Efficiency — faster design and development cycles with fewer redundant handoffs.

Scalability — a foundation robust enough to support future features without collapsing under the weight of ad-hoc fixes.

The task was clear: create a design system robust enough to support long-term growth, but light enough to integrate seamlessly into the existing product pipeline.

The design system needed to deliver three things simultaneously:

Consistency — a unified set of components and interaction patterns that held across workflows.

Efficiency — faster design and development cycles with fewer redundant handoffs.

Scalability — a foundation robust enough to support future features without collapsing under the weight of ad-hoc fixes.

The task was clear: create a design system robust enough to support long-term growth, but light enough to integrate seamlessly into the existing product pipeline.

The design system needed to deliver three things simultaneously:

Consistency — a unified set of components and interaction patterns that held across workflows.

Efficiency — faster design and development cycles with fewer redundant handoffs.

Scalability — a foundation robust enough to support future features without collapsing under the weight of ad-hoc fixes.

The task was clear: create a design system robust enough to support long-term growth, but light enough to integrate seamlessly into the existing product pipeline.

Problem Statement

Inconsistent patterns and duplicated components slowed delivery and introduced rework, demanding a scalable system without halting ongoing feature development.

Problem Statement

Inconsistent patterns and duplicated components slowed delivery and introduced rework, demanding a scalable system without halting ongoing feature development.

Problem Statement

Inconsistent patterns and duplicated components slowed delivery and introduced rework, demanding a scalable system without halting ongoing feature development.

Process and Approach

Building Structure While Shipping Fast

Designing a system mid-development meant I couldn’t slow the team down: the system had to evolve in parallel with active feature releases. My approach was pragmatic: audit, align, and codify reusable patterns in a way that integrated smoothly into ongoing work.

Key steps included:

01_Audit and Consolidation

01_Research and Insights: Identifying the Gaps

Mapped existing flows and UI components in Figma, surfacing redundancies, inconsistencies, and gaps.

02_Pattern Definition

Defined core building blocks (buttons, form elements, cards, navigation) with usage guidelines, partnering with the Head of Product and CTO to formalize documentation for alignment across design and engineering.

03_Collaboration with Engineering

Partnered closely with developers to align Figma tokens with front-end implementation, while the CTO established a shared repository of tokens and components to scale consistency across the product.

04_Iterative Rollout

Introduced the system incrementally, starting with high-traffic flows, so adoption improved delivery speed without halting development.

This dual-track approach allowed us to stabilize design quality while still shipping new features: a balance that kept both design and engineering moving forward.

Solution

Building a System that Scales

To eliminate fragmentation and improve velocity, I built a design system in Figma grounded in reusable patterns and a shared visual language. The system included:

Component library: Buttons, forms, navigation, and layout elements designed for reuse and consistency.

Workflow alignment: A structured process that gave designers and developers a common foundation for new features.

Documentation: Clear usage guidelines to reduce ambiguity and prevent redundant effort.

Engineering integration: Partnering with the CTO, we ensured every Figma component had a coded counterpart, giving developers a production-ready library aligned with our design source of truth.

To eliminate fragmentation and improve velocity, I built a design system in Figma grounded in reusable patterns and a shared visual language. The system included:

Component library: Buttons, forms, navigation, and layout elements designed for reuse and consistency.

Workflow alignment: A structured process that gave designers and developers a common foundation for new features.

Documentation: Clear usage guidelines to reduce ambiguity and prevent redundant effort.

Engineering integration: Partnering with the CTO, we ensured every Figma component had a coded counterpart, giving developers a production-ready library aligned with our design source of truth.

To eliminate fragmentation and improve velocity, I built a design system in Figma grounded in reusable patterns and a shared visual language. The system included:

Component library: Buttons, forms, navigation, and layout elements designed for reuse and consistency.

Workflow alignment: A structured process that gave designers and developers a common foundation for new features.

Documentation: Clear usage guidelines to reduce ambiguity and prevent redundant effort.

Engineering integration: Partnering with the CTO, we ensured every Figma component had a coded counterpart, giving developers a production-ready library aligned with our design source of truth.

Results and Impact

Faster Delivery, Stronger Collaboration

The improvements were measurable and meaningful:

↑ 20% Boost in cross-functional productivity after system adoption.

↓ 30% reduction in duplicate UI components, creating a more consistent product experience.

Efficiency: Designers spent less time reinventing patterns; developers pulled from a consistent component library.

Consistency: UI across new and existing features aligned seamlessly, improving user experience.

Collaboration: The CTO’s coded implementation ensured engineers had reliable, scalable building blocks, eliminating guesswork and tightening the design–engineering feedback loop.

The improvements were measurable and meaningful:

↑ 20% Boost in cross-functional productivity after system adoption.

↓ 30% reduction in duplicate UI components, creating a more consistent product experience.

Efficiency: Designers spent less time reinventing patterns; developers pulled from a consistent component library.

Consistency: UI across new and existing features aligned seamlessly, improving user experience.

Collaboration: The CTO’s coded implementation ensured engineers had reliable, scalable building blocks, eliminating guesswork and tightening the design–engineering feedback loop.

The improvements were measurable and meaningful:

↑ 20% Boost in cross-functional productivity after system adoption.

↓ 30% reduction in duplicate UI components, creating a more consistent product experience.

Efficiency: Designers spent less time reinventing patterns; developers pulled from a consistent component library.

Consistency: UI across new and existing features aligned seamlessly, improving user experience.

Collaboration: The CTO’s coded implementation ensured engineers had reliable, scalable building blocks, eliminating guesswork and tightening the design–engineering feedback loop.

Lessons Learned

Key Takeaways

Systems grow with products

A design system isn’t a one-time deliverable—it’s a living tool that adapts as features expand.

Systems grow with products

A design system isn’t a one-time deliverable—it’s a living tool that adapts as features expand.

Systems grow with products

A design system isn’t a one-time deliverable—it’s a living tool that adapts as features expand.

Early investment pays off

Even a short pause to build system foundations can prevent months of rework later.

Early investment pays off

Even a short pause to build system foundations can prevent months of rework later.

Early investment pays off

Even a short pause to build system foundations can prevent months of rework later.

Act early

Having the CTO implement the system in code ensured Figma patterns weren’t just guidelines but the actual source of truth across design and engineering.

Act early

Having the CTO implement the system in code ensured Figma patterns weren’t just guidelines but the actual source of truth across design and engineering.

Act early

Having the CTO implement the system in code ensured Figma patterns weren’t just guidelines but the actual source of truth across design and engineering.

Clarity builds confidence

By eliminating redundancy and surfacing patterns, the design system gave designers and engineers a shared language that reduced friction and strengthened trust.

Clarity builds confidence

By eliminating redundancy and surfacing patterns, the design system gave designers and engineers a shared language that reduced friction and strengthened trust.

Clarity builds confidence

By eliminating redundancy and surfacing patterns, the design system gave designers and engineers a shared language that reduced friction and strengthened trust.

Previous Case

Next Case

Helping mission-driven orgs design and maintain scalable products.

EXPLORE

Work

Playground

About

Contact

Helping mission-driven orgs design and maintain scalable products.

EXPLORE

Work

Playground

About

Contact

Helping mission-driven orgs design and maintain scalable products.

EXPLORE

Work

Playground

About

Contact