Case studyMXDAI project2026Live product

Northstar, AI bias you can see

A learning tool where students build a simple AI, run it, and see who it leaves behind. I designed and built it alone, from brief to live app.

TL;DR

Turned AI bias from a lecture topic into a hands-on experiment, as measured by 16 documented cases a learner can run with no account and no AI cost, by designing a teaching model that calculates every result and an AI that only explains it.

Open Northstar Try the model on this page

DocumentationFigJam UX doc Notion project doc

Designing for AIDesigning with AIVoice agentConversation designExplainable AIAI guardrailsResponsible AI

Role: Solo product designerResearch to launch
Methods: AI Experience CanvasPersona, jobs to be doneConversation design
Deliverables: Live web appIA and flowsContent for 16 domains
Tools: Figma, FigJamLovableClaude, Deepgram

northstarforai.lovable.app

01 · Overview

Bias is taught with words. I wanted people to watch it happen.

AI now helps decide who gets hired, who gets a loan and who is seen first at a hospital. Northstar turns that bias into an experiment you run yourself.

The challenge

Fairness tools are built for data scientists. Students had nothing that shows cause and effect without statistics.

What I did

Research, structure, content and visual design. Then I built and shipped it, with an AI narrator and a voice guide.

Where it stands

Live and complete. It hasn’t been tested with learners yet.

16real-world domains

2ways in: Ask or Experiment

3study formats per run

Tool	Built for	What it asks of you	Gap for learners
IBM AI Fairness 360	Data scientists	Python, fairness metrics, your own model	Needs code and statistics to start
Google What-If Tool	ML practitioners	A trained model and a dataset	Powerful, but assumes you know what to look for
Articles and courses	Everyone	Reading	Explains bias without letting you cause it
Northstar	Students and curious people	Moving a slider and pressing Run	Designed to close this gap

Designed for design students first, and for the high schooler next to them.

I framed the project with an AI Experience Canvas: who the tool is for, what jobs it has to do, and where AI actually helps.

AI Experience CanvasJobs to be doneConversation designIntent mapping

Design student

Focused on responsible innovation. In her ethics course she debates algorithmic fairness, but it stays theoretical.

Learns by doingVisual thinkerNot technical

Goal

“I want to understand how design choices and data diversity change AI outcomes, not just be told they do.”

Pain point

“I know bias exists, but I can’t picture what it looks like in practice.”

Resources are theoretical or built for engineers, and it’s hard to see how a small data change shifts outcomes.

Behaviour

“I learn best by doing. I want to experiment, not just read about ethics.”

Jobs to be done

When I’m learning about AI bias, I want to interact with simple visual simulations of how dataset diversity changes system behavior, so I can see the link between data, bias and real outcomes.

Led to: Experiment mode

When I’m exploring cases of biased AI in hiring, lending or healthcare, I want to adjust the variables and observe outcomes, so I can understand the human impact of data decisions.

Led to: 16 domains

When I finish a simulation, I want an AI guide to help me reflect on what I saw and why it matters, so I can apply it in my practice.

Led to: Narrator and voice guide

When I share what I learned with peers or teachers, I want to export visual summaries and notes, so I can show my reasoning.

Led to: Study material

Primary

Design and CS students, early-career professionals and high-school AI learners.

Secondary

Educators, workshop facilitators and high-school teachers adding AI literacy to their classes.

Context of use

Classrooms, workshops, online modules and self-study, often discussed in a group.

Design principles

Written before any screen, then used to settle design decisions. Click one to see where it shows up in the product.

03 · Information architecture

A simple structure with two ways in.

The app has four areas: Ask, Experiment, Recents and Profile. Most screens sit under Experiment, and the violet ones are where the AI speaks.

NorthstarLanding

Ask

Plain-language Q&A Voice guide

Experiment

Domain library 16 Scenario preview Workspace

Setup Results AI analysis Study material 3 Ask about this run

Recents

Saved runs and chats

Profile

Name, advanced controls, reset

04 · AI design

The model does the maths. The AI only explains it.

A language model can invent numbers, and a wrong number teaches a wrong lesson. So I split the work: a fixed teaching model calculates every result, and the AI receives those exact numbers and only explains them. The same setup always gives the same result.

Grounded AIAI guardrailsExplainable AIPrompt design

Learner inputs

Share of each group in the training data, decision bar, factors on or off, algorithm.

Scenario data

Factors, how strongly each one stands in for a group, group labels, real-world grounding.

Teaching model

Every number on screen comes from here. The same setup always gives the same numbers. Labelled in the app as “teaching numbers, not real measurements”.

Outputs

Approval rate per group, fairness gap, what drove it, next steps.

AI narrator and study material

Receives the exact numbers. Explains, quizzes, answers follow-ups.

Never invents numbersPlain languageHedged claimsNo verdicts

Read more: how the AI responds to each learner

Before designing screens, I mapped how the AI should respond to three kinds of learner.

Learner stepAI speaksDecisionDesign note

Try it: the Hiring scenario

This runs the same formula and weights as Northstar’s Hiring scenario, so the numbers match the live app.

How balanced the training data is

AIs learn from examples. Give one group fewer and watch what happens.

Women in the training data20%

How strict the decision bar is

Raise it and fewer people are approved, in both groups.

Decision bar60

What the AI is allowed to look at

Turn a factor off and the AI stops using it.

How the AI learns

Who gets approved for an interview

Large gap

Baseline

Default setup

Your experiment

After your changes

Fairness gap

0%51530%+

The voice guide

Learners can also talk to Northstar. It gives short answers, stops when they interrupt, and shows every line as text.

Voice conversation on a phone: the orb is listening, with the guide's greeting shown as text, and Mute and Replay last buttons

ListeningA calm drift that swells a little while you talk.

ThinkingThe mist swirls faster while the answer is prepared, so a pause never feels like the guide has gone quiet.

SpeakingIt swells with each phrase and settles in the pauses. Start talking at any moment and it stops to listen.

Deep dive Northstar Voice Agent The conversation design behind it, the four versions that failed, and how I fixed it.

05 · Content design

16 real-world cases to learn from.

I started with four cases: Hiring, Credit, Health and School. Four made bias look like a problem of a few industries, so I grew the library to sixteen. Each case uses the same template, so only the story changes.

Content designResponsible AIUX writing

How I chose what to include

Documented, not imagined.A case only made the list if real AI bias had been reported in that area. Each one shows its real-world source in the app.
Bias is everywhere.Together the cases cover work, money, education, health, justice and the platforms people use every day.
Close to the learner.Every learner should find a case that touches their own life, from school discipline to a loan or a job application.

Employment and work

Hiring
Promotions
Gig platform ratings

Finance and access

Loans
Credit limits
Insurance pricing
Mortgage and rental screening

Education

Admissions
Scholarships and aid
School discipline

Health

Care prioritization
Transplant waitlist

Justice and public services

Pretrial risk
Benefits review

Consumer and platform

Ad delivery
Content moderation

Sensitive case: health, justice, benefits, housing or livelihoods. The AI follows extra rules here. Learners can also upload their own CSV, which stays in the browser.

The product, screen by screen.

Real screens from the live app. Pick a screen, then tap the numbered pins to read the decisions behind it.

Visual design

Grey keeps the focus on the results. Violet marks the AI and the main actions. Green, amber and red only show the fairness gap, always with a word next to them.

Background#1B1B20

Violet#8B7CF6 · AI and main buttons

Fairness gapBalanced · Growing · Large gap

07 · Product development

From design file to a live app, on my own.

Designing with AIAI-assisted prototypingDesign engineering

How I prioritised

One designer, limited AI credits, and a public app with no login. Every idea had to earn its place against those limits.

I builtInstead ofWhy

A fixed teaching model that calculates every numberLetting the AI produce resultsA made-up number teaches the wrong lesson. The same setup always gives the same result.

Written feedback for every slider moveAn AI comment on every changeMoving a slider costs nothing and answers instantly. The AI is only called when a learner asks.

Real group names, like Men and WomenNeutral "Group A" and "Group B"Learners couldn't follow the lesson without knowing who was who. Each case is tied to a documented example, and the gap closes when the data changes, so the cause stays the data.

Study material that opens in place of the resultsA separate pop-upLearners keep their run in view while they study, the way NotebookLM works.

A targeted fix to how the voice guide takes turnsRebuilding voice on a new platformThe real problem was turn-taking, not the platform. I shelved the rebuild and fixed the cause.

A profile saved only in the browserUser accountsHigh-school learners shouldn't have to sign up or share personal data, and accounts would add a database, security risk and cost.

What got in the way

Ran out of AI credits

What happened: The app builder’s credits ran out before the voice work was done.
What I did: I edited the code myself and saved paid credits for setup steps.

Free AI tools kept failing

What happened: Free models often returned errors during testing.
What I did: I moved the chat and narrator to Claude and wrote clear error messages.

The AI went quiet

What happened: When the AI credits ran out, chat and voice stopped answering.
What I did: Experiments run in the browser, so the core lesson never depends on the AI. Failed replies now say “The guide is resting, try again in a bit.”

08 · Impact

What I shipped, and how I'll know it works.

Northstar is live and complete, built solo from brief to launch. It hasn't been tested with learners yet, so these are the targets I set and the test I'll run to measure them.

1designer, from research to a live app

16real-world cases, each tied to a documented example

0AI calls needed to run an experiment

How I'll measure success

A 20-minute session with 5 to 8 design and high-school students: one question before an experiment, the same question after.

What I'll measureTargetHow

Learners can explain why the AI was unfair6 of 8 after one experimentSame open question before and after one experiment

First experiment finished without help7 of 8, in under 3 minutesObserved task, timed

Learners try a fix on their ownAt least 2 runs per sessionRuns saved in each session

They know the numbers are teaching numbers8 of 10 agreeOne question at the end

09 · Reflection

What I’d take forward.

These are the habits I’d bring to the next AI product.

Ask experts to review sensitive cases

Health, justice and housing cases need more than careful wording. I’d ask people who work in those fields to review them before launch.

Test the AI’s answers like a design

I’d keep a set of tricky learner questions and check every prompt change against them, so tone and accuracy stay consistent.

Design with a teacher in the room

Classrooms are a main setting for Northstar. Next time I’d bring a teacher in early, so group use shapes the flow from the start.