Blackout · Legal-tech platform
Legal Document Review, Redaction & Production Platform
Unifying internal administration and customer-facing legal workflows into one coherent system for secure document review, redaction, and production.
Overview
The project at a glance
The challenge
Across 147 pages of wireframes, the same concepts behaved differently from screen to screen — and some contradictions could create real legal risk.
My role
As the product designer, I ran the audit, worked with the client to resolve the core product rules, and designed the workflows, design system, and core screens alongside Milyli Engineering.
What I did
Audited the existing product, turned 71 issues into 5 product decisions, then built the workflows, design system, and screens on top of them.
Where it stands
MVP built and in testing. Remaining flows and edge cases in progress.
From fragmented screens to a clear product model
The UI wasn’t the real problem.
Across 147 pages of existing wireframes, the same concepts behaved differently from screen to screen.
Roles changed names. Permissions contradicted each other. Upload flows behaved differently depending on where they started. Critical legal states were mixed with free-form tags.
Some inconsistencies were cosmetic. Others could create real legal risk.
Before redesigning the interface, I needed to understand the system underneath it.
147
Pages reviewed
110
Screens audited
71
Issues identified
12
Critical model issues
The original wireframes revealed inconsistencies across product logic, workflows, and interaction patterns.
71 issues led to 5 decisions.
The audit revealed that most problems weren’t independent UI issues. They traced back to five unresolved product questions.
Instead of fixing screens individually, I worked with the client to clarify the underlying rules and establish a shared product model.
01
Product baseline
Align the redesign around the existing V3 product.
02
Customer entry
Define a sales-led onboarding model for MVP.
03
Permissions
Separate organization roles from workspace-level access.
04
Organizations & recipients
Support multi-organization membership and a dedicated recipient experience.
05
Legal document states
Distinguish system status, legal coding, and tags, with privilege checks before production.
Consolidating scattered UI issues into foundational product decisions helped establish a shared model for eight core workflows.
Once the rules were clear, the workflows could finally behave like one product.
From product logic to a coherent experience
Turning product logic into a scalable system.
With the core decisions established, I mapped eight workflows across onboarding, workspace management, document review, production, sharing, and administration.
These workflows revealed recurring interaction patterns that could be standardized across the product.
I translated them into a shared design system aligned with Blackout’s existing PrimeVue and Tailwind stack, connecting product decisions with engineering implementation.
8
Core workflows
31
Component sets
289
Components & variants
Product rules
Excerpt · Flow 3, 1 of 8 core workflows
Reusable patterns
Data table
Status indicators
Form controls
Feedback
Excerpt · 4 of 31 component sets in the design system library
Product experience
Excerpt · Documents, one of the redesigned screens
A shared design system translated product decisions into consistent, implementation-ready patterns.
From shared patterns to a consistent product experience.
The resulting designs bring a consistent structure and interaction language to Blackout’s core workflows, from document review and redaction to workspace administration and production.
01 — Review & Redaction
Where Things Stand
A shared foundation for what comes next.
Blackout now has a clearer product model, eight core workflows, and a shared design system connecting its internal and customer-facing experiences.
Status: Ongoing
What’s Next
Finalize review and production workflows, validate critical edge cases around permissions and legal states, and work with engineering to prepare the redesigned experiences for implementation.
What I Learned
01
Audit the rules, not just the screens.
UI inconsistencies often reveal unresolved product decisions, not isolated design problems.
02
Bring decisions, not findings.
Organizing 71 issues around five key product decisions helped turn a complex audit into actionable conversations.
03
Build systems around behavior, not components.
Consistent rules across roles and workflows matter as much as reusable UI components.
04
Design for the build.
Aligning with PrimeVue and Tailwind helped make the design system practical for engineering to implement.