Immigration case management, made easier. A centralized workspace that helps HR teams track cases, deadlines, documents, and next actions — without scattered spreadsheets and email threads.
Inspired by my experience as the only HR person supporting a company’s U.S. team.
The project in 30 seconds
Problem: Immigration case updates and deadlines were scattered across spreadsheets and email.
My role: I led the UX/UI design, from workflow structure and Figma screens to an AI-assisted interactive prototype.
Key decisions: Prioritize urgent work, make the next action and owner visible, and keep HR and law firm views consistent. Feedback from three HR colleagues shaped the revisions.
01 — Overview
Managing immigration cases shouldn't require scattered spreadsheets, emails, and reminders.
The Problem
HR teams manage multiple immigration cases at once, each with different deadlines, documents, attorneys, and case stages.
The Goal
Create one centralized system where HR can quickly understand:
- What needs attention
- What's due next
- Where each case stands
- Who is responsible
02 — The Problem
Case information is scattered across too many tools.
Too many tools. No single source of truth.
Scattered Information
Case updates, documents, deadlines, and communication live in different places.
Deadline Risk
Critical dates such as RFE responses can easily get buried among everyday HR tasks.
Unclear Next Steps
Knowing a case status doesn't always tell HR what needs to happen next.
03 — Understanding the User
Designed around one primary user.
Manages multiple employee immigration cases while coordinating with employees, attorneys, and internal teams.
04 — Information Architecture
A structure built around HR tasks, not immigration terminology.
The navigation is organized around what HR needs to do, not around immigration terminology. Case Detail — reached from both Today and Cases — is where the day-to-day work actually happens.
05 — Design Decisions
Three decisions that shaped the product.
Start with what needs attention
Instead of opening with analytics, the dashboard prioritizes cases and tasks that require immediate action — a red dot for urgent, amber for upcoming, and a clear next step for each.
Turn case status into next action
Status alone isn't enough. Each case surfaces the next required action, its deadline, and who's responsible — placed above the case history, not buried in it.
Connect cases, tasks, and deadlines
The same case information appears across different workflows, letting HR move between case tracking, task management, and deadlines without losing context.
06 — Validation: HR Design Review & Iteration
Three HR perspectives helped me find what was missing.
I shared the Figma designs with three HR colleagues—an HRBP, an HR Generalist, and an HR Specialist—and asked them to review the proposed workflow through the lens of their own work. These were informal design reviews, not observed usability tests.
HRBP · Collaboration
Where does the attorney fit?
The HRBP pointed out that an immigration case does not move forward through HR alone. The workflow needs to account for attorney review and handoffs.
Design response: I expanded the design to include HR, law firm partners, and an employee read-only concept. The current desktop and mobile prototypes let reviewers switch between HR and one law firm partner; the employee view is not implemented.
HR Generalist · Error recovery
What if I enter something wrong?
The HR Generalist asked how someone would know which field to fix when creating a case.
Design response: I added inline validation and specific error messages to the New Case form, so users can correct entries before submitting.
HR Specialist · Case progress
What stage is this case in?
The HR Specialist wanted the case view to describe its stage—such as in progress, RFE, or audit—instead of relying on a general progress indicator.
Design response: I clarified the distinction between the case stage and the next action, so HR can see both where a case stands and what needs to happen next.
What this review established: The three HR perspectives identified gaps in attorney handoffs, error recovery, and case-stage clarity. I used these findings to revise the workflow and interaction details.
Next validation step — planned, not yet conducted
Observe 3–5 HR peers using fictional case data to complete three tasks:
- Find an urgent case and identify its deadline, next action, and owner.
- Create a case with an invalid entry, then correct it using the form feedback.
- Identify a case stage and explain the next attorney or HR handoff.
Record completion, hesitation, errors, and assistance needed. Use those observations to choose the next revisions, then repeat the affected tasks.
07 — AI-assisted implementation & iteration
I set the rules. AI helped me make them work.
I designed the screens in Figma and used Claude and ChatGPT to build and revise the HTML prototype. I reviewed the output, gave follow-up instructions, and published the revised version. I later used ChatGPT and Codex to make the law firm partner view interactive.
My decision
Separate access from task ownership
I set the rule: HR sees all eight fictional cases. Alex Morgan, the sample law firm partner, sees only Michael Zhang, Sarah Johnson, and Kevin Park. A next action can still be assigned to HR; that does not change which partner the case belongs to.
AI implementation
Apply one scope across the workflow
Codex helped implement the view switch and apply the assignment rule to the case list, search and filters, case details, and Today. I used the resulting behavior to check whether the implementation matched the intended rule.
Issue & verification
A role label was not enough
The first version could show Alex’s identity while Today still showed other people’s cases. Codex’s tests caught the problem. After the fix, the list and Today used the same case scope. The mobile prototype was then updated to match.
Project scope: Independent personal prototype, not deployed in a workplace. The three HR colleagues provided informal design feedback; task-based usability testing is the next step. All records are fictional. The view switch filters the interface in the browser; all sample records remain in the HTML. It does not implement authentication or backend access control. The employee read-only view remains a design concept.
Final Product
The complete workspace.
Explore the remaining workspace screens
Supporting Screens
Explore sign-in, validation, and saving states
Interaction States
A real product needs more than one path.
Most of a design's attention goes to the ideal flow. But an HR tool also gets opened first thing Monday morning, filled in wrong, and left waiting while something saves. Those moments got the same level of care as the core screens.
08 — Interactive Prototype
Try the product
Explore the desktop or mobile prototype. Click Sign In with the prefilled demo values, then use View as at the top to switch between HR · Emily Chen and Law Firm Partner · Alex Morgan. HR sees 8 fictional cases; Alex sees only his 3 assigned cases. Open Today to see how the same rule applies to urgent cases, upcoming actions, and activity.
Opens in a new tab · Desktop and mobile demos
09 — Reflection
What I learned
Designing EZ Follow made me think less about individual screens and more about how information moves across a system. A case status, deadline, task, and notification may appear in different places, but they all need to tell the same story to the user.