How to Think About User Experience Before You Design Anything

You are building something people will use. Before you choose colours, pick fonts, or lay out a screen, you need to understand how humans experience the things they interact with — and why most digital products get it wrong.

Who this is for

You want to build a web app, a tool, or a platform. You may have read from-zero-to-building and understand the basic architecture of software. Now you need to understand the layer that sits between your system and the human who uses it: the experience.

This path is for you if:

You have never formally studied design but need to build something people will actually use
You want to direct an AI tool (or a designer) with confidence, not just accept what looks pretty
You want to understand why some products feel effortless and others feel hostile

What this article is NOT

This is not a Figma tutorial or a colour theory course. This is a thinking tutorial — it builds the mental models that underpin every well-designed product. The tools come later; the judgement comes first.

Part 1 — The Norman Door

The most important idea in design can be explained with a door.

You have pushed a door that needed to be pulled. Everyone has. The door looked like it should be pushed — maybe it had a flat plate where a handle should be, or no signal at all. Don Norman, the cognitive scientist who wrote The Design of Everyday Things, calls this a “Norman Door”: an object whose design tells you to do the wrong thing.¹

This is the foundational principle of user-experience: design is not how something looks. Design is how something communicates what it does.

graph LR
    A[User sees object] --> B{Design signals clear?}
    B -->|yes| C[User acts correctly]
    B -->|no| D[User acts wrongly]
    D --> E[User blames themselves]

    style C fill:#5cb85c,color:#fff
    style E fill:#e74c3c,color:#fff

Three concepts from Norman’s work matter for everything that follows:¹

Concept	What it means	Door example
Affordance	What an object allows you to do	A handle affords pulling
Signifier	The signal that tells you what to do	A flat plate signals “push”
Feedback	Confirmation that your action worked	The door opens

When affordances and signifiers align, the design is invisible — you act without thinking. When they conflict, you get a Norman Door. Every frustrating app, every confusing website, every form you abandoned halfway through is a Norman Door in digital form.

Why this matters for you

When you build a digital product — or when AI generates an interface for you — you need to evaluate whether the design communicates correctly. Does the button look clickable? Does the navigation tell you where you are? Does the form tell you what went wrong? If the answer is no, you have a Norman Door.

Go deeper

Open affordances-and-signifiers for the full explanation, or mental-models for how users build internal maps of how things work.

Part 2 — Start with who, not what

The most common mistake in product design: building what you want instead of what your users need. You are not your user. Your assumptions about what makes sense are shaped by your own expertise, context, and biases — and they are almost certainly wrong about someone else’s experience.

This is why every serious design process starts with research, not screens.

Personas

A persona is a fictional but research-based representation of a key user type. It captures goals, behaviours, pain points, and context — not demographics. A good persona answers: “What is this person trying to accomplish, and what stands in their way?”²

graph TD
    R[User Research] --> I[Interviews + Observation]
    R --> S[Surveys + Analytics]
    I --> P[Patterns Emerge]
    S --> P
    P --> PE[Persona]
    PE --> G[Goals]
    PE --> B[Behaviours]
    PE --> PA[Pain Points]

    style PE fill:#4a9ede,color:#fff

Personas are grounded in real data — interviews, surveys, field studies, analytics. They are not invented archetypes. A persona without research is a guess in a costume.

Mental models

Your users carry mental-models — internal representations of how they think things work. A person who has used email for twenty years has a mental model of “inbox, sent, drafts, trash.” If your app organises messages differently, it doesn’t matter how logical your system is. The user will be confused because the design conflicts with their existing model.¹

Good design aligns with the user’s mental model. Great design gently extends it.

The first design question

Before sketching a single screen, answer: who is using this, what do they already understand, and what are they trying to achieve? If you cannot answer these three questions from evidence, you are not ready to design.

Part 3 — Map the journey, not the screen

Beginners design screens. Experienced designers design journeys.

A user journey map is a visual representation of the complete experience a person has when trying to achieve a goal with your product. It captures not just what they do, but what they think and feel at each stage.³

graph LR
    A[Awareness] --> B[Consideration]
    B --> C[First Use]
    C --> D[Core Task]
    D --> E[Completion]
    E --> F[Return or Leave]

    style A fill:#e8b84b,color:#fff
    style D fill:#4a9ede,color:#fff
    style F fill:#9b59b6,color:#fff

Stage	Actions	Thoughts	Emotions
Awareness	Finds your product	”Could this solve my problem?”	Curious, sceptical
First use	Signs up, explores	”Where do I start?”	Hopeful, confused
Core task	Tries the main feature	”Is this doing what I expected?”	Focused, frustrated or satisfied
Completion	Achieves goal (or gives up)	“Was that worth it?”	Relieved, delighted, or annoyed

The map reveals where the experience breaks — and those breakpoints are almost never where you expect them. A product might have a beautiful landing page but a registration form that loses 60% of users. Without the journey map, you would never see the gap.

Design thinking

design-thinking is the process that produces journey maps and turns them into solutions. Originally popularised by IDEO and Stanford’s d.school, it runs in five iterative stages:⁴

graph LR
    A[Empathise] --> B[Define]
    B --> C[Ideate]
    C --> D[Prototype]
    D --> E[Test]
    E -.->|iterate| A

    style A fill:#e8b84b,color:#fff
    style B fill:#4a9ede,color:#fff
    style C fill:#5cb85c,color:#fff
    style D fill:#9b59b6,color:#fff
    style E fill:#e74c3c,color:#fff

Empathise — Understand the user through research, interviews, observation
Define — Synthesise research into a clear problem statement
Ideate — Generate diverse solutions (brainstorm, sketch, explore)
Prototype — Build quick, low-fidelity representations
Test — Try with real users, gather feedback, iterate

The arrows loop back. This is not a waterfall — it is a cycle you run continuously. The prototype does not need to be code. A paper sketch, a clickable wireframe, even a storyboard drawn on sticky notes is a prototype.

Information architecture

information-architecture is the structure underneath the journey: how content is organised, labelled, and connected so users can find what they need. It is to a website what a floor plan is to a building — invisible when done well, maddening when done poorly.⁵

The journey principle

Design the experience, not the screen. A screen is one frame in a film. If the frames don’t connect into a coherent story, no amount of visual polish will save the product.

Part 4 — The rules your eyes already know

You do not need to invent usability from scratch. Decades of research have produced principles that reliably predict whether an interface works. Two frameworks matter most.

Nielsen’s usability heuristics

Jakob Nielsen published ten heuristics in 1994, refined them over thirty years, and they remain the industry standard for evaluating any interface.⁶ Think of them as a health check:

Heuristic	What it means	Violation example
Visibility of system status	Always show what is happening	A file uploads with no progress indicator
Match the real world	Use the user’s language, not yours	A banking app says “initiate funds transfer” instead of “send money”
User control and freedom	Provide undo and clear exits	No way to cancel a multi-step form
Consistency	Same action, same result, everywhere	A “Save” button is blue on one page, green on another
Error prevention	Stop mistakes before they happen	A date field that accepts invalid formats
Recognition over recall	Show options, don’t make users remember	A search with no autocomplete or recent history
Flexibility	Shortcuts for experts, simplicity for novices	No keyboard shortcuts in a daily-use tool
Minimalist design	Remove what doesn’t serve the task	A dashboard cluttered with features nobody uses
Help with errors	Explain what went wrong and how to fix it	”Error 500” with no explanation
Documentation	Task-focused help when needed	No onboarding for a complex product

You can run a heuristic evaluation on any product — yours or someone else’s — in an afternoon. Walk through the interface with this table open and note every violation. It will catch the majority of usability problems before a single user tests it.

Gestalt principles

The gestalt-principles were discovered by German psychologists in the 1920s. They describe how the human brain groups visual elements — and designers exploit these tendencies to create layouts that feel intuitive:⁷

graph TD
    G[Gestalt Principles] --> PR[Proximity - close items feel grouped]
    G --> SI[Similarity - matching items feel related]
    G --> CO[Continuity - the eye follows smooth paths]
    G --> CL[Closure - the brain completes gaps]
    G --> FG[Figure-Ground - foreground separates from background]

    style G fill:#4a9ede,color:#fff

Proximity is the most powerful. Put related items close together and separate unrelated items, and you have already solved half of your layout problems — no borders, lines, or boxes needed.

In plain terms

Your brain is already running these rules every time you look at a screen. Good design works with those rules. Bad design works against them — and that is why it feels wrong even when you cannot articulate why.

Part 5 — Building with systems, not pages

Modern interfaces are not designed one screen at a time. They are built from reusable components assembled into systems.

Atomic design

Brad Frost’s atomic-design methodology borrows from chemistry: build complex interfaces from progressively larger building blocks.⁸

graph LR
    A[Atoms] --> M[Molecules]
    M --> O[Organisms]
    O --> T[Templates]
    T --> P[Pages]

    style A fill:#e8b84b,color:#fff
    style M fill:#4a9ede,color:#fff
    style O fill:#5cb85c,color:#fff
    style T fill:#9b59b6,color:#fff
    style P fill:#e74c3c,color:#fff

Level	What it is	Example
Atom	Smallest element	A button, an input field, a label
Molecule	Atoms combined into a functional unit	A search bar (input + button)
Organism	Molecules forming a distinct section	A navigation bar (logo + search + menu)
Template	Page structure showing where organisms go	A blog layout with header, content area, sidebar
Page	A template filled with real content	The actual blog post a user reads

This is the same principle as separation-of-concerns applied to design: each level has one job, and changing one atom (the colour of every button) cascades through every molecule, organism, and page that uses it.

Design systems and tokens

A design system codifies these components along with rules for using them: spacing, colour, typography, interaction patterns. It is the single source of truth for how your product looks and behaves.

Modern systems use design tokens — named variables that store design decisions (colours, spacing, fonts) in a platform-agnostic format. A token like color-primary: #b56a4f ensures the same terracotta appears in Figma, React, iOS, and email templates without anyone manually copying hex values.⁹

Accessibility is not optional

accessibility means building products that work for everyone, including people with visual, auditory, motor, or cognitive disabilities. The Web Content Accessibility Guidelines (WCAG) define the standard through four principles: Perceivable, Operable, Understandable, Robust (POUR).¹⁰

The numbers are stark: 95.9% of the top million websites fail basic WCAG 2.2 standards.¹¹ And yet accessible design is not charity — it is better design for everyone. Curb cuts were designed for wheelchairs; they are used by parents with prams, travellers with luggage, and cyclists. The same is true for digital accessibility: captions help people in noisy environments, high contrast helps everyone in bright sunlight, keyboard navigation helps power users.

inclusive-design goes further: designing for the full spectrum of human diversity from the start, not patching at the end.

The systems principle

Build the system, not the page. If every screen is a one-off, every change requires rewriting everything. If the system is sound, the pages take care of themselves.

Part 6 — Where the interface is going

Everything above remains true. But AI is changing what an interface can be.

From static to generated

Traditional UI is predefined: a designer draws screens, a developer builds them, every user sees the same layout. generative-ui flips this. Instead of navigating through menus to find what you need, AI predicts your intent and generates a bespoke micro-interface with only the elements relevant to your task — which dissolves once the task is complete.¹²

graph LR
    subgraph Traditional
        U1[User navigates] --> S1[Static screens]
        S1 --> A1[Finds what they need]
    end
    subgraph AI-generated
        U2[User states intent] --> AI[AI interprets]
        AI --> S2[Custom interface appears]
        S2 --> A2[Task completed]
    end

    style S1 fill:#e8b84b,color:#fff
    style AI fill:#4a9ede,color:#fff
    style S2 fill:#5cb85c,color:#fff

Google’s Gemini already generates HTML/CSS interfaces on the fly. Jakob Nielsen describes this as the shift from “navigation-based UX” to “intent-based UX” — the interface adapts to the user rather than the user adapting to the interface.¹²

From reactive to anticipatory

anticipatory-design takes personalisation further: the system acts before you ask. Your app notices you check the weather every morning and surfaces the forecast before you open the weather screen. Context-aware personalisation can reduce task completion time by more than 25%.¹³

From pages to agents

Perhaps the biggest shift: from conversational UI (asking AI a question) to delegative UI (assigning AI a goal). Forms give way to intent canvases. Progress indicators become narratives. Component libraries evolve into pattern generators that adapt based on context.¹⁴

This does not make the principles above obsolete — it makes them more important. When an AI generates an interface, someone still needs to evaluate whether it respects usability heuristics, whether it is accessible, whether it aligns with the user’s mental model. That someone is you.

The key question

Ask yourself: “Would a first-time user understand what to do here without instructions?” If the answer depends on the user reading a manual, the design has failed — whether it was made by a human or generated by AI.

Part 7 — The map so far

graph TD
    UX[User Experience] --> UN[Understanding Users]
    UN --> PE[Personas]
    UN --> MM[Mental Models]
    UN --> UR[User Research]

    UX --> MA[Mapping the Experience]
    MA --> JM[Journey Mapping]
    MA --> DT[Design Thinking]
    MA --> IA[Information Architecture]

    UX --> PR[Principles]
    PR --> NH[Usability Heuristics]
    PR --> GP[Gestalt Principles]
    PR --> AF[Affordances and Signifiers]

    UX --> BU[Building Interfaces]
    BU --> AD[Atomic Design]
    BU --> DS[Design Systems]
    BU --> AC[Accessibility and Inclusive Design]
    BU --> RD[Responsive Design]

    UX --> FU[The AI Shift]
    FU --> GU[Generative UI]
    FU --> AN[Anticipatory Design]
    FU --> AG[Agents and Delegative UI]

    style UX fill:#4a9ede,color:#fff

Every node above is a concept you can explore further. You do not need to master them all now. You need to know they exist, how they connect, and which to reach for when evaluating a design decision.

What you now understand

Mental models you have gained

The Norman Door — design communicates what to do; when it fails, users blame themselves

Personas and mental models — start with who the user is and what they already understand, not what you want to build

Journey mapping — design the complete experience across time, not individual screens

Design thinking — empathise, define, ideate, prototype, test, repeat

Usability heuristics — ten rules that catch the majority of interface problems

Gestalt principles — how the brain groups visual elements, and why proximity is your most powerful layout tool

Systems over pages — build from atoms to organisms using design systems and tokens

Accessibility — POUR principles, WCAG standards, and why inclusive design benefits everyone

The AI shift — from static screens to generated interfaces, from reactive to anticipatory, from pages to agents

Check your understanding

Test yourself before moving on (click to expand)

Explain the Norman Door concept to someone who has never thought about design. Why do users blame themselves when the design is at fault?

Describe the five stages of design thinking. Why does the process loop back rather than move in a straight line?

Distinguish between a persona and a demographic profile. Why is “women aged 25-35” not a useful persona?

Interpret this scenario: a checkout form has a 70% drop-off rate at the payment step. The payment page is visually polished. Using what you have learned, identify three possible causes and which principles they violate.

Design a simple journey map for a user signing up for a community tool. Include at least four stages, and for each stage note what the user does, thinks, and feels.

Where to go next

I want to design a specific product

Take the principles from this path and apply them to a project. Start with a persona and a journey map before opening any design tool. Use the learning pipeline to match your project to the concepts you need.

Best for: People ready to move from understanding to building.

I want to understand the software underneath

The experience layer sits on top of software architecture. If you have not read it yet, from-zero-to-building covers the base: frontend, backend, APIs, databases, and the document chain from intent to code.

Best for: People who want the full stack picture.

I want to learn the AI layer

AI changes both how you design and what you design. If you want to understand how agentic systems work under the hood, agentic-design covers the architecture: routing, knowledge, orchestration, and human-in-the-loop patterns.

Best for: People building AI-powered products.

I want to go deeper on accessibility and inclusive design

Explore the concept cards for accessibility and inclusive-design, then read the WCAG guidelines directly. Accessibility is both a legal requirement and a design superpower.

Best for: People building products for diverse audiences.

Explorer

How to Think About User Experience Before You Design Anything

How to Think About User Experience Before You Design Anything

Who this is for

Part 1 — The Norman Door

Part 2 — Start with who, not what

Personas

Mental models

Part 3 — Map the journey, not the screen

Design thinking

Information architecture

Part 4 — The rules your eyes already know

Nielsen’s usability heuristics

Gestalt principles

Part 5 — Building with systems, not pages

Atomic design

Design systems and tokens

Accessibility is not optional

Part 6 — Where the interface is going

From static to generated

From reactive to anticipatory

From pages to agents

Part 7 — The map so far

What you now understand

Check your understanding

Where to go next

Sources

Further reading

Graph View

Table of Contents

Explorer

How to Think About User Experience Before You Design Anything

How to Think About User Experience Before You Design Anything

Who this is for

Part 1 — The Norman Door

Part 2 — Start with who, not what

Personas

Mental models

Part 3 — Map the journey, not the screen

Design thinking

Information architecture

Part 4 — The rules your eyes already know

Nielsen’s usability heuristics

Gestalt principles

Part 5 — Building with systems, not pages

Atomic design

Design systems and tokens

Accessibility is not optional

Part 6 — Where the interface is going

From static to generated

From reactive to anticipatory

From pages to agents

Part 7 — The map so far

What you now understand

Check your understanding

Where to go next

Sources

Further reading

Footnotes

Graph View

Table of Contents