HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

Speaking the Language of

Enough design vocabulary and usability judgment to review work and ask the right questions.

⚡ Total XP: 0|💻 management XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.

🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

You will never out-design your design team, but every design review is faster and sharper once you can name what's actually wrong with a screen.

1UX vs UI: Two Different Jobs

UX is the discipline of making a product easy and satisfying to use — information architecture, flows, error states, accessibility. UI is the visual execution of that experience — the specific pixels, colors, and components. A screen can have beautiful UI and terrible UX (a gorgeous form that hides a 12-step signup) or plain UI and great UX (a boring but frictionless checkout). PMs need to separate the two when giving feedback.

2Usability Heuristics Every PM Should Know

Nielsen's heuristics turn 'this feels off' into something actionable. 'Visibility of system status' means the user always knows what's happening (a spinner, a progress bar). 'User control and freedom' means there's a clear way to undo or exit. 'Error prevention' means the design stops mistakes before they happen rather than just showing an error after. Naming the specific heuristic a screen violates makes design feedback concrete instead of subjective.

3Step-by-Step Breakdown

Introduction. UX (User Experience) is how usable and satisfying a product is across the whole journey — can people accomplish their goal without friction? UI (User Interface) is the visual and interactive surface they actually touch: buttons, colors, spacing, type. A PM doesn't design either, but must be fluent enough in both to give useful feedback.

Nielsen's Usability Heuristics. Jakob Nielsen's 10 heuristics are the fastest way to evaluate a screen without a formal usability study: visibility of system status, match between the system and the real world, user control and freedom, consistency and standards, and error prevention are the five a PM should check on every review.

Design Systems and Handoff. A design system is a shared library of reusable components (buttons, forms, colors, type scales) that keeps a product visually and behaviorally consistent. When designers hand off a screen — in Figma or similar — a PM's job is to check it against real data, edge cases, and the design system, not just aesthetics.

Knowledge Check. What's the key difference between UX and UI?

→UX covers the overall usability and flow of the whole journey; UI is the specific visual surface the user interacts with
→UX applies only to mobile apps, while UI applies only to websites

Summary. You don't need to draw the mockups, but you do need to spot a confusing flow, name what's missing against a heuristic, and know when a design is ready for engineering versus when it needs another pass.

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Confusing UX problems with UI problems

// Wrong feedback
'Can we make this screen look nicer?'

// Right feedback
'Users drop off at step 3 — can we cut it to 2 steps and show progress?'

The Solution //

Asking to 'make it prettier' when users are actually abandoning a confusing 5-step flow treats a UX (flow/architecture) problem as a UI (visual) one. Diagnose which layer the complaint actually lives in before requesting a fix.

The Error //

Approving a design without checking it against heuristics

// Wrong
'Looks clean, ship it.'

// Right
'Looks clean, but there's no confirmation before delete — that fails error prevention. Add one before we ship.'

The Solution //

A screen can look polished and still hide the system status, block undo, or fail to prevent a destructive action. Run new designs through at least the top 5 heuristics before sign-off, not just a visual glance.