O
Octo
O
Octo
CoursesPricingDashboardPrivacyTerms

© 2026 Octo

UX/UI Design
1The UX Design Process2User Research Methods3Information Architecture4Wireframing5Prototyping & Interaction Design6Usability Testing7UI Design Principles8Building Your UX Portfolio
Module 1

The UX Design Process

Every great product starts with the same messy, human process. Here's how real UX teams discover problems, define solutions, design interfaces, and deliver products people love.

The $1 billion button

In 2009, Jared Spool told a story that changed how companies think about design. A major e-commerce site had a simple checkout flow: enter your email and password, then buy. The problem? Millions of people could not remember their password. They would click "Forgot Password," wait for an email that sometimes never came, and abandon their cart. Others refused to create an account at all.

A UX designer proposed a radical change: replace the "Register" button with a "Continue" button and let people check out as guests. No forced account creation. No password wall between the customer and their purchase.

The result? Revenue increased by $300 million in the first year. The company eventually attributed over $1 billion in additional revenue to that single design change.

One button. One insight about human behavior. One billion dollars.

This is what UX design does — and this module shows you how the process works from start to finish.

300Mrevenue increase in year one

45%drop in checkout abandonment

1button that changed everything

What UX design actually is

UX stands for User Experience. It is the practice of designing products, services, and systems so that they are useful, usable, and enjoyable for the people who use them.

UX design is not:

  • Making things look pretty (that is part of UI design)
  • Only about websites and apps (it applies to ATMs, hospital check-in kiosks, even airport signage)
  • Something one person does alone in a room with Figma

UX design is a process — a repeatable way of understanding problems, exploring solutions, testing ideas, and shipping products that actually work for real humans.

Common misconceptionReality
UX = UI (visual design)UX is the full experience; UI is the visual layer on top
UX designers just make wireframesResearch, strategy, testing, and iteration are the bulk of the work
You need to be artisticYou need empathy, logic, and communication — not drawing skills
UX is a step at the endUX is a process that runs from discovery through delivery
🔑Don Norman coined the term in 1993
Don Norman, while at Apple, created the term "User Experience" because he thought "human interface" and "usability" were too narrow. He wanted a term that encompassed every aspect of a person's interaction with a company and its products — from the moment they hear about it, to unboxing, to daily use, to customer support. That holistic view is still what separates great UX from feature checklists.

The Double Diamond — how real design works

The most widely used framework for the UX process is the Double Diamond, created by the British Design Council in 2005 after studying how designers at companies like IKEA, Sony, and Starbucks actually work.

It has four phases arranged in two diamonds:

Discover
Define
Design
Deliver
Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

Diamond 1 — The Problem Space

  • Discover (diverge): Go wide. Talk to users. Observe behavior. Gather data. Understand the landscape. You are trying to understand the real problem, not the one your stakeholders assumed.
  • Define (converge): Synthesize your research. Frame the problem clearly. Write a problem statement. Decide what you are solving — and what you are not.

Diamond 2 — The Solution Space

  • Design (diverge): Generate many possible solutions. Sketch, wireframe, prototype. Do not commit to one idea too early. Quantity beats quality at this stage.
  • Deliver (converge): Test your best ideas with real users. Refine. Build. Ship. Measure. Iterate based on real data.

✗ Without AI

  • ✗Jump straight to wireframes
  • ✗Design for stakeholders, not users
  • ✗Test once at the end
  • ✗Ship and move on

✓ With AI

  • ✓Spend 30% of time in discovery
  • ✓Research with real users first
  • ✓Test early with paper prototypes
  • ✓Measure outcomes and iterate

There Are No Dumb Questions

"Does every project really go through all four phases?"

In theory, yes. In practice, the phases overlap and loop. A startup building an MVP might compress Discover and Define into a single week of customer interviews. An enterprise redesign might spend three months in Discovery alone. The key is that you never skip understanding the problem (Diamond 1) even when you are under pressure to jump to solutions (Diamond 2).

"Is the Double Diamond the same as Design Thinking?"

They are close cousins. Design Thinking (popularized by IDEO and Stanford's d.school) uses five stages: Empathize, Define, Ideate, Prototype, Test. The Double Diamond uses four: Discover, Define, Design, Deliver. Both follow the same diverge-converge-diverge-converge pattern. The Double Diamond tends to be used more in professional design teams; Design Thinking is more common in business and education contexts.

Design Thinking in five stages

Design Thinking is the most famous formalization of the UX process, taught at Stanford, used at Google, Apple, and Airbnb, and applicable far beyond software:

Empathize — Immerse yourself in the user's world. Interview them. Watch them struggle. Feel their frustration. You cannot design for people you do not understand.

Define — Synthesize what you learned into a clear problem statement. "How might we help busy parents find healthy dinner recipes in under 5 minutes?" is a good problem statement. "Make the app better" is not.

Ideate — Generate as many solutions as possible. Crazy ideas welcome. Quantity over quality. A 15-minute brainstorm should produce 30+ ideas. You will throw most away — that is the point.

Prototype — Build a quick, cheap version of your best ideas. Paper sketches. Clickable Figma mockups. Cardboard models. The goal is to make your idea tangible enough to test — not to build the final product.

Test — Put your prototype in front of real users. Watch them use it. Listen to their confusion. Identify what works and what does not. Then go back to any earlier stage and iterate.

⚠️Design Thinking is not linear
The five stages are not a waterfall. You will loop back constantly. Testing reveals that you defined the problem wrong? Go back to Empathize. A prototype exposes a new opportunity? Jump to Ideate. The best design teams treat these stages as tools in a toolkit, not steps in a recipe.

⚡

Spot the Phase

25 XP
For each activity, identify which Design Thinking stage it belongs to: **Empathize**, **Define**, **Ideate**, **Prototype**, or **Test**? 1. You sit in a coffee shop and watch how people order from a self-service kiosk. You note where they hesitate and tap the wrong button. 2. You write: "How might we reduce checkout time for first-time users from 4 minutes to under 90 seconds?" 3. Your team uses sticky notes to generate 40 different approaches to the onboarding flow in 20 minutes. 4. You build a 5-screen clickable mockup in Figma that simulates the new checkout flow. 5. You invite 5 users to try your mockup while you watch and take notes. _Hint: Empathize is about observing and understanding. Define is about framing the problem. Ideate is about generating many solutions. Prototype is about building something testable. Test is about learning from real users._

How real teams work — Airbnb's design process

Airbnb is one of the most design-driven companies in the world. Their co-founder, Brian Chesky, once said: "We hired our first designer before our first engineer."

Here is how Airbnb's UX team works on a typical feature:

Week 1-2 — Discovery. Researchers analyze support tickets, conduct user interviews, and review behavioral data. When Airbnb redesigned their search experience, they discovered that guests were not filtering by price — they were filtering by vibe. People wanted a "cozy cabin" or a "beachfront villa," not a "$150-$200/night listing." This insight was invisible in the analytics.

Week 3 — Problem Framing. The team writes a design brief: what is the user problem, what does success look like, what constraints exist. They use "How Might We" statements to frame the challenge.

Week 4-5 — Exploration. Designers sketch dozens of concepts. They run "design sprints" (a structured 5-day process popularized by Google Ventures) to rapidly move from idea to tested prototype.

Week 6-7 — Prototyping and Testing. High-fidelity prototypes are tested with real Airbnb users. The team watches recordings, identifies patterns, and iterates.

Week 8+ — Build and Measure. Engineering builds the feature. The team runs A/B tests to measure real-world impact. Data feeds back into the next discovery cycle.

2007Airbnb founded

Three designers rent air mattresses to conference attendees

2009The photography pivot

Founders personally photograph listings — bookings double overnight

2014Full rebrand

Airbnb redesigns entire experience around belonging, introduces Belo logo

2016Experiences launch

UX research reveals travelers want activities, not just beds

2020Flexible search

Pandemic shifts search from dates to feelings — I am Flexible feature ships

2022Categories redesign

Research insight: guests browse by vibe, not by price

There Are No Dumb Questions

"I am a solo designer. Can I really do all this?"

You scale the process to your resources. A solo designer might compress the entire Double Diamond into two weeks: 3 days of user interviews (Discover), 1 day to synthesize findings (Define), 3 days of sketching and wireframing (Design), and 3 days of prototype testing (Deliver). The phases stay the same; the depth changes.

"What if my team wants to skip research and just build?"

This is the most common challenge in UX. The answer is to make the cost of skipping research visible. The $1 billion button story works because it shows that one research insight generated more revenue than a year of feature development. Frame research as risk reduction: "We can spend 2 weeks understanding the problem, or 6 months building the wrong solution."

⚡

Design a Mini Discovery

50 XP
Pick an app you use every day (Instagram, Spotify, your banking app, anything). Identify one thing that frustrates you about it. Now plan a mini discovery sprint: 1. **Problem observation**: Describe the frustrating experience in detail. What are you trying to do? Where does the app fail you? 2. **User question**: Write 3 interview questions you would ask other users to see if they share your frustration. 3. **How Might We**: Frame the problem as a "How Might We" statement (e.g., "How might we help users find recently played songs without scrolling through their entire library?"). 4. **Quick sketch**: Describe (in words) one possible solution. You do not need to draw it — just describe what the screen would look like and how it would work. _Hint: The best HMW statements are specific enough to guide solutions but broad enough to allow creativity. "HMW improve the app" is too vague. "HMW add a search bar to the playlist screen" is too narrow (it presumes the solution). "HMW help users find specific songs faster" is just right._

The UX designer's toolkit

UX designers use different tools at different stages. Here is what the modern UX toolkit looks like:

StageActivitiesCommon tools
DiscoverUser interviews, surveys, analytics review, competitive analysisMaze, UserTesting, Google Analytics, Hotjar
DefinePersonas, journey maps, problem statements, "How Might We"Miro, FigJam, Notion
DesignSketching, wireframing, prototyping, design systemsFigma, Sketch, Adobe XD
DeliverUsability testing, A/B testing, developer handoff, measurementMaze, Optimizely, Figma Dev Mode, Amplitude
🔑Figma dominates the industry
As of 2024, Figma is used by over 80% of product designers globally. It is collaborative (multiple designers work on the same file simultaneously), web-based (no installation needed), and free for individuals. If you learn one design tool, learn Figma. The other modules in this track will use it extensively.

Key takeaways

  • The $1 billion button proved that understanding user behavior can generate more value than any feature — UX design is a business strategy, not just a craft
  • The Double Diamond provides the structure: Discover, Define, Design, Deliver — diverge to explore, converge to focus, twice
  • Design Thinking offers five stages (Empathize, Define, Ideate, Prototype, Test) that loop and overlap rather than running sequentially
  • Real teams like Airbnb compress and adapt the process to their context, but they never skip discovery research
  • The UX toolkit spans research, synthesis, design, and testing — Figma is the current industry standard for the design phase
  • You do not need to be artistic — UX design requires empathy, structured thinking, and a willingness to test your assumptions with real people

?

Knowledge Check

1.In the Double Diamond framework, what happens in the 'Discover' phase?

2.What is the key difference between Diamond 1 (Discover/Define) and Diamond 2 (Design/Deliver)?

3.Which Design Thinking stage involves generating as many solutions as possible without judging them?

4.Why did Airbnb's search redesign shift from price-based filtering to 'vibe-based' categories?

Next

User Research Methods