03 / DESIGN SYSTEMS · TEAM DELIVERY
Removing repeated work: delivery from 40 hours down to 16.
As Product Owner, I established shared component rules, incremental migration, and two layers of review so design and frontend could build on the same foundation. Based on workflow estimates, delivery went from 40 hours to 16 or fewer.
01 THE CONTEXT
Faster prototypes still led to repeated rebuilding.
Figma, Storybook, live screens, and AI could reference different component versions. Faster prototyping still left the team reinterpreting designs and rebuilding the same interfaces.
Give design, engineering, and AI the same starting point.
02 SETBACK & TURNING POINT
The library was built. Delivery was still stuck.
I initially thought the priority was building the design system. Putting it into practice showed me that new components were only the first step.
Where it broke down
The new library and Storybook already existed, but many live screens still used old components. Design, engineering, and AI referenced different versions.
What revealed the gap
Style changes did not necessarily reach the product. Engineers still had to choose between old and new components, while AI could reference components being phased out.
What I changed
I shifted the focus to shared adoption rules: use Storybook as the common reference, track migration by page, and review component appearance separately from product behavior.
A finished library is not a finished rollout. Retiring old components safely and making version choices clear are what change everyday delivery.
THE TRADEOFFShared rules had to be specific enough to execute: use tokens, cover component states, and provide a showcase for each component.
Explore the supporting design
03 THE SOLUTION
Define separate acceptance for appearance and product behavior.
I introduced two review layers: Chromatic compares the component’s appearance; product preview links check layout and behavior once that component is used in a real screen.
Component appearance
Use Chromatic to compare visual changes in component states and styles.
Product context
Check layout, interaction, and existing behavior in a product preview.
Separate acceptance
Review visual consistency and working flows as distinct questions.
THE TRADEOFFA component can look correct in isolation and still disrupt a familiar flow. Both levels needed their own review.
04 MAKING IT WORK
Shared components. A different path to delivery.
Designers built prototypes with existing components, and frontend engineers connected APIs and product logic on the same foundation. Removing separate wireframes, mockups, and UI rebuilding reduced the estimated workflow from 40 hours to 16 or fewer.
Migration remained incremental. Separate releases and visible progress let the product adopt new components when ready.
- 01
Start together
Build prototypes on shared components to reduce repeated interpretation.
- 02
Connect product logic
Engineers use the same foundation to connect functionality and data.
- 03
Adopt incrementally
Release the library independently; let products adopt it when ready.
Explore the process and collaboration
05 IMPACT & OWNERSHIP
What changed through this work?
The system supported around 40 components and 11 daily users across design and frontend. Delivery was estimated at 40 hours before and 16 or fewer after adopting the shared workflow, with fewer repeated design and UI implementation steps.
The 5-to-2-working-day baseline implies a 60% reduction in estimated workflow time. The 40-to-16-hour equivalent assumes eight hours per day; it is a conversion, not an independent measurement or measured person-hours.
A CLOSER LOOK
A little more context.
What the workflow estimate covers
Before: wireframe discussions, UI mockups, high-fidelity prototypes, frontend UI rebuilding, and manual comparison and debugging. After: designers prototype with the existing library, and frontend engineers reuse those components to connect product logic. The improvement comes from eliminating intermediate steps, not timing individual tasks: 40 hours became 16 or fewer, a 60% reduction. The hours are five working days to two at eight hours a day, not a measured timesheet.
Migration & release governance
The team tracked updated pages, remaining component tasks, and independently versioned library releases. AI could suggest a release type, while a person confirmed it before CI release. Product adoption of the new version remained a separate step.
My role & collaboration
I served as Product Owner, defining governance and migration strategy and coordinating design and frontend work. The core project team was one designer and one frontend engineer. Engineers supported environment setup and release; designers participated in component maintenance with AI assistance.
HIRING A SENIOR OR LEAD PRODUCT DESIGNER?
If this is the kind of work your team needs, let’s talk.
Based in Taipei (GMT+8), open to relocating for the right role. The form reaches me directly.