Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/UX Design Foundations/Prototyping Workflows
Level 6 · Workflows and Deliverables

Prototyping Workflows

14 min read
6 exercises
250 XP
Start lesson

Ready to test what you learned?

Complete the lesson quiz and earn 250 XP.

Start quiz

Topics in this lesson

The Power of Prototyping: 'A Prototype is Worth 1,000 Meetings'Static vs. Click-Through vs. High-Fidelity PrototypesComponent States and Micro-Interaction TransitionsCode-Based Prototyping: Testing with Dynamic DataPrototyping for Stakeholder Buy-In vs. Usability TestingThe 'Potemkin Village' Prototype Trap

From Course

📘
UX Design FoundationsBeginner · 25 lessons
Prototyping Workflows

Lesson

Prototyping Workflows

The Power of Prototyping: 'A Prototype is Worth 1,000 Meetings'Static vs. Click-Through vs. High-Fidelity PrototypesComponent States and Micro-Interaction TransitionsCode-Based Prototyping: Testing with Dynamic DataPrototyping for Stakeholder Buy-In vs. Usability TestingThe 'Potemkin Village' Prototype Trap
Start lesson
Complete lesson and earn 250 PX
Exercise #1

The Power of Prototyping: 'A Prototype is Worth 1,000 Meetings'

In the famous adage from IDEO, "A prototype is worth a thousand meetings."

Static mockups can never communicate the tactile experience of using software. A prototype transforms abstract verbal arguments about whether a feature will work into an empirical artifact that can be touched, tested, and validated.

Exercise #2

Static vs. Click-Through vs. High-Fidelity Prototypes

Prototypes serve different validation goals depending on fidelity:

  • Click-Through Prototypes: Static screens linked together by clickable hotspots (Figma prototype links). Validates high-level navigation flows and screen sequencing.
  • Micro-Interaction Prototypes: Simulates realistic component state machines, spring physics, drag gestures, and animated transitions. Validates fine-grained interaction ergonomics.
  • Code-Based Prototypes (HTML/React): Built with real code and live API data. Essential for testing real input typing, complex algorithms, keyboard accessibility, and performance latency.
Exercise #3

Component States and Micro-Interaction Transitions

In modern interactive prototyping, components are modeled as finite state machines:

Every button or input must transition smoothly between discrete states:

  1. Rest: Default un-hovered appearance.
  2. Hover: Visual elevation or subtle color shift on cursor hover.
  3. Focus: High-contrast outline when navigated via keyboard (Tab).
  4. Active / Pressed: Depressed scale or deepened color during mouse down.
  5. Loading: Progress spinner or shimmer skeleton when submitting.
  6. Disabled: Reduced opacity and muted color when prerequisites are incomplete.
Exercise #4

Code-Based Prototyping: Testing with Dynamic Data

Figma prototypes have inherent boundaries: they cannot store real input state or calculate dynamic mathematical formulas.

When Code Prototyping is Mandatory

  • Search & Filter Interfaces: Testing how users behave when filtering a catalog of 10,000 live products.
  • Complex Financial Calculators: Where inputs dynamically alter charts and payback periods.
  • Screen Reader Testing: Validating whether assistive technologies announce dynamic updates correctly.
Exercise #5

Prototyping for Stakeholder Buy-In vs. Usability Testing

Be clear about the primary objective of your prototype:

Prototyping for Stakeholders

  • Goal: Persuade executives or investors to fund a vision.
  • Attributes: Highly polished, happy-path demonstration highlighting delight, brand elegance, and visionary features.

Prototyping for Usability Testing

  • Goal: Uncover where users get stuck, confused, or frustrated.
  • Attributes: Must support error paths, failed validations, realistic edge-case content, and realistic system delays.
Exercise #6

The 'Potemkin Village' Prototype Trap

In history, Grigory Potemkin erected elaborate fake painted village facades along Catherine the Great's travel route to create a false impression of prosperity.

In software design, a Potemkin Village prototype is an illusion that only works if the user clicks the exact single button the designer intended. The moment a test participant clicks anywhere else, the prototype freezes or breaks.

To conduct valid usability tests, prototypes must provide sufficient functional depth that users can explore naturally without crashing into dead ends.