# UX design

UX design (user experience design) is the work of shaping how a product works for the person using it: the steps they take, how information is organized, and how the product responds, checked with real users through research and testing.

Also called: User experience design, UX, Experience design, UX/UI design.

## In short

- UX design decides how a product works for its user: the steps, the structure, and the feedback along the way.
- The core deliverables are user flows, wireframes, and prototypes, plus what testing taught you.
- Good UX is judged by whether people finish what they came to do without confusion or help.
- [UI design](https://www.choie.co/glossary/ui-design) is the visual layer on top. They are separate skills that have to agree.

## What UX design covers

UX design starts from a person and a task. Someone opens your product to do something specific, like book a class or send an invoice. The UX designer's job is to make that path short and obvious, with an easy way back when the person makes a mistake.

In practice the work spans four connected areas.

- **User flows.** The steps a person takes to finish a task, including the branches when something goes wrong.
- **Information architecture.** How content and features are grouped and labeled, from the main navigation down to a single settings page.
- **Interaction design.** What happens when someone taps, types, or waits. This covers feedback, confirmations, transitions, and undo.
- **Research and testing.** Talking to users before designing, then watching them use the design to see where they get stuck.

## How the work runs

UX work is a loop. You learn what users need, propose a structure, make it testable, watch people use it, and change it. Each pass is cheap early and expensive late, so most of the loop should happen before engineering builds anything.

**Diagram: A typical UX loop.**

1. Research (Who the user is, what they need)
2. Flows and structure (Steps, screens, navigation)
3. Wireframes (Layout and priority, no style)
4. Prototype (Something people can try)
5. Test (Watch real users, fix what broke)

_After testing, the loop starts again with what you learned. Finding a problem here costs far less than finding it after launch._

Research does not need a lab or a big budget. A few conversations with the right users, and a few recorded sessions of people trying a prototype, usually surface the problems that matter most for a first release. [Usability testing](https://www.choie.co/glossary/usability-testing) covers how to run those sessions well. Choie runs the loop in code: in a [prototype week](https://www.choie.co/services/coded-prototype), days two to four design and code one workflow together, and day five is a walkthrough and one round of revisions.

## What a UX designer delivers

| Deliverable | What it shows | Who uses it |
| --- | --- | --- |
| User flow | Every step and branch of one task | The whole team, to agree scope |
| Sitemap or navigation map | Where everything lives and what it is called | Design and engineering |
| [Wireframes](https://www.choie.co/glossary/wireframe) | Layout and content priority for each screen | Design, to settle structure before style |
| [Prototype](https://www.choie.co/glossary/prototype) | How the flow behaves when someone uses it | Test participants and decision makers |
| Test findings | Where people got stuck and what changed | Everyone deciding what to build next |

The deliverables are a means to an end. A wireframe that never gets tested is a guess drawn neatly. What you are paying for is confidence that the flow works before anyone writes the code for it.

## UX design vs UI design

The two are often written together as UX/UI, and on small teams one person does both. They are still different skills. UX design decides what is on each screen and how the flow behaves. [UI design](https://www.choie.co/glossary/ui-design) decides how it looks and responds, from type and color to the visual states of every button.

**Diagram: UX design and UI design.**

**UX design**
- How the product works
- Flows, structure, and steps
- Wireframes and prototypes
- Judged by task success

**UI design**
- How the product looks and responds
- Type, color, spacing, and states
- Final screens and components
- Judged by clarity and consistency

_A product needs both. A clear flow behind a confusing interface fails, and so does a polished interface over a broken flow._

When budget is tight on a first release, put UX first. A plain interface over a clear flow gets people through the task. Visual polish can follow once you know the flow is right, often with the help of a [design system](https://www.choie.co/glossary/design-system).

## Common UX mistakes

- **Designing for yourself.** The team knows the product too well to see what confuses someone using it for the first time.
- **Skipping the unhappy paths.** Error messages and empty screens are part of the experience, and new users meet them early.
- **Testing too late.** Testing a finished build turns every finding into rework that has to compete with new features.
- **Asking users to design the fix.** People are good at showing you where they struggle and much less reliable at prescribing a solution. Watch what they do, then decide.

In a Choie build, the first live link goes out on the first Friday, so UX decisions are tested on working software early. See [how a project runs](https://www.choie.co/process).

## Common questions

### What is the difference between UX and UI design?

UX design decides how a product works, and UI design decides how it looks and responds on screen. UX covers flows, structure, and testing, while UI covers type, color, layout, and components.

### Does a small product need UX research?

Yes, though it can be small. A handful of conversations with target users and a few sessions watching people try a prototype will catch problems that would otherwise appear after launch, when they cost more to fix.

### When should UX design happen in a project?

Mostly before the build, then in smaller loops during it. Settling flows and testing a prototype first is much cheaper than changing working code later. In a Choie build, the first two weeks settle flows, hierarchy, and what to build first, and design continues alongside the code after that.

### What tools do UX designers use?

Most use Figma for flows, wireframes, and prototypes, plus a video call tool for interviews and tests. Some prototype in code when the flow depends on real data or device features such as the camera.

Related: [UI design](https://www.choie.co/glossary/ui-design), [User flow](https://www.choie.co/glossary/user-flow), [Information architecture (IA)](https://www.choie.co/glossary/information-architecture), [User research](https://www.choie.co/glossary/user-research), [Usability testing](https://www.choie.co/glossary/usability-testing).

HTML: https://www.choie.co/glossary/ux-design