User Experience
UX from top to bottom

A complete visual guide to understanding human-centred design

01 — Definition

What is user experience?

UX (User Experience) is the overall perception a person has when interacting with a digital product. It is not only how it looks, but how it feels: whether it is intuitive, useful and satisfying.

Human-centred
Design decisions always start from users’ real needs, motivations and contexts.
More than aesthetics
UX covers information architecture, navigation flow, accessibility and performance, not just visual appearance.
Evidence-based
Decisions are backed by data: usability tests, interviews and real behavioural metrics.
Iterative process
UX does not end at launch: it keeps evolving based on feedback and new needs.

02 — Key distinction

UX vs UI: what is the difference?

UX
User research
Information architecture
Journey maps
Usability tests
Wireframes and prototypes
vs
UI
Colours and typography
Icons and illustrations
Visual components
Animations and transitions
Style guide

UX = how it works · UI = how it looks · The two go hand in hand

03 — Methodology

The UX design process

1
Research
User interviews, surveys, competitor analysis and study of the context of use. The aim is to understand who the users are and what real problems they have.
Tools: interviews, surveys, analytics
2
Define
Synthesise the information into fictional characters (personas), empathy maps and a problem statement. It answers: what problem do we need to solve, and for whom?
Tools: personas, journey map, HMW
3
Ideate
Brainstorming sessions, affinity diagrams and collective creativity techniques. Many ideas are generated without filtering, to choose the most promising ones.
Tools: crazy 8s, how might we, sketching
4
Prototype
Create low- or high-fidelity representations of the solution: from paper sketches to interactive prototypes. The aim is to make the idea tangible as quickly as possible.
Tools: Figma, Balsamiq, Marvel
5
Test
Run tests with real users to detect usability problems. The results feed back into the research phase, closing the iterative cycle.
Tools: moderated tests, eye tracking, A/B

04 — Foundations

Nielsen’s 10 usability heuristics

1
Visibility of system status
The system should always keep users informed about what is going on.
2
Match with the real world
Speak the user’s language, not the system’s.
3
User control and freedom
Let users undo and redo actions easily.
4
Consistency and standards
The same elements should always behave the same way.
5
Error prevention
Better to prevent errors than to show error messages.
6
Recognition > recall
Show options; don’t make users memorise.
7
Flexibility and efficiency
Shortcuts for advanced users, simplicity for beginners.
8
Minimalist design
Remove whatever adds no value to the main flow.
9
Help recognise errors
Clear messages that explain the problem and suggest solutions.
10
Help and documentation
When needed, provide documentation that is easy to find and use.

05 — Common mistakes

What should UX avoid?

✗
Designing without researching users
→ Do at least 5 interviews before designing
✗
Putting aesthetics before functionality
→ A beautiful but invisible button is a useless button
✗
Not testing with real users
→ 5 users find 85% of usability problems
✗
Ignoring accessibility from the start
→ Apply the WCAG 2.1 guidelines from the design phase
✗
Not iterating after launch
→ Collect data, find friction points and keep improving

06 — Resources

Essential UX tools

Prototyping
Figma
Collaborative design and prototyping in the cloud
Research
Maze
Remote and automated usability tests
Analytics
Hotjar
Heatmaps and session recording
Surveys
Typeform
Forms and surveys to gather feedback
Collaboration
Miro
Digital whiteboards for workshops and ideation
Flow
Whimsical
Quick flowcharts and wireframes

“Design is not just what it looks like and feels like. Design is how it works.”

— Steve Jobs