All work

Case study, Micromind

Microaggression training makes people defensive, so they stop learning.

Micromind is a concept for a scenario-based learning app that helps people recognize and respond to microaggressions at work, through low-pressure, story-driven practice. It was a graduate team project at the Harvard Graduate School of Education.

The 30-second version

Problem

Training on microaggressions tends to feel abstract or judgmental, so people get defensive instead of reflective.

What I did

Owned the UX and UI on the original team project. In 2026 I refreshed it with AI-assisted prototyping: the story flow, the screens, and the visual system.

What happened

Used in class and tested with classmates, who found it engaging and approachable and asked for more content.

My role
UX and UI design (owned). In 2026 I refreshed the story flow, the screens, and the visual system with AI-assisted prototyping.
Team
Four people including me on the original, graduate coursework. The 2026 refresh was mine.
Format
Mobile app concept, with a design system and core flows
Scope
A concept, not a shipped product. The first version was tested informally with peers.
1

The problem

Microaggressions are subtle, normalized, and hard to name. Most workplace training treats them as a compliance topic: a slide deck, a one-time workshop, a definition to memorize.

That tends to fail three ways. It feels abstract. It feels judgmental, so learners get defensive. And it happens once, so nothing sticks.

Who it's for

Employees across roles: people building self-awareness, managers learning to step in, and HR teams who want practice that outlasts a workshop.

2

What we learned first

Before sketching, our team did three kinds of research: a literature review on microaggressions and behavior change, interviews with employees about the training they'd had, and a scan of existing DEI learning tools.

All three pointed the same way. People learn more from recognizing a moment in context than from reading a definition. Employees wanted to engage but felt judged by the tools they'd used. And almost none of those tools were built for short, repeated practice.

Honest scope

The research was a team effort. My part was carrying it into the interface and the visual system.

3

What I decided

  • Make it a story, not a test. Learners move through one situation at a time, reading a moment the way they'd live it.
  • Offer choice before content. An activity grid lets learners pick where to start. That sense of control lowers the defensiveness that shuts learning down.
  • Use warmth on purpose. Rounded components, friendly illustration, and a soft palette lower the emotional barrier to a heavy topic without making it feel trivial.
  • Give feedback that supports. Reflection prompts and progress tracking encourage another round. Nobody gets graded.

What changed it

Testing early prototypes with classmates, I saw people stay open when a scenario felt like a story to move through rather than a test to fail. That shaped the flow.

4

Up close: how it looked, and what I changed

How it looked: the first version

Micromind activities screen: a coral wordmark under an illustrated header, Activities and Discover tabs, and a grid of character tiles to choose from
Activities: learners choose where to start.
Micromind journey screen headed Continue your journey, with Spot the Microaggression completed, a Practice again button, and three scenarios still at zero percent
Your journey: scenarios in order, and Practice again.
Micromind discover screen listing the Harvard implicit bias test and three TED talks
Discover: outside resources, like TED talks and an implicit bias test.
Micromind badges screen with a row of badge icons and progress bars under each
Badges: progress you can see.
The original Micromind wordmark in coral, with small illustrations inside the letters

Color

Coral#FD836B
Coral#FEA392
Coral#FDBAB1
Blue#5061B5
Blue#6E91F0
Blue#83D2F8
Blue#A1D8F8
Teal#00C6B7
Teal#65C1BD
Teal#BFFFE5
Yellow#FDB143
Yellow#FEBD4A
Cream#FDE9CD
Cream#FFF2E1

Type: Montserrat

Header 1

Bold

Header 2

Medium

Header 3

Medium

Header 3, light

Light

Paragraph. Often we don't even realize they're happening. That's where Micromind comes in.

Medium Let's dive inButton, semibold

Badges, 2020 to 2021

Badge icon: a knot of linked paths Badge icon: laurel wreath around the number 100 Badge icon: a rosette marked 50 percent Badge icon: a running figure Badge icon: a magnifying glass with a question mark Badge icon: four hands joined in a square

Illustration: characters from an early AI tool, florals from Shutterstock

Illustrated character: a smiling man in a blue shirt pointing up, surrounded by small icons Illustrated character: a man in a blue shirt thinking, with icons floating around him Illustrated character: a woman in a purple top pointing up, with icons around her Illustrated character: a woman with glasses in teal tones, with icons around her Illustration of colorful leaves and flowers Illustration of a potted plant and flowers
The first version's system: a coral, blue, teal and yellow palette, Montserrat throughout, line-drawn badges, and illustration that set the warm tone.
Wireframe: a grid of six activity tiles under a short paragraph
Wireframe: activity grid
Wireframe: a vertical journey of connected steps
Wireframe: journey
Wireframe: recent badges with a list beneath
Wireframe: badges
Wireframe: a profile page with a progress bar and overview blocks
Wireframe: profile

What's mine here and what isn't. The palette, the type choices, the wireframes, and the screens are my design, with AI help along the way. The badges date from the Harvard project in 2020 to 2021. The character illustrations came from an early AI image tool, around 2022. The two floral pieces are Shutterstock stock.

What I changed: the 2026 refresh

The first version leaned on warmth: rounded shapes, friendly illustration, a soft palette. The 2026 refresh keeps the warmth and cools it down. Blue and seafoam instead of coral, restrained corners instead of heavy rounding, video scenes instead of illustration. The subject is real harm, so the badges are named for the behavior they reward and read as encouragement, not points.

How the refresh was made

I came back to Micromind this year and rebuilt it with AI-assisted prototyping, the way I work now. The AI drafted screens and flows fast; the direction, the edits, and the calls on what the subject needed were mine.

Three Micromind screens from the 2026 refresh: a Badge earned dialog for Ally in Training, the splash screen with the line Practice the moments that matter, and the Continue your journey list
The 2026 refresh: a badge earned, the splash screen, and the journey view.
Your badges screen: First Scene, Sharp Eye and Spoke Up earned, one locked, and two badges in progress
Badges, earned by noticing, responding, and practicing.
A Clear Conversations scene: a short video, then the question What did you notice, with multiple choice answers
A scene: watch it, then answer what you noticed.
  1. Entry

    A quiet splash, then the activity grid. Learners pick where to start, and nothing is scored.

  2. Scene

    A short vertical video, told story-style. Tap to move through it, one moment at a time.

  3. What did you notice?

    Two multiple-choice questions about the scene, then an optional written reflection.

  4. Badge

    Cross a threshold and a badge appears, named for the behavior it rewards: Sharp Eye, Spoke Up, Ally in Training.

  5. Practice again. Any finished scenario restarts from scene one, and Discover holds short videos and articles for between sessions.

The original Micromind wordmark in coral, with small illustrations inside the letters The single-color blue Micromind wordmark used in the 2026 refresh

Color

Blue 600#5b8ce6
Blue 700#3f6fcb
Blue 100#cfe0fb
Seafoam 600#3aa693
Seafoam 500#55bfab
Seafoam 300#ace4da
Slate 700#303c54
Neutral 600#57677c
Neutral 200#e8ecf2
Video#151027

Type and shape

What did you notice?

Answer based on the scene you just watched. Sora for headings, Inter for everything else.

Badge earned

Submit answers Input, 10px Card, 24px
The 2026 system: the two wordmarks, a blue and seafoam palette on slate text, Sora and Inter, and three radii plus the pill.
5

What happened

Micromind was used in class and tested informally with classmates. They found it engaging and approachable, singled out the scenario-based approach, and asked for more content.

The critiques were useful too. The scenarios needed more cultural specificity to land across different identity groups, and each session needed a clearer learning outcome so people knew what they were building.

Honest scope

A design concept, tested with peers. It wasn't shipped or tested in a workplace.

6

What I'd change

I'd build it for the web. Mobile felt right for daily, personal practice, but workplaces adopt learning through the platforms they already use, and a web version could plug into those.

I'd also push the scenarios toward more cultural specificity and give every session one clear outcome.

What it taught me

Every visual decision in Micromind was also a learning decision. Warmth lowered defenses, clarity eased the load, and friendliness brought people back.

Let's talk.