Testing Debrief Pairs

Pair up with someone you haven't worked with recently.

  1. What was the #1 usability issue from your Round 2 testing?
  2. What surprised you most about how people used your prototype?
  3. What's the single most important change you need to make?

Be ready to share your biggest surprise with the class.

Prayer

Kalli, will you pray for us today?

Unit D: Neue App

Your case study is design work too

Today

Testing Debrief
Storytelling & the Case Study
D10 Assignment Details
Work Session — Iterate + Document

By the end of today...

Narrative Arc

You'll know Freytag's Pyramid and how to structure a case study as a five-stage story

Story Thread

You'll describe your entire project in one clear paragraph

Doc Craft

You'll apply hierarchy, spacing, and restraint to the case study document itself

Artifact Map

You'll know exactly which deliverables (D1–D9) go into which case study sections

Why this matters

Employers don't hire portfolios full of pretty screens — they hire designers who can tell the story of their thinking.

A great product poorly documented is invisible. A well-told design story opens doors.

Storytelling & the Case Study

Not a lab report — a narrative

Freytag's Pyramid

A five-stage storytelling framework — maps perfectly to the design process

  1. Exposition — Who has a problem? Why do you care? What’s the inciting incident?
  2. Rising Action — What did you discover through research? What challenges emerged?
  3. Climax — What was the turning point — the test or insight that changed everything?
  4. Falling Action — How did you refine and iterate based on that insight?
  5. Resolution — What did you build? What were the outcomes? What did you learn?

The key question for every section: “What did I learn?” — not “What did I make?”

The inciting incident for school projects

This is NOT “my professor assigned it.” It’s the moment the problem became personally real.

  1. Personal friction — “I kept abandoning every habit tracker after a week because…”
  2. User interview surprise — “During my Mom Test interviews, one person said something that reframed the whole problem…”
  3. Competitive gap — “I tried every app in this space and none of them solved…”
  4. Observation — “I watched my roommate spend 20 minutes doing something that should take 2…”

Be honest it started as a class project — then show the moment it became real.

Your case study sections map to the five stages

Exposition

Title page, creative brief, persona, your motivation — Who is this for and why should we care?

Rising Action

User research, competitive analysis, wireframes, paper prototypes — What problems did you uncover?

Climax

The pivotal usability test or insight — before/after comparisons — What changed your direction?

Falling Action

Style guide, high-fi iteration, testing round 2 — How did you respond to what you learned?

Resolution

Final screens, motion, outcomes, reflection, AI usage — The polished solution + honest reflection

Every case study needs a turning point.

The climax proves you can think, not just execute.

What makes a compelling climax

Before/after comparisons with annotations explaining why you changed it

“I tested it and discovered X, so I changed Y”

Common mistakes: screenshot dump with no thread  ·  skipping to the final screens  ·  hiding the failures  ·  no turning point

Think about your testing debrief stories from earlier — those surprises and pivots are exactly where your climax lives.

Write your project’s story — one sentence per stage

  1. Exposition: Who has the problem and why do you care?
  2. Rising Action: What did you discover through research and testing?
  3. Climax: What was the turning point that changed your direction?
  4. Falling Action: How did you refine your design in response?

Share with your partner. Does it make sense to someone who’s never seen your screens? This becomes the opening of your case study.

Your case study is a design artifact

Apply the same craft principles from Day 21 to the document itself:

  1. Title — Large, bold. Project name and one-line description.
  2. Section heads — Clear, consistent. Guide the reader through the narrative.
  3. Body text — Readable, well-spaced. The bulk of your story.
  4. Captions — Small, paired with images. Explain what the reader is seeing.

Consistent layout: margins, columns, image placement, whitespace. No "Lorem ipsum."

D10: Draft Documentation + Animated Prototype

Due: Wednesday, Apr 1 @ 11:55pm

Animated Walkthrough

Screen recording of your clickable prototype. Core flow: onboarding → success. At least 2 animations. MP4 or MOV, 1–3 min.

Case Study Draft

All sections roughed in — this is a draft. Focus on narrative structure, not polish. Each section: header + artifacts + narrative text.

Get the story right first. Polish comes later.

Next up

Work Session — Three Rounds

Round 1 (25 min): Apply your top 3 testing insights to your Figma screens. Take "before" screenshots first — you'll need them for your case study.

Round 2 (25 min): Write your case study narrative outline. Map your existing deliverables (D1–D9) to sections. Identify gaps.

Round 3 (25 min): Begin assembling — set up page layout, place artifacts, write section intros. Structure over perfection.

D10: Draft Documentation + Animated Prototype — due Wed, Apr 1 @ 11:55pm

1 /