Back to all work Product Design · Nonprofit

MIC: CASA Platform Redesign

Redesigning how Court Appointed Special Advocates write court reports and act on flagged case content, so volunteers spend less time on paperwork and more time on the child.

Jump to my work

RoleUX Designer and Researcher

TimelineJanuary to May 2025

ToolsFigma, FigJam

Team9 students, 1 sponsor

Context

MIC is a cloud-based platform that helps CASA volunteers manage cases and write court reports.

MIC helps Court Appointed Special Advocates (CASAs) handle clerical work, so they can focus on children in CHINS cases: kids who need services because of neglect, abuse, or unsafe situations. CASA volunteers write the court reports that help judges decide what is best for a child.

Our team of nine set out to make report writing and case management faster. I owned user testing and the testing protocol, took the homepage and document page from sketch to final prototype, and organized our process.

Problem statement

How might we reduce the time CASA volunteers spend writing court reports, so they can spend more time advocating for the child?

Who we designed for

CASA volunteers

Our primary users. They use MIC daily to track cases and write reports.

Everyone around the case

Judges, case managers, the child, and their families.

What made it hard

Too many stepsWriting a report took far more clicks than it needed.

Overwhelming screensA cluttered dashboard buried what volunteers needed first.

AI in a sensitive settingReports hold private details about a child, so AI help had to be transparent and optional.

What we worked within

No legal or compliance experts to check AI use.
Limited firsthand view of the full CASA workflow.
Testing with a small number of CASA volunteers.

Background

The brief and the timeline

From research to prototype

Research to prototype

Click a step to see that stage.

Team

We found

Writing a report took too many clicks.

So we aimed to

Cut steps and clutter.

My work

The problem

A cluttered dashboard.

My sketch

Last case and messages first. Done tasks hidden.

My work

We built

Figma wireframes from my sketches.

Screens

Homepage and report page.

My work

We heard

Volunteers wanted drafts and more control.

We changed

Save as Draft next to Submit.

Team

We built

Two interactive flows in Figma.

Then we tested

2 walkthroughs with UX students.

Jump to prototype

Key lesson. Making the prototype interactive exposed small gaps in navigation that static wireframes hid.

What I owned

Sketched the homepage and document page, and carried them through wireframes to the final prototype.
Wrote the usability testing protocol and owned user testing.
Organized the team's design process and documentation.
Helped build the interactivity in Figma with my teammates.

Design decisions

Sketching

I sketched the homepage and the document page. The team then combined ideas on a whiteboard.

My hand sketch of the homepage with action items, last case visited, and latest messages — My homepage sketch.

My hand sketch of a split-screen report page with a documents pane — My document page sketch.

Whiteboard sketches of the report page, an autofill pop-up, and a report preview — Team whiteboard sketch.

Wireframes

We turned my sketches into wireframes in Figma.

Homepage wireframe with a to-do list, last case visited, latest message, recent reports, and upcoming events — Homepage wireframe.

Report page wireframe with a court report beside a Chat, Files, and AI panel — Document page wireframe.

Usability testing

I owned user testing and wrote the protocol.

Screen recording of a usability test with a CASA volunteer — A usability test session.

How it worked

01Up to 30 minutes each
023 CASAs, from 6 months to 10 years of experience
03Questions for each page, compared with Optima, the system they already use

What we heard

Voice-to-text and picture uploads were liked. Drafts and privacy settings were wanted.
Red and green buttons were confusing and hard for colorblind users.

What it changed

Save as Draft next to Submit.
Color-only buttons flagged as an accessibility fix.

The final screens

The final homepage and report page grew from my sketches.

Final prototype homepage with active and previous case cards and a collapsible action items list — Homepage.

Final prototype report page with a case files pane, the court report, and MIC AI and Comments tabs — Report page.

Making it interactive

Two interactive flows in Figma. My teammates and I built the interactivity together, and I had a large part in it.

My workThe write a report flow came from my sketches and wireframes. See the sketches

Outcomes & evidence

3Usability tests with CASA volunteers, from 6 months to 10 years of experience.

2Cognitive walkthroughs of the interactive prototype with UX students.

2Fully interactive Figma flows delivered to the sponsor.

What changed

Volunteers asked for drafts, so the report page offers Save as Draft next to Submit.
Red and green buttons confused colorblind volunteers, so color-only buttons were flagged as an accessibility fix.
Every AI suggestion shows a disclaimer and can be skipped, edited, or confirmed, keeping the volunteer in control.

Design Approach

Prototyped in Figma and mapped in FigJam, with usability heuristics and UX laws in mind. Every AI suggestion shows a disclaimer and can be skipped, edited, or confirmed.

Figma FigJam Usability Testing Cognitive Walkthrough

Reflection & next steps

In a sensitive setting like child welfare, an AI feature has to earn trust before it can save time. Letting volunteers skip, edit, and confirm every suggestion mattered as much as the suggestion itself.

I also learned how to run usability tests with real users. Writing the protocol, finding volunteers, and comparing our screens with Optima, the system they already use, taught me to understand what people depend on today before asking them to change.

Recommended next

Create a report from the case view.
More interactivity, like rearranging cards.
Onboarding tooltips, and testing with more CASAs.