Project Astra
iContracts · Enterprise CLM · UI/UX Design
UX Design
Background
iContracts is an enterprise Contract Lifecycle Management tool. Creating a contract record used to mean uploading a PDF and manually typing every piece of metadata — party names, dates, clauses, obligations — field by field. Contracts are messy. They don't follow a standard format, so even reading them takes effort before the typing begins.
That changed when AI was integrated. Using OCR and data extraction, the AI could now read an uploaded contract and fill out all the metadata automatically. A process that took significant manual effort was suddenly near-instant.
My Role
I was brought in before the feature shipped to users. The internal build had been made by developers working off a PM's Google Slides mockup — no design system, no UI framework, no UX input. I reviewed the internal build, identified critical issues, redesigned the entire flow, and the redesigned version is what users got on day one.
What I Found
The flow was broken in three specific ways. Each one was enough on its own to kill adoption.
Discovery - The feature was invisible
Accessing it required navigating a buried menu — most users would never find it without being explicitly trained on where to look.Feedback - The wait felt like a failure
AI processing takes 3+ minutes. The interface showed empty fields with green loading circles — indistinguishable from a crashed page. Users had no reason to believe anything was happening.Reentry - Leaving meant losing your place
Users would naturally navigate away during the wait. Getting back required digging through Navigate → Kozmo Agent Activity → Activity Details. Most just gave up.
The internal build before I got involved. No framework, built from a Google Slides mockup.
The Process
01 | 02 | 03 | 04 |
|---|---|---|---|
Heuristic analysis of internal build | Mid-fi in Figma Make · PM buy-in | Usability testing with QA team · SEQ, SUS, task time | High-fi in Figma · Design system · Validation |
Real user access was denied, so I ran sessions with QA testers — three people who handle customer issues daily and know the product inside and out. Not ideal, but they gave me a solid baseline. I explored multiple directions to fix the disconnected flow before landing on a full redesign.
On the system side, I worked with the frontend dev to evaluate frameworks — the legacy tool was pure HTML/CSS with no library. We landed on SaaS UI Kit (Chakra-based) and I used it to build the Astra design system.
What I Built
Every design decision maps back to one of the three problems.
Discovery - Redesigned the upload screen
Clear page hierarchy, prominent Kozmo AI badge, and a single obvious entry point. No buried menus.Feedback - Inline progress per file
Each uploaded document shows its own live status — Uploading, Processing in background, Done. The wait becomes visible and intentional. Also designed AI processing micro-interactions in After Effects, exported via Lottie.Reentry - Persistent Agent Activity sidebar + toast notification
The sidebar is accessible from the navbar anywhere in the product. The toast proactively pulls users back when processing completes with a single "Review" action.
The redesigned upload screen. Inline progress, recent activity, and a clear Astra AI identity. All on the same screen.
Left: the persistent sidebar accessible from anywhere. Right: the toast that brings users back.
Handoff was done in Figma Dev Mode. The dev used Figma MCP and Claude Code in VS Code to build it. The designed version is what users received on launch day.
The Outcome
The AI drove the throughput. The redesign made sure users stayed in the flow long enough to let it.
Tools & Methods
Figma, Figma Make, Figma Dev Mode, After Effects, Lottie, SaaS UI Kit, Heuristic Analysis, Usability Testing, SEQ · SUS · Task Time, Design System
Want the full story?
This covers the what. The full case study walks through the research findings, design explorations I ruled out, and the system decisions behind the build. Happy to walk through it together.
