Module 1: UI/UX Industry, Digital Products and Designer Roles
Begin by understanding how user interface design, user experience design and product design contribute to websites, mobile applications, SaaS products, enterprise platforms and service ecosystems. Learners map the product-development lifecycle and study how designers work with product managers, developers, researchers, marketers and business stakeholders.
UI, UX, interaction and product-design responsibilities
digital-product lifecycle and agile collaboration
business goals, user needs and technical constraints
common deliverables from discovery to developer handoff
ethical decision-making and evidence-based design
Practical application: Audit one familiar digital product and identify its users, business goal, interaction model, strengths, usability risks and opportunities for improvement.
Learning outcome: You can explain where UI/UX fits inside a product team and select appropriate activities for different stages of a project.
Module 2: Human-Centered Design and Design Thinking
Learn a structured but flexible approach to solving design problems. The module covers empathising with users, defining a meaningful problem, exploring alternatives, prototyping and testing. It also explains why teams should revisit earlier stages when new evidence changes the problem or solution direction.
human-centered design principles
design-thinking stages and iteration
assumptions, risks and evidence
problem framing and opportunity statements
divergent and convergent ideation
Practical application: Turn a broad business request into a focused design challenge, assumptions map and short research plan.
Learning outcome: You can frame a design challenge without jumping immediately to screens or visual styling.
Module 3: UX Research Planning, Ethics and Participant Recruitment
Good UX begins with credible evidence. Learners define research objectives, choose suitable qualitative and quantitative methods, write unbiased questions, plan participant criteria and consider consent, privacy and sensitive information. The emphasis is on learning enough to make a responsible product decision rather than collecting data without purpose.
research questions and hypotheses
method selection and mixed-method awareness
participant profiles and screening
consent, confidentiality and data minimisation
research scripts, logistics and note-taking plans
Practical application: Prepare a research brief, screener and interview guide for a web or mobile product.
Learning outcome: You can plan a small, ethical research study that connects directly to a product decision.
Module 4: User Interviews, Surveys and Contextual Observation
Practice the core skills required to learn from users without leading them. The module explores open-ended interviews, task-based observation, short surveys and contextual inquiry. Learners practise listening for goals, workarounds, emotions, constraints and decision criteria while separating observed evidence from interpretation.
interview moderation and probing
avoiding leading and double-barrelled questions
contextual inquiry and observation notes
survey structure and response bias awareness
research debriefs and evidence capture
Practical application: Conduct and document a short interview or usability-oriented observation with appropriate consent.
Learning outcome: You can gather useful evidence and recognise common research-quality problems.
Module 5: Research Synthesis, Insights and Problem Definition
affinity mapping and thematic analysis
evidence versus assumption
insight statements and opportunity areas
how-might-we questions
research limitations and confidence levels
Practical application: Synthesize a small research set into themes, insights, opportunities and a prioritised problem statement.
Learning outcome: You can turn scattered research evidence into a defensible design direction.
Module 6: Personas, Jobs to Be Done and Journey Mapping
Learn to represent user context without creating decorative or fictional documents. The module covers evidence-based personas, jobs-to-be-done statements, empathy maps, customer journeys and experience maps. Learners decide which artefact is useful for the question being addressed and avoid stereotypes unsupported by research.
behaviour-based personas
jobs, motivations and desired outcomes
journey stages, touchpoints and pain points
moments of truth and service gaps
using maps to align teams
Practical application: Create an evidence-based persona or job profile and an end-to-end journey map with opportunities.
Learning outcome: You can select and build a user-model artefact that informs real product decisions.
Module 7: Information Architecture, Navigation and Content Organisation
Information architecture helps users find, understand and act on content. Learners work with content inventories, grouping, labelling, card-sorting awareness, sitemaps and navigation structures. The module examines global, local, contextual and utility navigation for websites, apps and complex dashboards.
content inventory and hierarchy
mental models and categorisation
open and closed card sorting awareness
sitemaps and navigation models
labels, search, filters and findability
Practical application: Reorganise a complex set of content into a sitemap and navigation model, explaining the evidence behind each choice.
Learning outcome: You can create structures that reduce confusion and support predictable navigation.
Module 8: User Flows, Task Flows and Service Blueprint Awareness
Translate goals into clear sequences of steps. Learners create task flows, user flows, decision paths, edge-case branches and error-recovery routes. Service-blueprint awareness connects the visible user journey with backstage processes, systems and team responsibilities, helping learners identify dependencies before high-fidelity design.
happy paths and alternate paths
entry points, decisions and completion states
errors, empty states and recovery
cross-channel flows
service blueprint frontstage and backstage awareness
Practical application: Map a complete flow such as onboarding, checkout, appointment booking or subscription management.
Learning outcome: You can define interaction logic before spending time on visual polish.
Module 9: Sketching and Low-Fidelity Wireframing
Low-fidelity design enables fast exploration. Learners sketch multiple interface approaches, create wireframes, establish content hierarchy and evaluate whether each screen supports the intended task. The module emphasises speed, comparison and feedback rather than visual decoration.
crazy-eights and rapid ideation
paper and digital wireframes
content-first hierarchy
common web and mobile layout patterns
annotation and rationale
Practical application: Create alternative low-fidelity solutions for a core flow, review them against requirements and select a direction.
Learning outcome: You can explore and communicate interface structure before committing to final visuals.
Module 10: Visual Design Foundations for Digital Interfaces
Strong UI design depends on hierarchy, clarity and consistency. This module covers spacing, alignment, grids, typography, colour, contrast, imagery, iconography and visual rhythm. Learners understand how aesthetic decisions influence comprehension, brand perception and usability rather than treating visual style as decoration alone.
layout grids and spacing systems
typographic scale and readable text
colour roles and contrast
visual hierarchy and grouping
imagery, icons and data-density choices
Practical application: Build a small visual direction board and apply it to a wireframe while documenting key decisions.
Learning outcome: You can create coherent visual hierarchy and explain how it supports user tasks.
Module 11: Figma Foundations and Professional File Organisation
Figma is used as the primary interface-design environment. Learners work with frames, layers, sections, constraints, styles, reusable assets, pages and shared libraries. Naming conventions, page structure and clean file organisation are taught early so that later prototypes and handoff files remain understandable.
frames, layers, groups and sections
layout grids, constraints and styles
vector and image handling
file naming and page organisation
comments, sharing and collaboration
Practical application: Rebuild a small interface in a cleanly organised Figma file and prepare it for collaborative review.
Learning outcome: You can navigate and structure a professional design file instead of producing disconnected screens.
Module 12: Auto Layout and Responsive Interface Design
Learn to create interfaces that adapt when content or frame size changes. Figma Auto Layout is used to manage direction, gaps, padding, alignment and resizing behaviour. Learners combine auto layout with constraints and content-aware components to prepare designs for multiple breakpoints and real text variation.
horizontal, vertical and grid auto layout
hug contents, fill container and fixed sizing
min/max sizing and nested layout
responsive cards, navigation and dashboards
mobile, tablet and desktop breakpoint reasoning
Practical application: Create a responsive page section and component set that adapts to text, content quantity and frame width.
Learning outcome: You can design flexible layouts that communicate realistic responsive behaviour to developers.
Module 13: Components, Variants, Variables and Design Tokens
Reusable systems reduce inconsistency and speed up design work. Learners build components, variants and properties, then use variables and modes to represent reusable values such as colours, spacing, themes and states. The module introduces design-token thinking and explains how component governance affects large products.
components and instances
variants and component properties
variables, collections and modes
tokens for colour, spacing and typography
light/dark themes and multi-context systems
Practical application: Build a small component library with documented states, variants and token-like variables.
Learning outcome: You can create maintainable interface building blocks rather than redesigning each screen independently.
Module 14: High-Fidelity Website and SaaS Interface Design
Apply research, structure and visual foundations to polished web interfaces. The module covers landing pages, forms, tables, filters, dashboards, navigation, account areas and responsive states. Learners address loading, empty, error, success and permission states so that the design represents a complete product experience.
marketing website and application patterns
forms, validation and feedback
tables, filters and dashboard density
empty, loading and error states
responsive web specifications
Practical application: Design a high-fidelity responsive website or SaaS dashboard flow with key states.
Learning outcome: You can produce implementation-ready web UI that covers more than a single ideal screen.
Module 15: Mobile App Design and Platform Guideline Awareness
Mobile interfaces require attention to touch, screen size, context, system behaviour and platform expectations. Learners design navigation, onboarding, lists, forms, permissions and notifications while studying relevant patterns from Material Design and Apple Human Interface Guidelines. The goal is informed adaptation, not blind copying.
mobile navigation and thumb-friendly interaction
touch targets, gestures and feedback
Android and iOS pattern awareness
safe areas, keyboard and orientation
permissions, notifications and interruption design
Practical application: Design a mobile app flow for Android or iOS and document platform-specific decisions.
Learning outcome: You can create mobile experiences that respect context and platform conventions.
Module 16: Interaction Design, States and Microinteractions
Interaction design defines how the product responds to users. Learners work with triggers, feedback, state changes, direct manipulation, progressive disclosure and microinteractions. They also examine motion purpose, timing and reduced-motion considerations so animation improves understanding instead of becoming a distraction.
interaction states and feedback loops
hover, focus, pressed and disabled states
progressive disclosure and confirmation
microinteraction structure
motion purpose and reduced-motion awareness
Practical application: Specify a component or flow with complete interaction states and a short motion rationale.
Learning outcome: You can design clear system responses and communicate behaviour beyond static screens.
Module 17: Interactive Prototyping in Figma
Prototypes help teams test flows before development. Learners connect frames, create overlays, transitions, interactive components and realistic navigation. Advanced awareness includes variables, expressions and conditional logic where suitable. Prototype fidelity is selected according to the learning goal rather than maximised automatically.
links, actions and transitions
overlays and interactive components
scroll behaviour and fixed elements
variables and conditional prototype awareness
prototype scenarios and test preparation
Practical application: Build a clickable prototype that supports a complete task and is ready for a usability session.
Learning outcome: You can choose and build the right prototype fidelity for stakeholder review or user testing.
Module 18: Usability Testing, Heuristic Evaluation and Iteration
Testing replaces opinion with evidence. Learners create realistic tasks, moderate sessions, observe behaviour, measure completion and identify usability problems. Heuristic evaluation and cognitive walkthrough awareness provide additional inspection methods. Findings are prioritised by severity, frequency and product impact before redesign.
test objectives and task scenarios
moderated and unmoderated testing awareness
observation, notes and success measures
heuristic evaluation
severity rating and iteration planning
Practical application: Run a small usability test, produce a findings report and revise the prototype based on evidence.
Learning outcome: You can validate a design, prioritise problems and show how testing changed the solution.
Module 19: Accessibility and Inclusive UI/UX Design
Accessibility is integrated throughout the course rather than added at the end. Learners apply WCAG 2.2 awareness to colour contrast, text resizing, focus visibility, keyboard navigation, target size, forms, status messages, motion and content alternatives. Inclusive design also considers language, age, literacy, connectivity and situational limitations.
perceivable, operable, understandable and robust principles
colour contrast and non-colour cues
keyboard and focus design
accessible forms, errors and authentication
target size, motion and cognitive load
Practical application: Audit a design against an accessibility checklist and create an improved version with annotated decisions.
Learning outcome: You can identify common barriers and design more inclusive interfaces before development begins.
Module 20: Design Systems, Documentation and Governance
A design system combines reusable components, tokens, guidance and governance. Learners structure foundations, components, patterns and documentation; define contribution and review processes; and recognise when a simple UI kit is enough. The module covers consistency without forcing every product problem into the same component.
foundations, components and patterns
documentation and usage guidance
naming and versioning
contribution, review and deprecation
design-system adoption and governance
Practical application: Create a mini design system and documentation page for a focused product area.
Learning outcome: You can build and communicate a scalable design foundation that supports team collaboration.
Module 21: UX Writing and Content Design
Interface words shape understanding and trust. Learners write labels, instructions, buttons, empty states, notifications, errors and confirmation messages. The module covers tone, clarity, consistency, localisation awareness and content hierarchy, with particular attention to helping users recover from problems.
clear labels and calls to action
error, empty and success messages
voice and tone systems
progressive disclosure and content hierarchy
localisation and plain-language awareness
Practical application: Rewrite the content of a confusing flow and create a short voice-and-tone guide.
Learning outcome: You can design words and interface structure together instead of treating copy as filler.
Module 22: Developer Handoff, Dev Mode and Technical Awareness
Design quality depends on implementation clarity. Learners prepare files, annotate behaviour, export assets and communicate responsive, state and accessibility requirements. Figma Dev Mode awareness supports inspection and design-to-code collaboration. Basic HTML and CSS concepts help designers discuss layout, components and feasibility without turning the course into front-end development.
ready-for-development file hygiene
specs, assets and annotations
Dev Mode inspection and linked resources
responsive and state documentation
HTML/CSS layout and semantic awareness
Practical application: Prepare one complete flow for handoff and conduct a designer-developer review simulation.
Learning outcome: You can reduce ambiguity and collaborate constructively with engineers.
Module 23: Product Metrics, Experiments and Stakeholder Communication
UI/UX work must connect to outcomes. Learners identify behavioural and experience signals such as task success, conversion, retention, support demand and satisfaction. They learn the basics of experiment hypotheses, A/B test awareness and design critique, then present recommendations with evidence, limitations and trade-offs.
product goals and UX metrics
task success and experience signals
experiment and A/B test awareness
design critique and decision records
stakeholder presentations and trade-offs
Practical application: Define success measures for a redesign and present the design rationale to a simulated review panel.
Learning outcome: You can connect design choices to measurable outcomes and communicate decisions professionally.
Module 24: Responsible AI-Assisted Design, Portfolio and Capstone
The final module uses AI tools carefully for ideation, research organisation, content alternatives and repetitive production support while preserving human judgment. Learners examine privacy, bias, intellectual-property and hallucination risks. They then assemble a case study that demonstrates the complete process from problem framing to research, design, testing and iteration.
appropriate AI assistance and verification
privacy and confidential research data
bias, authorship and disclosure
case-study storytelling and evidence
portfolio review, presentation and capstone defence
Practical application: Complete a substantial web, mobile or product-design capstone and present the research, iterations, accessibility decisions and final prototype.
Learning outcome: You finish with a credible case study that shows how you think, not only how polished your final screens look.
