Designing for the space between tools
Responsibilities
End-to-end product design across web and mobile, Information Architecture
Tools
Figma, Miro, Affinity
Timeline
10 weeks
Project overview
Brokers, consultants, and service providers don't struggle with documents. They struggle with everything around documents—tracking who's seen what, chasing signatures, making sure invoices don't disappear into email threads, keeping five parties aligned when no one owns the process.
Most teams already have a tool for documents and a separate tool for payments. The problem is that real work spans both, and coordination breaks down in the gap.
CollabDocs was designed to close that gap: a shared workspace where multi-party teams can manage documents, signatures, and invoices in one place—without the friction that usually comes from stitching separate systems together.
Designing for orientation first
A shared workspace only works if people can find their footing quickly. Especially in multi-party contexts, where not everyone uses the product daily.
I leaned into familiar patterns—folders, tables, clear navigation hierarchy—so the system feels approachable without explanation. The main documents view shows project folders at the top and a status-driven table below. Users land and immediately understand: here are my projects, here are my documents, here's what needs attention.
The question I optimized for: Where am I, and what's happening here? If someone can answer that in three seconds, the design is working.
Status over storage
In document-heavy workflows, state matters more than location. Knowing a file exists isn't useful. Knowing it's waiting for a signature—that's actionable.
The document table emphasizes status (draft, sent, signed), collaborators, sender, and recency. I deliberately pushed file metadata like size and type to the background. The workspace should read as an operational dashboard, not a file repository.
This also informed the row-level actions. The overflow menu surfaces contextual options—pending signatures, save to backup, reject—based on where the document sits in its lifecycle. The interface adapts to the work, rather than presenting every option at once.
Keeping collaboration attached to the work
One pattern I see constantly in multi-stakeholder workflows: feedback happens outside the document. Someone reviews a contract, sends comments via email, and now there's a parallel thread that isn't connected to the file itself. Decisions become untraceable.
The document viewer keeps the file front and center with comments and version history in a right-hand panel. Reviewers can read, annotate, and discuss without leaving the context. The conversation stays attached to the thing it's about.
This sounds simple, but it's a structural decision that changes behavior. When feedback lives inside the workspace, it becomes part of the record—not something someone has to reconstruct later.
Making signatures feel deliberate
Signing is a moment where mistakes carry real consequences. A document sent to the wrong recipient, a missing party, an accidental submission—these aren't just UX failures, they're professional risks.
I designed the signing flow to slow users down just enough to ensure intention. Recipients are added explicitly. The primary action is isolated and clear. The interface strips away competing elements so there's no ambiguity about what's about to happen.
Confidence at the moment of commitment was the goal. The flow should feel controlled, not rushed.
Treating invoices as part of the workflow
Invoices are easy to treat as an afterthought—something that happens after the real work is done. But in practice, invoices that get detached from their source documents are invoices that get lost, delayed, or disputed.
I designed the invoice experience to mirror the document model. There's a list view for tracking, a guided upload flow that links invoices to their originating documents, and a detail view for review and download. The visual language stays consistent. Invoices feel like a continuation of the work, not a separate system bolted on.
The upload modal asks for invoice ID, amount, linked document, and collaborators—just enough structure to keep things traceable without creating friction.
Mobile as a first-class experience
A lot of these workflows don't happen at a desk. A broker reviewing a contract between site visits. A vendor approving an invoice from their phone. A consultant signing off on a document before a flight.
The mobile experience mirrors the web structure so users can move between devices without relearning anything. Folders, document lists, status indicators, the comment panel, the signing flow—all of it translates. Key actions remain accessible. The hierarchy stays intact.
The goal was to protect momentum when timing matters. If someone needs to approve something now, the mobile app shouldn't be the reason they can't.
Additional work
Alongside the core product, I also designed the CollabDocs logo and a marketing landing page used to communicate the platform's value to stakeholders and early users. This helped establish credibility and visual coherence before the product reached market.
How I’d measure success
CollabDocs is about reducing time lost to coordination. If it works, handoffs get faster, fewer things fall through cracks, and teams spend less energy on logistics. The metrics I'd track:
Time from document received → signed (signature cycle time)
Time from invoice submitted → processed (payment cycle time)
Drop-off rate in signing flows (friction indicator)
Collaboration activity frequency (engagement signal)
Mobile usage during approval moments (accessibility validation)
Volume alone isn't the point. Fewer delays and fewer unresolved handoffs—that's the signal.
What I Took From This
CollabDocs reinforced a principle I keep returning to: the hardest design problems often live in the seams between systems, not inside them.
Documents, signatures, invoices—each is a solved problem in isolation. The friction comes from how they connect. Designing for that connective tissue—making handoffs invisible, keeping context attached, reducing the coordination tax—is where the real value sits.
It also reminded me that "simple" isn't the same as "limited." The goal isn't fewer features. It's less cognitive load. A workspace can be capable and still feel calm. That balance is worth fighting for.
