DOMAIN
Contract approval flow
TIMELINE
Q3 2023
ROLE
Lead designer
TEAM
CONTEXT
Oneflow is a contract management platform for B2B teams. Approvals happened across email, Slack, and checklists, making it impossible to track who needed to sign and where contracts got blocked.
PROBLEM
Research:
Analyzed enterprise workflows + support tickets + sales requests
Approval steps were invisible, inconsistent, and not tracked, leading to delays and missed handoffs
Root causes:
No structured way to request/track approvals
Unclear responsibilities
Decisions scattered across channels
NO VISIBILITY
0 tracking
of approval progress
Why it matters:
Slow approvals created compliance gaps and revenue risks
MY APPROACH
01
Mapped flows
Mapped real approval workflows across legal, finance, and sales to identify blockers
02
Designed Approval flows
Designed parallel/simple Approval Flows supporting simple and parallel flows
03
Backend compatibility
Ensured backend compatibility, reused existing patterns
04
Testing
Tested flows with enterprise users
RESULTS AND IMPACT
“This approval flow finally gives us the audit trail we need for compliance, and our sales team can actually see where contracts get stuck”
Enterprise Customer Success Manager
82%
Early adopters CSAT
User survey after using the feature for the first time
6weeks
To MVP
MVP designed and handed off for development in 6 weeks
70%
Logic reused
Reused most of the backend logic
THE PROCESS
WORKING WITH CONSTRAINTS
No new roles or states possible
We had to design the flow entirely within existing architecture:
Building a brand new "Approval" role would slow delivery and create technical debt.
Creating a new approval flow would take months of development.
IMPACT: Months of development vs. weeks - had to get creative with existing architecture.
KEY DESIGN CHALLENGES
Participants clutter
The current Participants tab mixed signers with approvers, creating visual noise and confusion about who needed to do what.
IMPACT: Users couldn't quickly scan approval status or identify bottlenecks leading to confusion and lower customer satisfaction.
Status confusion
After renaming documents to "Approval pending," users stayed confused - the document still behaved like a draft, creating mixed signals.
IMPACT: More support calls and confused users, delayed approvals.
Send modal issues
User tests showed that the Send modal left users guessing: would messages go to approvers or signers? This uncertainty caused hesitation and testing mistakes.
IMPACT: Important approvals delayed because users weren't sure who would get notified.
DESIGN SOLUTIONS
Reuse over rebuild
Extended the participant list UI with approval roles instead of building separate flows. Reused existing Signing workflow logic for consistency.
RESULT: Faster delivery, familiar patterns. Cut engineering build time from months to weeks.
Renamed state back to Draft
I renamed status to "Draft - Approval pending" for crystal-clear communication about document state. Users expected drafts to behave like drafts.
RESULT: Clear labeling eliminated confusion. "Draft - Approval pending” mimicked real user mental models.
Restructured and unified participants
Participants and counterparties now clearly labeled with role distinction, status visibility, and real-time progress updates.
RESULT: Restructured information hierarchy to reduce cognitive load and improve scanning. Clear roles, statuses, and actions.
Send modal structure makeover
Introduced clear visual separation between approvers and signatories, with immediate understanding of who receives what messages.
RESULT: Visual grouping eliminated guesswork and reduced user anxiety about message targeting. Clear separation between approvers and signers.
Design system updates
Created components for: colors, statuses, buttons, modal filters, participants, avatars, and contract cards.
LEARNINGS AND REFLECTIONS
Didn't work
Early prototypes didn’t cover cases when approvers can also sign the contract
Adding a proper approval status to contracts would add backend work
Surprised me
A flexible flow could be built without backend changes
Would do differently
Involve engineers sooner to avoid rollback and rework related to the contract status
Validate mixed approver/signer roles earlier in the process
Made the Send flow a multi-step flow
Designed and built by me