Building OneDay’s Design System as a Team of One

Scaling consistency across mobile and web by building a design system from first principles

Role: Product Designer
Scope: Native mobile + responsive web
Tools: Figma, Zeplin
Impact: 50% faster transition from mid- to high-fidelity design, 20% faster time to development

The Problem

As OneDay’s product matured across native mobile and web, our design work was becoming inconsistent and slower to scale. Designers were recreating UI patterns, engineers lacked a single source of truth, and handoff required frequent clarification. We needed a shared visual and interaction foundation that could support faster product development without sacrificing quality.

My Approach

I led the creation of OneDay’s design system from first principles, structuring it to grow alongside the product.

1. Foundations
I started with the most atomic elements to ensure visual consistency across platforms:

• Color system with semantic usage (success, warning, interactive, etc.)

• Typography scale for hierarchy and readability

• Spacing and layout rules

• Elevation and border radius standards

These foundations created clear guardrails before any components were introduced.

2. Core Components
Next, I built a library of reusable UI components designed for flexibility across both native and web:

• Buttons (states, hierarchy, and accessibility considerations)

• Inputs and form fields

• Toggles, checkboxes, and selectors

• Navigation elements

Each component included usage guidance and interaction states to reduce ambiguity during implementation.

3. Complex Patterns
With the building blocks in place, I expanded the system to include higher-level patterns:

• Multi-step and single-page forms

• Modal and sheet patterns

• Feedback and validation flows

• Empty, loading, and error states

These patterns helped teams design complete user flows more quickly while maintaining consistency.

Cross-Platform System Management

I maintained a single master design system with clearly separated libraries for native mobile and web, ensuring platform-specific behaviors were respected without fragmenting the system.

To streamline engineering collaboration, I:

• Published components and patterns in Zeplin

• Organized specs by platform and feature area

• Ensured tokens, spacing, and styles were easy for developers to reference

This created a reliable bridge between design and development and reduced repeated clarification during handoff.

Outcomes

The design system significantly improved both design velocity and engineering efficiency:

• 50% reduction in time required to move from mid-fidelity to high-fidelity designs

• 20% reduction in time from finalized design to development

• More consistent user experience across mobile and web

• Fewer design-related questions and revisions during implementation

What This Enabled

Beyond speed, the system changed how we worked:

• Designers could focus more on solving user problems instead of redrawing UI

• Engineers gained confidence in implementation decisions

• Product teams could ship new features with a more predictable level of effort