Lesson 1: Introduction to UX Design

Learning Objectives:

• Understand what UX Design is and why it matters in web applications.

• Identify real user needs through UX research methods.

Content:

• Definition of UX Design

• Difference between UX and UI

• User research methods (interviews, surveys, observation)

• Creating personas

• Introduction to user journeys

Activity:

• Case study: analyze an existing website + create two personas and a user journey

The Experience with Flipboard

The author describes using the Flipboard app as if reading a paper newspaper: pleasant, stress-free, and well-presented. Unlike other fast-paced news websites, Flipboard encourages users to slow down and take their time.

UX here is not just about the interface or gestures — it’s about the whole experience the user lives in that moment.

Sunday morning, I scroll through the headlines while drinking my coffee. I read an article, then move on to the next one. I flip the page and stop at a photo — it’s Long Street in Cape Town, a city I dream of visiting. I finish the article and my breakfast without spilling anything or getting ink on my fingers. I’ve just browsed a feed of recent news curated by Flipboard.
It’s a tablet app that gives a reading experience close to that of a printed newspaper.
While most news websites are built for real-time updates — short articles, constant notifications, homepage refreshes — Flipboard offers a more peaceful experience. Articles give space to reflect, images are highlighted, and flipping pages is easy and encourages discovery. This design invites you to sit back in a chair, take your time, and maybe share a photo or article with others. Flipboard doesn’t force these behaviors, but its design makes this kind of reading experience possible.

Where does the word “UX” come from?

The term UX (User Experience) was made popular in the 1990s by Don Norman, a former Apple designer.

He wanted to expand the idea of design to include the whole user experience, not just the interface or how easy it is to use.

Since then, UX has become central to how digital products are designed.

What is UX?

UX is everything the user feels when using a product:

How they handle it, how easily they understand it, whether it meets their needs, and how it fits into their life.

It’s not just about completing tasks — it also includes emotions, context, and hesitation.

Experience isn’t a step-by-step technical process.

It’s holistic, subjective, and personal.

UX laws are based on Psychology

https://lawsofux.com/selective-attention/

The Different Sides of Experience Design

Three Aspects to Balance

Good design takes into account:

• Function: Does it work well?

• Meaning: Does it make sense to people?

• Economy: Is it realistic to produce, distribute, and use?

In the digital world, design can change and evolve easily. Users can even adapt the tool to their own needs.

That’s why UX design must be flexible, adaptable, and easy to customize.

How is the user experience (UX) considered during the planning phase?

In professional environments, UX is often prioritized early.
UX designers conduct:

• User research

• Interviews

• Persona creation

• User journey mapping

• Wireframes and prototypes

These deliverables are validated with stakeholders before any code is written. The goal is to reduce friction and maximize usability from day one.

Iterative Design

Test Multiple Times, Step by Step

You don’t find the best solution on the first try.

You need to test, observe, prototype, fix… and repeat.

With each loop, the product becomes better for the user.

This method works for both new products and improving existing websites.

Building Empathy

Empathy is one of the key qualities required for the job of a UX designer.

Understanding Real Needs

Instead of just asking “What do you want?”, we try to understand situations, problems, and habits.

This means truly listening and observing carefully.

Empathy is not about feeling sorry for someone — it’s about seeing things from their point of view.

User Research Methods

Quantitative vs Qualitative

• Quantitative: gives a big-picture view (e.g., surveys, statistics)

• Qualitative: helps understand details and motivations (e.g., interviews, observation)

Both are useful at different stages of the project.

Participant Observation

We spend time with users, watch what they do, and take notes — even about things they don’t say.

This helps reveal tricks, obstacles, or hidden needs.

Interviews

We talk with users to understand their daily life.

We ask semi-open questions, in their real environment.

This gives a clear and direct view of their expectations.

Sharing What We Learn

What we discover should be shared with the team (quotes, photos, diagrams, etc.).

Then, we can organize the insights using personas, scenarios, or storyboards (like mini-comics showing real usage situations).

Prototyping

Why create a prototype?

Prototypes help us test ideas quickly, explore different options, and improve the product.

We start wide (many ideas), then narrow down (keep the best ones).

3 Types of Prototypes:

• Look: What does it look like? (e.g., wireframes, sketches)

• Function: How does it work? (e.g., HTML/JS demo)

• Purpose: What is it for in real life? (e.g., simulation video, storyboard)

A good prototype is not final.

It should be easy to change.

It helps teams talk, test, and adjust — without getting too attached.

Evaluation

Two Ways to Evaluate:

• Analytical: done by an expert using specific criteria (fast, but sometimes far from real use)

• Empirical: done with users (usability testing, field studies, etc.)

Both are useful and should be combined.

Evaluation must happen regularly throughout the project.

A/B Testing

You show two versions of a page to different users and see which one works better.

Very common on the web (for example: Obama’s campaign in 2008).

But it must be used carefully to avoid inconsistency or bad side effects.

Case Study: A Cosmetic E-commerce Website

A large company wanted to create a pleasant multi-brand cosmetics shopping site.

The UX agency:

• studied user needs

• created personas

• designed a clear site structure

• made interactive mockups

• tested with real users

• improved at every step

The website allows users to:

• do a skin self-diagnosis

• get personalized advice

• rate and recommend products

• access a personal account with loyalty points, history, and preferences

This project shows how UX can build a full experience around a product — not just a nice interface.

In Summary

UX Design means:

• Understanding users in real-life situations

• Designing with empathy, starting from their needs

• Prototyping quickly, testing and improving

• Evaluating regularly, not just at the end

The goal is to create a smooth, satisfying, and user-centered experience.

UX doesn’t guarantee success — but it greatly increases the chances of building something users truly like.

Lesson 2: Wireframing and Web Usability Principles

Learning Objectives:

• Apply usability principles (readability, consistency, visual hierarchy…)

• Create a wireframe for a practical case

Content

• Nielsen’s 10 heuristics

• Usability and accessibility standards (WCAG, responsive design…)

• Prototyping tools (paper, Figma, Whimsical, Balsamiq…)

• Building a low-fidelity wireframe

Activity

• Design a wireframe for the homepage of a fictional mobile app, with explanation of ergonomic choices

Nielsen’s 10 Usability Heuristics (Simplified Version)

1. Visibility of System Status

Users should always know what’s going on.

Example: A loading bar or a message like “Your order has been sent.”

2. Match Between System and the Real World

The system should use familiar words, icons, and ideas.

Example: A trash can icon for deleting, a shopping cart for purchases.

3. User Control and Freedom

Users should be able to go back and undo actions easily.

An “Undo” button, or “Back” and “Cancel” options.

4. Consistency and Standards

Things should always mean the same thing and behave the same way.

Example: A blue button = main action. It shouldn’t mean “Send” in one place and “Cancel” in another.

5. Error Prevention

The system should help avoid errors before they happen.

Example: A confirmation message before deleting an important file.

6. Recognition Rather Than Recall

Users should see what they can do — not have to remember it.

Example: A menu showing all available options, instead of expecting users to remember commands.

7. Flexibility and Efficiency of Use

The system should work well for beginners and power users.

Example: Keyboard shortcuts for experts, clear menus for new users.

8. Minimalist and Aesthetic Design

Less is more: no extra info that distracts or confuses.

Example: A clean and simple interface that goes straight to the point.

9. Help Users Recognize, Diagnose, and Recover from Errors

Error messages should be clear and help users fix the problem.

Example: “Password too short — must be at least 8 characters” instead of just “Error 404”.

10. Help and Documentation

Even a simple system should offer easy-to-find help.

Example: FAQ, help bubbles, or quick tutorials.

Usability and Accessibility Standards

1. WCAG (Web Content Accessibility Guidelines)

WCAG is a set of international rules to make the web accessible for everyone — including people with disabilities.

4 main principles (easy to remember with the word POUR):

• P – Perceivable: Content must be visible or audible to all.

  Example: Add alt text to images for screen readers.

• O – Operable: The interface must be easy to use.

  Example: Everything should be doable with a keyboard, not just a mouse.

• U – Understandable: Content and navigation must be clear.

  Example: Use simple language and logical menus.

• R – Robust: The site must work with all browsers and assistive technologies.

  Example: Clean code that follows HTML standards.

2. Responsive Design

A website must adapt to all screen sizes (desktop, tablet, mobile).

Key principles:

• Use flexible layouts (Flexbox, Grid)

• Use sizes in % or relative units (em, rem, vh, vw)

• Test on different screen resolutions

• Make buttons and text easy to read and tap on mobile

3. Web Usability – Key Rules

Some basic standards to improve user experience for everyone:

• Readability: Use large enough font (at least 16px), good contrast (black on white, avoid light grey on white)

• Clear navigation: Visible menu, links that look like links

• Visual feedback: Buttons that change when clicked, clear messages after actions

• Visual hierarchy: Use headings, colors, spacing to guide the eye

• Accessible forms: Clear labels, helpful error messages, easy-to-fill fields

✅ Real Example

• Bad design: light grey text on white background, tiny buttons, no mobile version

• Good design: high contrast text, large buttons on mobile, images with descriptions, responsive site that adapts to smartphones

Web Usability & Accessibility

The WCAG (Web Content Accessibility Guidelines) are organized into 3 levels:

• A (basic): The website is usable in a basic way by people with disabilities.

• AA (intermediate, recommended): The site meets a good level of accessibility for most users.

• AAA (advanced, ideal but hard to reach everywhere): Maximum accessibility, including very specific cases.

Here are some example rules for each level:

WCAG Rule Examples

Concrete Example:

• Level A: An image of the “Cart” button has the alt attribute: alt="Add to cart".

• Level AA: The text “Add to cart” has good contrast and the demo video has subtitles.

• Level AAA: The video also includes sign language, and the website offers a high-contrast mode.

🎨 Moockup tools : Figma vs Penpot