Module 1: UX Foundations

UX vs UI: The Full Picture

"UI/UX" is written so often as one word that many people assume it means one thing. It does not. User experience (UX) and user interface (UI) are related but different disciplines, and understanding the difference helps you plan your learning, describe your skills to employers and clients, and avoid one of the most common product mistakes: making something look beautiful that people still cannot use.

What UX design is

User experience is everything a person experiences when they use a product or service: how easy it is to find what they need, whether it solves their problem, how they feel while using it and what happens when something goes wrong. UX design is the work of shaping that experience deliberately. It includes:

• Research: understanding who the users are, what they need and what gets in their way.
• Information architecture: organising content and features so people can find them.
• Interaction design: deciding the steps a user takes and how the product responds.
• Testing: checking with real people whether the design works, and improving it.

UX is not limited to screens. The experience of a mobile money service includes the app, the SMS confirmation, the agent counter and the customer care line.

What UI design is

User interface design focuses on the screens and controls people interact with: layout, typography, colour, icons, buttons, forms and the visual states of each element (default, pressed, disabled, error). Good UI makes the structure created by UX clear and pleasant to use. It also builds consistency through reusable components and design systems.

In practice the two overlap constantly. In a small company one person often does both, which is why job adverts say "UI/UX designer". In larger teams you may see separate roles such as UX researcher, product designer, interaction designer, UI designer and content designer.

Worked example: a beautiful app that fails

Imagine a hypothetical Nairobi start-up launches a bill-payment app. The UI is impressive: modern colours, smooth animations, custom icons. But after launch, many users abandon the payment flow. When the team interviews users, they discover:

• Users expected to find "Pay Bill" on the home screen, but it was hidden in a menu labelled "Services".
• The account number field did not explain whether to include spaces, so many entries failed.
• After paying, the screen showed only an animated tick, with no reference number, so users were unsure whether the payment worked and called customer care.

None of these problems are about how the app looks. They are UX problems: navigation labels, form guidance and system feedback. The fix involved moving "Pay Bill" to the home screen, adding helper text and an example under the account field, and showing a confirmation with the amount, recipient, date and transaction reference. The UI then made those changes look consistent with the rest of the app.

The designer's mindset

Whether you lean towards UX or UI, a few habits define good product designers:

• You are not the user. Your preferences, phone, data bundle and digital skills may be very different from those of the people you design for.
• Evidence over opinion. Decisions should be based on research and testing wherever possible, not on what the loudest person in the meeting likes.
• Design for everyone. Accessibility for people with visual, motor, hearing or cognitive impairments is part of good design, not an extra.
• Business goals matter too. A good design helps users and also supports the organisation's goals, such as completed sign-ups or fewer support calls.

Common mistakes to avoid

• Treating UX as decoration: starting with colours and visuals before understanding the problem.
• Treating UI as unimportant: a well-researched flow can still fail if text is unreadable or buttons look disabled.
• Designing for yourself: assuming every user has a new smartphone and fast internet.
• Using "UX" as a buzzword: in interviews and proposals, explain specifically what research, structure and testing you will do.