2024MondeeShipped (Int)
Designing a Better Design → Delivery → Dev Handoff System
Role
- Mapped the pain points across Design, PD, and Engineering.
- Designed and iterated the Figma structure, comment taxonomy, and visual cues.
- Ran walkthroughs with PD & Devs to make sure the system fit how it could benefit DevOps stories.
Timeline
Cross-teams
Short note
At Blinctrip/Mondee, the Product Delivery team sat between Design, Product, and Engineering. They owned writing detailed DevOps stories, clarifying edge cases, and keeping delivery on track (similar to product ops / BA / TPM in many orgs).
TL;DR
Built micro-systems to ease communication
Solutions involving visual cues, method of writing and structuring docs was rolled out incrementally in two different phases (proved in real work vs. a big “new process” launch).
Made Figma the single source of truth
PD + Engineering always had the Figma files open. Instead of jumping between multiple tabs, they could find design as well as business logic in the same file.
Full picture
Half the battle is just finding the right file and having enough logic to write stories
— Product Delivery
A bridge stuck translating
Hours spent rewriting logic after every review
Which Figma frame is this for?
What about this other flow? This edge-case?
Misinterpreting design states and writing incorrect logic basis biased interpretations
Direct communication channel with product design team is leading to breaks in focus times
Phase 1
Foundational structure + light taxonomy
Building on hand-off comments by splitting them into design + logic comments
Chips for updates, edit dates and section headers
I added small chips, calling out updates + dates to create a lightweight Figma changelog that PD could scan while writing DevOps stories.
Using Figma’s “Ready-for-dev” icon
Figma’s Dev Mode and how it shows the </> icon after page name + sections helped a lot as visual cues. I was able to push adoption of using Dev Mode org wide.
Split files between WIP & Shipped
Before me, 1 file with all WIP and the final artefacts was handed over. I split between WIP and Shipped versions of flows as separate pages.
Phase 2
Speed + State clarity (6 months later)
In about 6 months, a new friction appeared:
- Writing full sentences for every simple interaction was repetitive.
- The canvas was getting dense with text for standard patterns like tap, instant transitions, or swipe gestures.
What got added:
Interaction chips bring intuitiveness
Visual cues to identify edge-cases & state diagrams
Slowly, the handoff files started to be a robust system of its own
Once you know the colours, you know exactly where to look.
— Engineering Team Lead
Impact
A set of small steps pave the long way
Not a grand process overhaul — a set of small, sensible tweaks that made Figma behave more like a usable spec for everyone across multiple teams, who depended on it everyday.
1/3 calls reduced
between PD and the Design team every week, in the first two months of handoff
Lesser design bugs filed in Alpha testing
for every subsequent feature release
Dev ops stories took half the time
from before and was directly communicated by PD in our monthly check-ins
Reflection
What I would do next
State logic, tied to the design system
Comment types and sections map to tokens, so visual styles and logic stay in sync.
“Ready for Dev” checklists
States covered, copy final, logic documented — checked before handoff, not after.
Metrics on the handoff
Clarification tickets per feature, tracked to quantify the impact.
An AI handoff plugin
Wired to the design library — pulls the existing stack automatically, no manual re-linking.
Designers shipping straight to code
This site’s the proof: Figma, aided by Claude Design, shipped with Claude Code.
