How product design works

What UX and UI mean, how design work flows from a problem to a shipped screen, and how to tell whether a design worked.

Also called user experience, user interface, UX/UI

What: User experience (UX) is how well someone gets a job done with a product, end to end. User interface (UI) is the visible layer: layout, type, colour, components and their states.
Why: Knowing the difference tells you which skill a problem needs: a confusing flow is a UX problem, a cramped inconsistent screen is a UI problem, and most roles expect both.
Example: A checkout that looks polished but hides the delivery cost until the last step has good UI and bad UX.

Watch out

Treating UX as making things pretty, or treating UI as decoration added at the end.

Also called design process, discover define develop deliver

What: A model of the design process in two phases that each widen then narrow: discover and define the right problem, then develop and deliver the right solution.
Why: It reminds teams to explore before deciding, twice: once for the problem and once for the solution. Real projects loop back when a test fails.

Watch out

Skipping the first diamond and polishing a solution to a problem nobody checked.

What: One or two sentences naming who is struggling, with what, and why it matters, without naming a solution.
Why: It keeps research, design and testing pointed at the same target, and gives you something to measure success against.
Example: Students miss assignment deadlines because due dates are spread across three portals, which costs them marks.

Watch out

Hiding a solution inside the statement, such as "users need a calendar view".

Also called lo-fi, low fidelity

What: A simple layout of a screen in grey boxes and placeholder text, showing structure and content priority without visual styling.
Why: Cheap to make and change, and it keeps feedback on structure and flow instead of colours and fonts.

Watch out

Adding colour and real imagery too early, which pulls every review towards visual taste.

Also called clickable prototype, hi-fi prototype

What: A version of a design people can interact with, from linked paper sketches to realistic Figma or code prototypes.
Why: It lets you test whether people can complete a task before anything is built, which is far cheaper than fixing a shipped feature.

Watch out

Prototyping only the happy path, so testers never hit the problems real users will.

Also called product designer, UX researcher, design engineer, UX writer

What: The usual jobs around design: product designers own flows and screens, UX researchers run studies, content designers own words, and design engineers build interfaces and prototypes in code.
Why: Knowing who does what tells you who to ask and which path fits you. Small teams merge roles, so juniors often do several.

Watch out

Choosing a job title from its name without reading what the role actually does day to day.

Also called completion rate

What: The share of participants who complete a given task, often reported with time on task and error count.
Why: It is the simplest evidence that a design works, and it lets you compare before and after a redesign.
Example: Four of five testers completed checkout on the new design, against two of five on the old one.

Also called SUS

What: A standard ten-question questionnaire about perceived usability, scored from 0 to 100.
Why: It is quick, widely used and comparable across products and rounds of testing.

Watch out

Reading a SUS score as a percentage or a grade; it only means something compared with other scores.

Go deeper