The Way

Build a design system from the ground up, including base components, documentation and guidelines

Wonolo

Company

Tooling

Figma, Storybook, zeroheight, Confluence

Lead designer, design system mentor, project manager

Role

1 designer, 2 engineers

Team

Context

Early 2022: “ The Way” was born

  • Tactical shift: after nearly 10 years of chaotic product design, 2-sided employment marketplace Wonolo decides to invest in a design system

Mid-2022: Adapt & Adopt

  • Filled leadership vacuum: when I joined, the team lacked a head of design. I aided in the recruiting, interviewing and hiring of our new design leader. In the months it took to find the right fit, I took on the role of team lead, including: leading critiques, hiring designers, building out onboarding documentation, collaborating with marketing and engineering leads, and advocating for resources.

  • Unified tooling: simplified design tech stack from 4 tools to 1. Migrated the team off InVision, zeplin, Miro and Sketch into Figma.

  • Aligned foundations: in collaboration with brand, I defined our color and type styles. Other supporting foundations and guidelines were crafted at this time as well.

End of 2023: Launch Date

  • Empowered engineering & design: launched 16 of the most-used atomic and molecular components, exponentially increasing speed to delivery

  • Broadened impact: at month 6, engineers from various teams were offering to contribute their time to building the system

Deep dive into this case study...

Stats

Based on 9 months of implementation

75% increase in visual consistency

The unified team resulted in design cohesion

100% adoption

Each of the 4 teams + 6 designers were all on board

< 1% detach rate

Flexibility kept detach rates low and consistency high

How this was accomplished:

  • Culture shift: fostered a systems-minded design culture

  • Resource allocation: evangelized the ROI of design systems with leadership to obtain engineering resources

Components

  • Two simple select components side-by-side. The one on the left is single select while the one on the right is multi select, including clear and apply buttons.

    Simple Selects

  • A complex select component, including long chips in the text input and descriptions for each item in the dropdown. The component also includes clear and apply buttons.

    Complex Selects

  • An example of an empty state. The contents are all centered, starting with an illustration depicting a phone, a cog and user profiles. Underneath the illustration is a title, subtitle, button and a hyperlink.

    Empty State

  • Multiple examples of selectable card components. The examples show the selected and default versions of the radio button selectable card.

    Selectable Cards

Documentation

  • WCAG compliance documentation focusing on text and non-text contrast. The example on the right shows poor text and non-text contrast. The example on the right shows AA compliance contrast.
  • This documentation shows keyboard accessibility for the multi-select property. This documentation helps engineers to align with the expected behavior.
  • Example of date and time formatting table, including type, examples, code, and usage guidelines. There is also an in-context example to the right of the table.
  • Documentation on how to properly align with character count experience, including states for default, within character count, exceeding character count, and showing overflow text with a tooltip.

Strategy

  • A PRD (product requirements document) for the design system, including background, main goals, user needs, user stories, rollout strategies, and responsible parties.

    Planning

    Coordinate design system implementation across LOBs and disciplines. Define and organize priorities across research, foundations, components, patterns, templates.

  • Crop of a product design process, focused on steps 7-10, which detail engineer and design hand offs, translations, and engineering build.

    Process

    From contribution models to full product process diagrams, these efforts level-set expectations, foster self-service, and aid onboarding.

Defining the Product Ecosystem

I built this birds-eye-view of the product ecosystem in my first month at Wonolo because I needed a north star when navigating complexity. It soon became the company’s go-to tool for:

  • Onboarding: first with designers, then throughout the company. For designers, this built rapport and trust, and eventually increased adoption of the design system.

  • Investor Pitches: the CEO used the ecosystem to explain how the products worked together

  • Conversation Starters: laid bare the structural and tech issues the design team was facing.

A Product Family Emerges

Within 6 months of implementation, designs began to align across the numerous product lines. A singular cohesive, branded, and accessible multi-product experience emerged.

  • Refined software design for an account summary in a mobile device (iPhone.) The iPhone is on a black notebook, next to an iPad with a dashboard design on the screen.
  • Family of devices, including a laptop, iPad and iPhone. The laptop has dashboard on the screen focusing on a group of venues. The iPad has an empty state and the phone has an earnings account screen.
  • Side-by-side before & afters of the Venues dashboard. The "after" screen on the right has a more refined design with a modern use of color and increased usage of photograph.
Next case study ▶︎