Designing a Scalable UX System for Complex Immigration Workflows

CaseHero helps immigration lawyers generate complex petitions faster with AI. As the product designer at VSDesign, I designed the core workflow system, aligned stakeholders, and delivered features continuously into development. Three tools are live with 10+ more handed off, driving early adoption and momentum.

Company

Casehero

PLATFORM

Platform

Website

Year

2025 - Ongoing

Duration

Phase I (6 month); Phase II (Current)

Why Casehero?

Millions of immigration cases are filed in the U.S. each year, and lawyers often spend dozens of hours per case managing evidence-heavy paperwork. For visas like EB-1A and O-1, small documentation gaps can result in rejection and years of delay. CaseHero helps legal teams organize, summarize, and prepare complex cases more efficiently, improving both speed and accuracy in a high-stakes process.

Casehero.ai

Who Uses Casehero?

Applicants Generate drafts and organize evidence with AI support. Paralegals Reduce manual writing and accelerate case prep. Attorneys Prepare cases faster and scale client capacity with AI.

Business Goal

Launch CaseHero successfully, retain the first cohort of immigration law firm users, and secure early funding by demonstrating clear product value and scalability.

My Role

I led end-to-end feature design, drove weekly client reviews, and partnered with engineering to deliver core tools.

My Role

I led end-to-end feature design, drove weekly client reviews, and partnered with engineering to deliver core tools.

Impact

Helped CaseHero retain its first cohort of law firm users ahead of early 2026 launch

7

Core tool launched

10+

Tools handed off

70%+

Task completion rate

2-3h

Time saved per task

Impact

Helped CaseHero retain its first cohort of law firm users ahead of early 2026 launch

6

Core tool launched

10+

Tools handed off

70%+

Task completion rate

2-3h

Time saved per task

CaseHero is in progress of launch smart tools. We are actively handing off features to engineering, with a full release planned for early 2026.

Seven core tools are now live on CaseHero.ai, enabling early lawyer adoption and strengthening investor confidence. Our system reduces preparation time by ~70%, increases accuracy, and provides a flexible foundation for 10+ future tools currently in development.

Problem & Solutions
Problem & Solutions

Problem Statement

Every new tool was designed from scratch：same interactions, different UI, every time.

Every new tool was designed from scratch：same interactions, different UI, every time.

Solution: 9 Reusable UX Patterns That Scale Across the Product

I audited every tool in CaseHero, grouped recurring interactions by user intent, and consolidated them into 9 core patterns. ✔ Mapped all interactions across tools and identified overlaps ✔ Grouped by what users were doing, not which tool they were in ✔ Distilled into 9 patterns that cover the majority of user actions ✔ New features now start from existing patterns, not blank canvas

Same needs, different solutions, over and over...

As we built more tools, I noticed the same problem repeating. Upload a file? Three different implementations. Fill in applicant info? Two different flows. Review a document? Another two. Same user need, different UI every time. This wasn't a one-off inconsistency: it was a structural problem that would only get worse as we added more tools.

And that problem had real consequences for three groups.

Standardize the UX pattern

identify then categorize the patterns.

Title

The Audit
Subtitle

So I did an audit. I went through all the live tools and mapped every recurring interaction. What came out of that was nine core UX patterns I then documented each pattern with a spec sheet — what it looks like, when to use it, what variants exist, and how it behaves across different states. This became the reference that designers and engineers use when starting any new tool.

Description

Deep Dive: File Upload Pattern

How might we help user manage complicated file uploads?
How might we help user manage complicated file uploads?

When using the generator tool, it requires uploading 15-60+ files across categories (evidence, contracts, publications, reference letters and more)

User flow of [Petition letter] generator tool

Iteration A

Category-Based File Checklist

Tab → saw related documents → upload

😍

What works well

  1. Tabs break a long list into manageable groups

  2. Users can focus on one category at a time

🫠

🫠

Why not work?

  1. Excessive scrolling after uploading 5+ files

  2. No preview of content within each tab

Iteration B

Compact Panels + Scrollable Lists

Modular scrollable panels with adaptive layout.

😍

What works well

  1. All categories visible at once

  2. Card layout reduces scrolling

🫠

🫠

Why not work?

  1. Cognitive load

  2. No clear prioritization of required documents

ITERATION C

Tabs + Required Status + Progress Tracker

Tab → find required document(*) → upload

😍

What works well

  1. Required files marked with asterisk

  2. Scannable without overwhelming

🫠

🫠

Why not work?

  1. Still hard to spot which required files are missing at a glance

  2. Progress tracker adds engineering complexity without enough user payoff

fINAL ITERATION

Tabs + Required Status + Guided Complete

Upload → show warning state → upload→ eliminate warning

😍

What works well

  1. Clear feedback loop: upload → warning clears

  2. Minimized engineer effort

  3. Works across all visa types without redesign

System level impact

From one-off designs to a pattern library

• Built a scalable upload system that works across multiple visa types, reducing future redesign and engineering effort. • Unified components into a consistent, reusable design framework that clearly guides users through required documents. • Added seamless entry points to other CaseHero tools, allowing users to generate missing documents without leaving the workflow.

Iteration A

Tab-Based Entry Management + Add-New Workflow

Award 1 → tapped + Add new → a new tab appeared for Award 2 → and so on.

Iteration B

Numbered Case Navigation + Collapsible Pages

To support users with many awards, We replaced tabs with numbered navigation (Award 1, 2, 3…). Each form could collapse after completion to reduce clutter.

Final Iteration

Paginated Award Entries + Clear Progress Cues

We replaced the long horizontal list with pages of three awards. Users still had direct access to any award number but with far less visual clutter.

System-Level Impact

The final pattern scales to other CaseHero workflows, including: • Multiple awards or evidence items • Multiple job entries (High Salary tool) • Multiple signers (Referral Letter tool) This dramatically reduces redesign effort and allows engineers to reuse a single pagination + case control logic across different products.

Boost development speed

Once the pattern system was in place, the impact was immediate.

What I learned
Complex B2B Workflows

This project strengthened my ability to design scalable systems for complex B2B workflows. I learned how to negotiate constraints between legal precision and engineering feasibility, and how to deliver patterns that balance usability with long-term maintainability.

Complex B2B Workflows

This project strengthened my ability to design scalable systems for complex B2B workflows. I learned how to negotiate constraints between legal precision and engineering feasibility, and how to deliver patterns that balance usability with long-term maintainability.

Complexity Doesn’t Need Complex UX

I created unified workflows and reusable components that scale across tools, reducing redesign work and engineering effort while improving product consistency.

Complexity Doesn’t Need Complex UX

I created unified workflows and reusable components that scale across tools, reducing redesign work and engineering effort while improving product consistency.

Be mindful of the edge cases

Engineers pushed me to think beyond the happy path and account for failures, warnings, and misalignment states. Each week I clarified edge cases, resolved conflicting requirements, and drove decisions that kept scope realistic—skills I’ll carry into future B2B work.

Be mindful of the edge cases

Engineers pushed me to think beyond the happy path and account for failures, warnings, and misalignment states. Each week I clarified edge cases, resolved conflicting requirements, and drove decisions that kept scope realistic—skills I’ll carry into future B2B work.

Next Steps

Summary tool for the real estate

Our client has an ambitious plan to expand CaseHero into real estate document workflows as well. Some patterns we designed for immigration lawyers now translate into real estate use cases, such as the Deal Sheet Generator and Contract Generator.

File management

CaseHero relies on session storage today, meaning progress is not preserved after closing the browser. Our design now lays the foundation for future cloud saving and real-time sync.

Next Project

Next Project