From 6 local libraries, from scratch, cutting new-partner implementation time by 60% and launching with Meta as the flagship client.
Optical
E-commerce
Building Zenni Optical's first B2B design system
B2B2C
Design Systems
0→1
Design Operations
Platforms
ROLE
Senior UX Designer
COMPANY
Zenni Optical
TIMELINE
6 / 2023 - 1 / 2024
TEAM
Mentored 3 designers
Highlights
6 to 1
6 local libraries consolidated into a single system for the B2B design team
50+
reusable components, WCAG 2.1 AA compliant
Meta
launched as the flagship partner on Zenni's first B2B platform
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
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.
OWNED
The B2B design system from zero to one: design tokens, a 50+ component library, and mentoring the three designers who now maintain it.
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.
System, not one-offs
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.
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.