Case Study: 60% faster B2B client launches at Zenni Optical

by building a shared responsive design system that scaled across a growing client roster and a 4-designer team

Optical

e-commerce

B2B

0→1

Design Systems

ROLE

Senior User Experience Designer

COMPANY

Zenni Optical

TIMELINE

6 months

TEAM

4 designers

BY THE NUMBERS

60%

faster new client implementation

6

local component libraries consolidated

Meta

among the first client launches

Visuals

Mobile Purchase flow

Introduction

Check out

Check out

Order confirmed

The Problem

Six teams, six local libraries, zero shared system.

Zenni's consumer platform couldn't support B2B eyewear sales for corporations, bulk ordering, employee verification, benefit administration, and brand customization didn't exist anywhere in the product. Major corporations were shopping for scalable eyewear solutions for their employees, and Zenni had no platform infrastructure to serve them. Client onboarding, scale, and tight timelines prevented a methodical approach to design systems. Each designer had their own local library for the 2-4 B2B clients they supported, creating fragmented, redundant, and inconsistent components.

Role & Constraints

OWNED

The B2B design system from zero to one: design tokens, a 50+ component library, and mentoring the three designers who now maintain it.

PARTNERED ON

Marketing and B2C design system alignment, each B2B UX designer

CONSTRAINTS

Limited prior team experience with design systems or B2B product design, and multiple corporate clients with different branding and workflow needs to support at once.

RISK IF BUILT WRONG

One-off components per client would have compounded technical debt with every new partner onboarded.

The Approach

4 steps, one vision.

1. DISCOVERY: Audited pain points from prospective clients like Meta (cumbersome ordering, limited selection, poor mobile, inflexible benefit administration) and researched competing platforms.

2. DEFINITION: Scoped a component inventory across anticipated B2B needs instead of building one-off per client.

3. DESIGN & ITERATION: Built mobile-first with tokens for color, typography, spacing, and elevation, then validated with pilot partner employees.

4. DELIVERY: Shipped 50+ WCAG 2.1 AA compliant components, then mentored three designers to carry the system forward.

Key Decisions

What changed, and why.

Unified, single source of truth for engineers and designers

Built a token-based, mobile-first design system instead of custom builds per client

Why: The team was about to onboard multiple corporate clients with different branding and workflow needs, and one-off builds would have compounded technical debt with every new partner.

Result: New partner implementations now take about 60% less design time.

Validate before you finalize

Tested with pilot partner employees before locking the system

Why: Prospective clients like Meta had specific pain points around ordering, filtering, and benefit administration that internal assumptions wouldn't have caught.

Result: Refinements to frame filtering and checkout ahead of a WCAG 2.1 AA compliant launch with Meta as the flagship partner.

Outcome

What shipped.

Zenni launched its first B2B platform with Meta as the flagship partner, opening a new revenue channel the consumer product couldn't reach on its own. The system's 50+ components cut new-partner implementation time by about 60%, and the three designers I mentored have kept maintaining and evolving it since.

B2B e-commerce flow for desktop

To navigate: drag with mouse, use your left or right arrow keys, or swipe with your trackpad

  • 1. Home

  • 2. Filtered product list

  • 3. Select prescription type

  • 4. Add your prescription

  • 5. Confirm prescription

  • 6. Select lens type

  • 7. Select clear lens type

  • 8. Select lens index

  • 9. Select lens coating

  • 10. Enter contact info

  • 11. Review order

B2B e-commerce flow for tablet

To navigate: drag with mouse, use your left or right arrow keys, or swipe with your trackpad

  • 1. Home

  • 2. Filtered product list

  • 3. Select prescription type

  • 4. Add your prescription

  • 5. Confirm prescription

  • 6. Select lens type

  • 7. Select clear lens type

  • 8. Select lens coating

  • 9. View cart

  • 10. Enter contact info

  • 13. Review order

B2B e-commerce flow for mobile

To navigate: drag with mouse, use your left or right arrow keys, or swipe with your trackpad

  • 1. Home

  • 2. Filtered product list

  • 3. Product Details

  • 4. Select your prescription type

  • 5. Add your prescription

  • 6. Confirm your prescription

  • 7. Selec lens type

  • 8. Select clear lens type

  • 9. Select lens index

  • 10. Select lens coating

  • 11. View cart

  • 12. Enter contact info

  • 13. Review order

Reflections

Investing early in tokens, documentation, and governance paid off every time a new partner came on board. Mentoring the three designers who now run the system multiplied the work well past what I could have covered alone.