UX1: Thinking like a product designer
What UX and UI really are
🎯You'll be able to
Explain the difference between user experience (UX) and user interface (UI) design, and name what a product designer is responsible for.
🏠The everyday picture
Two railway stations can have the same trains. In one, signs tell you the platform as you walk in, the stairs are where you expect and the announcements are clear. In the other, you ask three people and still nearly miss the train. The trains are the product; the station is the experience.
📘What it really is
-
User experience (UX) is everything a person goes through to get something done with a product: finding it, understanding it, using it, recovering from mistakes, and trusting the result.
-
User interface (UI) is the part people see and touch: screens, buttons, words, colours, layout and motion.
-
UX design decides what the product should do and in what order: research, journeys, structure, content and testing. UI design decides how each screen looks and behaves.
-
A product designer usually does both, working with product managers (what to build and why), developers (how it's built) and support teams (what goes wrong).
-
Good design is judged by outcomes: can people finish their task, how long it takes, how many mistakes they make, and whether they are confident it worked.
-
Not decoration. A beautiful screen that people misread is bad design. A plain screen that everyone completes first time is good design that could still be improved.
📝A worked example
Input: the SehatSlot starter journey in the kit.
Steps:
- Run
npm run serveand openhttp://localhost:8080/prototype/in a window about 375 pixels wide. - Book any appointment and note each moment you hesitate.
- Sort your notes into UX (order, words, structure) and UI (look and behaviour).
Expected output, for example:
| Note | UX or UI |
|---|---|
| The heading says "Book OPD"; many patients won't know the term | UX (content) |
| The chosen time is only a slightly different grey | UI (visual state) |
| Nothing explains what happens after booking | UX (journey) |
| "Choose a time" links are small and grey | UI (size and colour) |
🌍Where it's used
- Banking apps: the order of steps in a transfer, and how the confirmation shows who will receive the money.
- Government services: forms that ask only what's needed, in plain words, with help where people get stuck.
- Food delivery: a short path from hunger to "order placed", with clear delivery times.
📝Case scenario
A pharmacy chain redesigned its app with new colours and illustrations, and complaints went up. Watching five customers showed why: the "Repeat my last order" button had moved into a menu. The team put it back on the home screen. The new look stayed; the journey was fixed.
🖱️Try it
Pick an app you use every week. Write three things about its UX and three about its UI. Success: each UX item is about order, words or structure, and each UI item is about appearance or behaviour.
⚠️Common mistakes
- Treating UX as "make it pretty". Sign: the brief asks only for colours and a logo. Fix: ask what people are trying to do first.
- Designing for yourself. Sign: "I find it easy, so it's fine." Fix: watch people who aren't designers use it (UX2).
- Judging by opinion. Sign: debates end with the most senior person's taste. Fix: agree on what success looks like and measure it.
🛠️For your project
Project 2 asks you to fix the starter journey. Your notes from this lesson's worked example are a first list of what to change.
✅Quick check
What is the difference between UX and UI?
Show the answer
UX is the whole experience of getting a task done; UI is the part people see and touch.
How is good design judged?
Show the answer
By outcomes: whether people complete their task, how quickly, with how many mistakes, and how confident they are.