Connecting the Dot: Design the Process to Streamline Collaboration.
A cross-functional workshop with 20 developers and 1 design system designer to diagnose a broken PD → Dev → DS workflow where each team operated in isolation. Through current and future state mapping, the team co-created a unified collaboration process to close handoff gaps and establish a single source of truth across design and engineering.
Three teams. Three sources of truth. Zero alignment.
The current workflow among Product Design, Engineering, and Design System was deeply siloed. Design System lived inside Figma bubbles — disconnected from development. On the engineering side, a separate code-based library was built without involvement from Product Designers or the Design System team. Once components were built, the conversation stopped.
The result: a design system library that was unusable for engineering, and a collaboration model that created friction at every handoff.
We have our own component library in code, and we have Figma on the design side. They're never in sync, naming, variations are different. Sometimes there's update from design but we are not aware.
I update the components in Figma but I have no idea if engineering ever picks them up. By the time something gets built, it looks nothing like what I designed — and no one told me it changed.
We maintain the source of truth, but neither the product designers nor the developers are referencing it consistently. We're updating things in isolation and finding out too late that it didn't make it into the product.
Get everyone in one room — then map the bubble they live in.
A workshop with the entire mobile development team — 20 developers and 1 design system designer — to walk through the challenges together and co-create a workflow that worked for both sides.
01 — Pain points uncovered
Through conversations with the Design System team, internal value stream designers, and engineers, the current collaboration flow was mapped out. The findings confirmed what the team suspected — the collaboration was a silo. The PD → Dev → DS workflow contained multiple unresolved gaps, marked by unclear handoff points and decision dead-ends.
- Updates between PD, Dev and DS only happen inside each team's own bubble — none of them surface to the others.
- Naming, sizing and specs drift between design and engineering. There is no canonical reference either side can point to.
- Design system handoff standards to Dev did not meet satisfaction on either side.
02 — Topics explored
Reframed the pain points as three How-Might-We questions to focus the workshop on the handoff, the collaboration, and the components themselves.
How might we enhance the Design → Engineering handoff?
- A shared artefact and named owner at every lane crossing.
How might we enhance Design → Engineering collaboration?
- Explicit alignment rituals across PD, Dev and DS — not just dropping artefacts over the wall.
How do we enhance UI component quality?
- Close the loop so code-side parity feeds back into the DS backlog.
Closing the loops, syncing the lanes.
Using the same mapping exercise, a future state workflow was defined — restructuring the PD → Dev → DS flow to close feedback loops, establish shared decision points, and ensure Design System updates propagate across both design and engineering in sync.
From three bubbles to one connected loop.
The workflow is currently running as a pilot — and already delivering. Six UI components have been successfully aligned between the Dev Storybook and Figma library, marking the first time all three teams are working from the same source of truth.
This is just the beginning. The co-created process brings Product Design, Engineering, and Design System into a single connected loop — reducing handoff friction, closing the feedback gap, and building a design system that engineering can actually use.