the design process.

foundations & frameworks.↑ top

the mental scaffolding the rest of the process hangs on. read these before anything else.

the gatekeepers of ux

every design decision has to satisfy three things at once. miss one and the product feels broken, even if you can't say why.

psychology

how it feels — emotion, satisfaction, engagement.

science

how it works — functionality, feasibility, performance.

art

how it looks — aesthetics, brand, visual order.

and all three still have to land inside three real constraints: user needs, business goals, technical reality.

the design thinking process (six phases)

1. discover — research, empathy, context.
2. define — frame the problem, name the user.
3. ideate — generate many options.
4. prototype — make the options tangible.
5. test — put them in front of real humans.
6. present — communicate thinking, align stakeholders.

this page collapses those six into the 4d structure (discover → define → design → deliver) because that's how most briefs actually get written.

the medicine wheel

an indigenous education framework used throughout cuxd-111 to ground the practice. four directions, one whole.

design inception

concentric circles — the strategic center comes first, the visible surface comes last.

• why — the purpose. the strategic intent.
• mood — the emotional tone. the brand voice.
• visual language — space, shape, color, movement.

product design strategy — 9 elements

1. user-centered focus.
2. market research.
3. clear objectives.
4. cross-functional collaboration.
5. prototyping & testing.
6. brand alignment.
7. technical considerations.
8. launch & marketing.
9. post-launch evaluation.

discover.↑ top

figure out who the user is, what they're trying to do, and what's actually in the way. the whole phase is one discipline: listen before you design.

the spectrum of empathy

a ladder, not a switch. the goal is to climb it.

• pity — i feel bad for you.
• sympathy — i feel bad with you.
• empathy — i feel what you feel.
• compassion — i feel it and i act.

design is solving real human problems — not imaginary ones.
— cuxd-111, session 02

mental models

how a user thinks something works — their internal picture. a design succeeds when the product's behavior matches that picture.

research methods

user interviews

• structured — fixed script, same questions in the same order.
• semi-structured — a guide, but you follow threads. most useful for most projects.
• unstructured — a conversation with a goal.

principles: open-ended questions, active listening, no leading, build rapport, probe for the why. record (with consent). take timestamps. do a thematic pass right after.

surveys

good for breadth, bad for depth. use after qualitative work to validate, not before.

• question types — multiple choice, likert, open-ended.
• watch for — sampling bias, leading wording, survey fatigue.
• target — a sample size that your analysis method can actually support.

naturalistic / diary / analytics / a-b

observation in the wild, longitudinal self-reports, log data, controlled comparisons. each one answers a different question; pick by the question, not by the method.

competitive analysis

it's a research method, not a sales exercise. the point is to see what users already expect.

• direct — solving the same problem the same way.
• indirect — solving the same problem a different way.
• replacement — the workaround that wins if you do nothing.

method: set a goal, pick 2–4 competitors, build a feature matrix, test hands-on, read the reviews, finish with a swot summary.

netflix didn't out-blockbuster blockbuster. it replaced the whole category.
— user-research, class 05

empathy mapping

what a user says, thinks, feels, does — plus what's around them. a single page that keeps the team honest.

supporting layers: hears (influencers), sees (environment, market), pains (fears, frustrations), gains (wants, wins).

deliverables out of discover

• research plan.
• interview guides + transcripts.
• survey instrument + raw data.
• competitive matrix + swot.
• empathy maps per segment.
• stakeholder map.
• mental model documentation.

define.↑ top

take the pile of research and shape it into a single, specific, defensible problem — and a user worth solving for.

from research to theme — synthesis

affinity mapping

the workhorse synthesis method. two steps, done with the team, not alone.

1. generate — every quote, fact, observation on its own sticky.
2. organize — cluster by similarity, label the clusters, label the labels. themes fall out.

how-might-we (hmw)

reframe a pain point as an open design prompt. "users get lost at checkout" → "how might we make the final step feel like progress, not a tax?"

personas

fictional-but-evidenced people. 3–5 is the right number — enough to cover ~80% of the audience, few enough to remember.

persona anatomy

• identity — name, age, role, location.
• narrative — a short day-in-the-life.
• goals — what "done" looks like for them.
• motivations — why they care.
• behaviors — what they actually do.
• pain points — what's currently in the way.
• channels & brand affinity — where they live online.

mistakes to avoid

• built on assumptions — fix: validate with real interviews.
• too many (10+) or only one — fix: 3–5 primaries.
• demographic trivia over behavior — fix: lead with motivations.
• ignoring anti-personas — fix: name who you're not designing for.
• made once, never touched — fix: revisit every 6–12 months.
• trapped in marketing — fix: put them in slack, onboarding, spec docs.

product opportunity statement

a single paragraph that answers who / what / where / when / why. if you can't write it, you don't know the problem yet.

customer journey mapping

three zones, one artifact.

zone a — the lens

which actor, which scenario.

zone b — the experience

phases, actions, thoughts, emotions across the arc.

zone c — the insights

where the opportunities live.

typical phases: awareness → consideration → purchase → onboarding → usage → support → advocacy. plot an emotion curve across them. the valleys are your brief.

value proposition

one clear sentence explaining the benefit, the need it fills, and why it's different. not a mission statement. not a tagline.

the value proposition canvas

the twelve templates

1. benefit-oriented.
2. pain point.
3. outcome-based.
4. emotional appeal.
5. convenience-driven.
6. exclusivity.
7. expert endorsement.
8. testimonial-based.
9. aspirational.
10. cost-efficiency.
11. innovation highlight.
12. risk reduction.

examples worth copying

• airbnb — "belong anywhere." (aspirational)
• duckduckgo — "a search engine that doesn't track you." (pain point)
• shopify — "anyone, anywhere, can start a business." (outcome)
• zapier — "the most connected ai orchestration platform." (innovation)

jobs to be done (jtbd)

the format: "when [situation], i want [motivation], so i can [outcome]." forces you to frame the product as a hire, not a feature list.

deliverables out of define

• 3–5 personas + 1–2 anti-personas.
• affinity map + themed insight list.
• customer journey map with emotion curve.
• product opportunity statement.
• value proposition canvas + one-sentence value prop.
• jtbd statements.
• prioritized design brief.

design.↑ top

turn the brief into structure, then into pixels. information first, interaction second, visual last.

the design odyssey

ryan ford's five-phase nest — the narrative arc of a single design project.

1. beginning — initiative, framing, context.
2. exploration — divergent thinking, many options.
3. bridge — convergence, decisions.
4. construction — detail, refinement.
5. conclusion — finalization, handoff.

flows — from coarse to fine

• job flow — the user's goal, abstracted from the product.
• user flow — the step-by-step sequence.
• wire flow — sequence + rough structure.
• page flow — page-to-page detail with states.

always start at job flow. do not go to wireframes until the job flow makes sense without a screen attached.

information architecture

how content is organized so users can find it. the invisible skeleton.

• principles — group by user mental model, not company org chart.
• label for recognition, not clever naming.
• test the tree before you style the leaves.

card sorting

the main research method for ia. three flavors.

open

users make their own categories. use to discover.

closed

users sort into your categories. use to validate.

hybrid

your categories + the option to add new ones.

running it well: clear goal, one idea per card, neutral facilitation, encourage debate, document with photos, debrief with the participant.

task analysis

• hierarchical task analysis (hta) — decompose a goal into subgoals into actions.
• cognitive task analysis (cta) — capture the thinking, not just the steps.

visual language

four levers. one mood.

design challenges

timed, constrained, rapid. ten minutes, sixty-second iterations, many artifacts, one chosen. the point is quantity forces range; range reveals the right direction.

prototyping

match the fidelity to the question.

low-fi

paper, rough sketch. testing: flow, hierarchy, concept.

mid-fi

grayscale, clickable. testing: layout, nav, labeling.

high-fi

final visuals, real copy, realistic interaction. testing: polish, emotion, conversion.

dark patterns — what not to do

ethics is part of the craft. know the names so you can refuse them.

• disguised ads & misdirection.
• confirm shaming — "no thanks, i hate saving money."
• bait and switch.
• hidden costs at the last step.
• friend spam / forced continuity.
• privacy zuckering.
• fomo manipulation.
• sneak into basket.
• trick questions.
• price comparison prevention.
• roach motel — easy in, impossible out.

mvp scoping

impact × feasibility. do the high-impact / easy work first. park the high-impact / hard work for v2. never build the low-impact / hard quadrant.

deliverables out of design

• job + user flows.
• ia diagram / sitemap.
• task analysis (hta).
• wireframes → mid-fi → high-fi.
• interactive prototype.
• visual system (space, shape, color, motion).
• mvp scope with priority matrix.

deliver.↑ top

test, iterate, hand off, present, launch, measure. a design isn't done at final-final.fig.

usability testing

pick the format by the question you're answering.

• moderated, in-person — rich, expensive, best for early concept tests.
• moderated, remote — the default for most teams.
• unmoderated — cheap, fast, good for later-stage tasks.

think-aloud protocol

ask the user to narrate while they use it. resist the urge to help. silence is data. every "hm" is a clue.

a-b testing

two versions, one variable, enough traffic to reach significance. use to decide — not to explore. a test without a hypothesis is a horoscope.

accessibility — wcag aa

• contrast — 4.5:1 for body, 3:1 for large text.
• keyboard — every action reachable without a mouse.
• semantics — real headings, labels, landmarks.
• focus state — visible, always.
• touch target — 44×44 min.
• screen reader — test it. don't guess.

accessibility is not a phase-4 checklist. it's a phase-1 assumption.

design handoff

a handoff spec covers: layout + spacing tokens, design tokens (color, type, radius, motion), component props + variants, interaction states, responsive breakpoints, edge cases, animation timings. if a dev has to guess, the spec is incomplete.

design system documentation

for each component: name, purpose, variants, states, props, accessibility notes, do/don't examples, and the decision log for why it exists.

presentation — the lighthouse framework

1. foundation — the problem and the rationale.
2. structure — the narrative arc through the work.
3. illumination — clear visuals that carry the weight.
4. guidance — the "so what" for every decision.
5. endurance — the memorable takeaway.

presenting well

• legibility first — hierarchy, readable type.
• eye contact, not slide-reading.
• paint the edges — context before content.
• chunk the information.
• fewer words, more visual — let the design speak.

narrative — the story arc

a seven-point shape borrowed from the hero's journey. works for a case study, a launch email, a pitch, a readme.

1. exposition — set the scene.
2. inciting incident — the problem arrives.
3. rising action — the attempts and obstacles.
4. climax — the key decision / insight.
5. falling action — the consequences.
6. resolution — what shipped.
7. denouement — what we learned, what's next.

case study structure

1. problem + context.
2. research + analysis.
3. process + iterations.
4. solution + rationale.
5. outcomes + metrics.
6. lessons + future directions.

launch + post-launch

• launch plan — rollout, comms, success metrics named upfront.
• kpis — tied to the jobs you said you'd solve, not vanity.
• post-launch review — at 30/60/90. what worked, what shifted, what to kill.
• keep the personas living — revisit every 6–12 months.

deliverables out of deliver

• usability testing report.
• iteration log — what changed, why.
• accessibility audit.
• handoff spec + design system docs.
• case study deck.
• launch plan + post-launch eval framework.

glossary.↑ top

terms that keep showing up — defined once, in plain english.

affinity mapping

grouping qualitative notes into themes.

anti-persona

the user you are explicitly not designing for.

card sorting

ia research method: users group content into categories.

dark pattern

ui that exploits the user for the business's gain.

design inception

concentric-circle brief: why → mood → visual language.

design odyssey

ryan ford's 5-phase project arc.

empathy map

a one-pager of says / thinks / feels / does.

gatekeepers of ux

psychology + science + art as the three filters.

hmw

"how might we" — an open design prompt.

hta

hierarchical task analysis — decomposing a goal into steps.

jtbd

"when [situation], i want [motivation], so i can [outcome]."

journey map

phases + emotions + touchpoints + opportunities.

lighthouse framework

5-part presentation structure.

medicine wheel

indigenous framework: balance, wholeness, interconnected, inter-relationship.

mental model

how the user thinks the thing works.

mvp

smallest shippable thing that tests the hypothesis.

persona

evidenced fictional user — proto, qualitative, or statistical.

product opportunity statement

who / what / where / when / why, in one paragraph.

prototype fidelity

low / mid / high — matched to the test question.

story arc

7-point narrative structure for case studies.

swot

strengths, weaknesses, opportunities, threats — a summary, not a method.

think-aloud

user narrates while using the product.

value proposition canvas

value map + customer profile, matched.

wcag aa

the accessibility standard you're aiming for.

wireframe

structure without style — layout intent only.