Skip to content

Moritz · Case study

Redesigning a law firm's front door

Moritz is an AI-native law firm. I redesigned its client intake end to end and built it as a working prototype in the firm's own codebase.

3 days

from brief to working prototype

4

client complaints addressed

5

states in one step mark

Design EngineeringUX/UIAI Product Design
Role
Product design · Design engineering · UX writing
Client
Moritz, an AI-native law firm
Timeline
3 days · September 2026
Delivered
A working TypeScript prototype behind a design switch

The customer

Moritz is an AI-native law firm

Five Moritz lawyers with their backgrounds: Daniel, Kyle, Max, Aélita, Catarina.
The lawyers behind the agent.

Clients type what happened, an agent builds the case notes, and a lawyer takes over. Intake is the first thing they do with Moritz, and the only part they do alone.

The problem

Clients finished intake unsure what happened

  • I'm not sure my case was actually submitted.
  • I don't know which step I'm on, or how many are left.
  • I can't find where to upload my documents.
  • It feels sterile. Like a form.

The approach

The process is now on screen

  • A story before the client starts.
  • A receipt after every answer.
  • A case number and track after submitting.
  • A lawyer’s face at each moment.
Index-card sketch of the home page: a greeting, two chips, a composer, and a 'New case' panel with a 0/11 count and a vertical step list.
Day one, on an index card: the composer under the greeting, the brief panel beside it, a count at the top.

The story

A six-second story plays once

First visit. The story plays once.
The three beats: Talk to Moritz, Receive a quote and pay, Our lawyers take on your case.
Three beats, ending in people.

One mark

One step mark, five states

A skipped optional step in the brief panel, drawn with a dashed ring.
In the brief panel: skipped, still counted.
A step receipt in the thread: a green check and 'Saved timeline'.
In the thread: a receipt after each answer.
The four-step track: Case submitted, Estimating quote, Accept and pay, Meet your lawyer.
On the card: the same mark, four steps.
Index-card sketch of the case track drawn twice: once at submitted, once at quote and payment.
The track, sketched twice: submitted, then quote and payment.

The step dot was drawn six different ways across the app. I built one component with five states (filled, current, dashed, outline, ghost) and used it everywhere.

Starting

One typed message opens the case

The first message starts the case.

The composer sits under the greeting on every visit. A draft tile appears on the first message and the case number appears on submit.

Where am I

Every answer gets a receipt

Answer, receipt, next question.
The case brief header with its step count.
The count, top of the brief panel.
Index-card sketch of a conversation thread with a step receipt sitting inline between messages.
The receipt was always going to live in the thread.

Each receipt is one line in the thread, and the count in the brief moves. A skipped step still counts as done.

Transparency

Moritz says what it filled in

One message, three items filled, one line saying so.
Moritz: 'I took what you need and other side from your message. Change anything I've got wrong.'
The line, in the script.

A small model pulls answers out of the message. A hand-written script decides what Moritz says next, so the flow works even if the model is slow or wrong.

Uploading

Upload is available at every step

The composer: 'Describe your matter, or drop a document here', with an Attach file button.
Describe your matter, or drop a document here.
The brief panel mid-intake, with an Attach files button under Documents.
Brief panel, any step: Attach files.
The brief panel after a file is attached, with an Add more files button.
Brief panel, after: Add more files.

The attach control sits in the placeholder, in Moritz’s first message, and in the brief panel. For contract matters, the document is the first question.

Submitting

Submitting ends in a case number

The moment of submission.
The submitted card: 'Case submitted', case number M-2026-0127, and a four-step track ending in three lawyer faces.
The track ends in the three lawyers.
Index-card sketch of the submitted card: a four-step track ending in three faces.
The card, as sketched: four steps ending in three faces.

Waiting

Moritz narrates the wait

Moritz lists two finished steps, 'Read your documents' and 'Case notes ready', then hands the case to the lawyers.
Three real steps, then a handover.

Moritz lists each step the agent takes and says you can leave. The old card promised a quote time nobody could keep; the new one says where the quote will arrive.

Coming back

Every case tile shows stage and lawyer

Your cases: a hero tile with the four-step track, 'Ready for payment', and 'Aélita is on your case'.
Your cases, right after submitting.
A returning client's cases, each with the lawyer's photo.
A returning client. A lawyer on every case.
Index-card sketch of two case tiles: a full tile with a step track and a slim tile with a face.
A full tile with the track, a slim one with a face.
Index-card sketch of a 'Your cases' section on the home page, with case tiles and a view-all link.
Your cases on the home page, with a view-all link.

A tile shows a track until a lawyer is assigned, then a name and a face.

Human

A real person at every step

The bottom of the submitted card: the three lawyers the case is heading toward, and what happens next.
Who the case is going to, and what happens next.
The brief panel footer: three lawyer faces and a line about the quote.
Brief panel, every step.
A case tile after submit, its track ending in three lawyer faces.
Case tile, after submit.
Index-card sketch of the home page showing a row of five lawyer portraits before any case exists.
Five lawyers on the home page, before a case exists.

The same three faces follow a case from card to tile. A lawyer is named only once one is assigned.

Voice

Moritz sounds like a firm

I took the timeline and other side from your message. Change anything I’ve got wrong.
— Moritz, after the first message

Rejected

Three ideas I crossed out

Index-card sketch of a composer that changes size, crossed out with a large X and the handwritten label NO SIZE MORPH.
A composer that changes size.
Index-card sketch of a receipt that appears at the top of the page, crossed out with a large X and the handwritten label FIRES AT TOP.
A receipt that fires at the top of the page.
Index-card sketch of a brief panel collapsing into a rail, crossed out with a large X and the handwritten label NO COLLAPSE.
A brief panel that collapses into a rail.

Drawn and crossed out on the same cards. The composer stays one size, the receipt lands in the thread, and the brief panel stays open.

Next

Three next steps

  • Watch strangers use it, starting with a Maze or UX Army run.
  • One primary action per screen.
  • Email at each milestone: submitted, quote ready, lawyer assigned.