Topic 1 — What is UX/UI design?

Goal: Understand what UX/UI designers do and why it matters.

Lesson 1.1 — The one job under all the jobs

Tessa Nardo spent eight years as an interior stylist, arranging retail floors so a tired shopper would drift naturally toward the thing they didn't know they wanted. On her first day at Wanderwell, a 40-person startup whose app helps ordinary people plan and book trips without a travel agent, her new mentor Marcus Bell asked her a question that sounded too simple to matter: "What do you think your job actually is here?"

She guessed: make the screens look good.

"Close," Marcus said. "Make them easy to use. Pretty is a tool. Easy is the job."

A UX/UI designer's one job is to make a product easy and pleasant to use. When an app feels obvious — you know where to tap, nothing trips you up, booking a flight takes four taps instead of forty — that ease was built on purpose. Someone shaped it. And when a screen makes you squint, hunt, and finally give up, that frustration was also shaped, just badly. Tessa already knew this from retail floors: a confusing store is a design failure you can feel in your feet. The screen is the same problem with a smaller surface.

Pretty is a tool. Easy is the job.

Hold onto that. Everything else in this topic is a way of doing that one job well.

Lesson 1.2 — UX and UI: the bones and the skin

In her first week, Tessa kept mixing up two letters that get stamped on her title: UX and UI. Marcus drew it on a whiteboard.

UX stands for user experience — how a product works and feels. The flow, the logic, the ease. When Tessa decides that "Book trip" should come before "Add travelers" because that's the order a real person thinks in, that's a UX decision. You don't see UX directly. You feel it as this makes sense or wait, where do I go now?

UI stands for user interface — how a product looks. The screens, the buttons, the colors, the type, the spacing — everything you actually see and touch. When Tessa makes the "Book trip" button big, blue, and impossible to miss at the bottom of the screen, that's a UI decision.

Here is the part beginners get wrong: they think you pick one. You don't.

UX is the bones; UI is the skin. A gorgeous button (great UI) that sits at the end of a confusing seven-step flow (bad UX) is still a product people abandon. A flawless flow (great UX) rendered in unreadable gray-on-gray text (bad UI) is one nobody can use either. The two are inseparable, and most working designers do both at once.

	UX (experience)	UI (interface)
Answers	how does it work and feel?	how does it look?
Tessa's call	"Book trip" comes before "Add travelers"	the button is big, blue, bottom of screen
You notice it as	this makes sense	this is clear and easy to read
The metaphor	the bones	the skin

Lesson 1.3 — Why this is a business decision, not a paint job

A few weeks in, Tessa sat through a meeting that changed how she saw her own work. Priya Anand, the product manager, pulled up a chart of where people dropped out of Wanderwell's booking flow. A huge chunk vanished on one screen: a payment form that asked for billing address details in a confusing order. Real travelers, ready to spend money, were quitting at the last step because a form annoyed them.

That screen was costing Wanderwell actual revenue. Not "looked a bit dated" — lost sales.

This is why good usability is a measurable business advantage, not decoration. A confusing checkout loses sales at the moment the customer was ready to buy. A long, nosy sign-up loses people before they've even started. A frictionless product, by contrast, keeps people coming back and gets them telling friends. Design moves three numbers any business cares about: revenue (do people buy?), retention (do they come back?), and reputation (do they recommend you, or warn people off?).

Tessa fixed the payment screen by reordering the fields and cutting two she'd realized weren't needed. The drop-off shrank. Nobody in that follow-up meeting said the form looked prettier. They said more people finished. That sentence — more people finished — is what design is for.

Lesson 1.4 — The trap: the user is not you

Tessa's sharpest instinct from styling was also her biggest hazard. She has taste. She knows what looks elegant. And early on, she designed Wanderwell's trip-summary screen exactly the way she'd want it: minimal, airy, with the price tucked discreetly in a corner because shouting about money felt tacky.

Then Hannah Reyes, Wanderwell's UX researcher, played her a clip from a usability session. A real user — a dad booking a family trip on a budget — scrolled the whole screen twice, jaw tight, muttering "where's the total?" The price Tessa had hidden out of good taste was the one thing he most needed to see.

That clip taught Tessa the mindset every designer has to internalize: the user is not you.

You know where everything is because you built it. You're comfortable with the jargon, you don't share their worry, you're not on a cracked phone with one bar of signal while a toddler cries. The whole craft is fighting the pull to design for your own taste, and instead shaping the product around real people — their goals, their habits, their confusions. Taste still matters. But taste serves the user, never the other way around.

Lesson 1.5 — A real designer's day (and the product trio)

So what does Tessa actually do between nine and five? Not eight hours of choosing fonts.

A real day blends five kinds of work:

• Understanding the problem — reading research, watching session clips from Hannah, figuring out where people struggle and why (Topic 4).
• Sketching and designing — turning ideas into rough wireframes and then real screens in Figma, the design tool most teams use (Topics 6, 9).
• Testing with real people — putting a design in front of actual users and watching where they stumble (Topic 7).
• Collaborating — and this is most of it.
• Iterating — fixing what testing exposed, because almost nothing is right on the first try.

That collaboration runs through what teams call the product trio: three people who own different slices of the same decision. Priya, the product manager, owns what to build and why — the business goal, the priorities. Tessa, the designer, owns what the experience should be — the flow and the feel. Dev Okonkwo, the frontend engineer, owns what's actually buildable and flags when an idea would take three months or break on older phones. None of them rules the others. A good feature is the overlap of all three.

Which means the deepest skill here is problem-solving with empathy, not drawing. Visual skill matters, and Tessa's eye is a real asset, but understanding people matters more, and the first version is never the last. Designers iterate constantly.

One more thing about the modern version of this job. AI tooling is now woven into the work: in Figma's 2025 AI report, around 40% of designers said they use AI to help analyze user data. Tessa uses it to summarize a stack of interview notes in minutes. But AI handed her patterns, not the answer. Choosing which experience is right for that anxious dad on a budget is still the human's call — still hers.

Worked example — One screen, the whole job in miniature

Wanderwell's data shows people abandoning the "choose your hotel" screen. Watch all five threads of this topic show up in one small project.

It starts with the business problem: Priya brings the number — too many travelers leave at the hotel step, and that's lost revenue. That's the trio in motion before a single pixel moves.

Tessa resists her first instinct (redesign the whole screen to her taste) and remembers the user is not you. She asks Hannah for research. The clips reveal the real snag: people can't tell which hotels are refundable, so they freeze rather than risk it. That's a UX problem — the flow hides the one fact people need to decide.

Now she designs. The UX fix: surface "Free cancellation" on each hotel card, before the user has to click in. The UI fix: a small green tag, readable at a glance, consistent with Marcus's design system. Bones, then skin.

She tests it with five people. Four breeze through; one still misses the tag because it's too pale. She iterates — darkens the green — and checks the contrast with Dev, who confirms it's buildable and accessible. Two weeks after launch, abandonment on that screen drops. Revenue, retention, reputation — all nudged by one green tag placed on purpose.

That is the entire job in miniature: understand the real problem, design the experience and the look together, test, iterate, and move a number that matters to the business.