UI/UX Design & Product Strategy

By the end of this module, learners should be able to:

• Define UI and UX.
• Explain the difference between UI design and UX design.
• Identify the stages of a typical UX design process.
• Understand user-centred design (UCD).
• Identify common usability problems in modern digital applications.
• Apply basic design-thinking principles to a simple real-world problem.

• Introduction to UI/UX Design
• UI vs UX: Core differences, overlaps, and industry roles
• Role of a UI/UX Designer in product teams
• User-Centred Design (UCD) framework
• Design Thinking methodology (Empathise, Define, Ideate, Prototype, Test)
• Understanding user problems and identifying pain points
• Introduction to usability principles and heuristics
• Examples of good and poor user experiences (Case studies)
• Introduction to Figma interface, workspace, and collaborative tools

UX Problem Identification Audit

Learners select a familiar digital product (e.g., Banking App, E-commerce Website, School Portal, Food Delivery App, or Transport App) and conduct a heuristic audit to document:

• Target users and primary use cases.
• Unmet user needs and operational pain points.
• Specific usability failures (navigation, layout clutter, accessibility bugs).
• Proposed design improvements and feature updates.

Expected outcome

Learners can explain fundamental UI/UX concepts, navigate Figma, and systematically identify user problems that can be solved through design.

By the end of this module, learners should be able to:

• Explain the strategic importance of user research in product design.
• Identify target user demographics and psychographics.
• Formulate unbiased research questions and survey scripts.
• Conduct simple user interviews, observational studies, or surveys.
• Extract actionable user needs, goals, and pain points from raw data.
• Synthesize findings into empathy maps, user personas, and basic customer journey maps.

• Introduction to UX Research methodologies
• Qualitative vs. Quantitative research
• Planning and conducting user interviews
• Designing effective surveys and questionnaires
• Observational research and competitive audits
• Synthesizing raw research data (Affinity Mapping)
• Identifying user needs, goals, and frustrations
• Creating Empathy Maps (Says, Thinks, Does, Feels)
• Developing primary and secondary User Personas
• Mapping customer and user journeys
• Research documentation best practices

User Persona & Research Synthesis

For a selected product concept, learners conduct a micro-research exercise (interviews or surveys with 2–3 participants) and construct a detailed User Persona artifact containing:

• Profile summary, demographic details, and context.
• Core user goals and motivations.
• Key frustrations, blockers, and pain points.
• Behavioral patterns and technological proficiency.
• Empathy Map breakdown.

Expected outcome

Learners can conduct foundational user research and translate raw participant data into strategic user personas and empathy maps.

By the end of this module, learners should be able to:

• Explain Information Architecture (IA) principles and content taxonomy.
• Organize digital application content logically.
• Identify core screen views, global elements, and key features.
• Create intuitive navigation structures and site maps.
• Map out complete user flows, task flows, and edge-case paths.
• Pinpoint and eliminate friction points within a user journey.

• Introduction to Information Architecture (IA)
• Content organization, card sorting, and navigation models
• Web and mobile app taxonomy and site maps
• Hierarchical, linear, and web navigation structures
• Defining user goals, user journeys, and task flows
• Diagramming user flows: Standard symbols, logic splitters, and decision points
• Designing for alternative, error, and success paths
• Identifying cognitive load, drop-off points, and friction
• Introduction to flowcharting tools (FigJam, Whimsical, Miro)

End-to-End User Flow Diagramming

Learners use FigJam or Miro to build a comprehensive user flow for a specific core user task (e.g., "A user registers, searches for a service, applies filters, and completes a checkout/booking"). The diagram must detail:

• Entry point/trigger.
• User actions and system responses.
• Conditional decision logic (e.g., Is user logged in? Payment successful?).
• Alternate error paths and successful confirmation screens.

Expected outcome

Learners can structure product information architecture and design clear, logical user flows that reduce cognitive load and eliminate friction.

By the end of this module, learners should be able to:

• Explain the role and value of low-fidelity and mid-fidelity wireframes.
• Differentiate between low-, mid-, and high-fidelity design deliverables.
• Construct low- and mid-fidelity wireframes for core app views.
• Apply basic layout, grid, and structural content hierarchies.
• Position navigation, calls-to-action (CTAs), forms, and content components strategically.
• Rapidly iterate wireframe structures based on peer feedback.

• Introduction to wireframing and structural layouts
• Sketching vs. Digital wireframing
• Low-fidelity vs. Mid-fidelity wireframes
• Layout structure, visual grid systems, and screen hierarchies
• Content distribution based on user priorities
• Designing effective calls-to-action (CTAs) and placement rules
• Structuring forms, input fields, and dynamic UI elements
• Responsive layout translation (Mobile vs. Desktop wireframing)
• Rapid sketching techniques and digitizing concepts in Figma
• Gathering structural feedback and iterating quickly

Mobile Application Wireframe Suite

Learners create a digital mid-fidelity wireframe suite in Figma consisting of 5–7 connected screens for their selected product focus. Screen views must include:

• Welcome / Login / Onboarding
• Home / Main Dashboard
• Search & Filter Results
• Item / Service Detail View
• Action / Booking / Cart View
• Confirmation / Success View
• User Profile / Settings

Expected outcome

Learners can convert functional requirements, IA, and user flows into structured, clear, and usable wireframe layouts.

By the end of this module, learners should be able to:

• Establish clear visual hierarchy across interface designs.
• Select, scale, and pair typography for digital screens.
• Construct harmonious, accessible color palettes (applying the 60-30-10 rule).
• Implement consistent visual grids, white space, and spatial systems (8px grid system).
• Apply essential UI design principles to create polished components (buttons, cards, forms, menus).
• Transform mid-fidelity wireframes into accessible, high-fidelity UI screens in Figma.

• Introduction to Visual User Interface (UI) Design
• Principles of visual hierarchy (Size, Contrast, Weight, Proximity, Color)
• Digital typography: Selection, scale, line-height, and font pairing
• Color theory: Primary, secondary, neutral, and semantic colors (Error, Success, Warning)
• Color contrast standards (WCAG AAA/AA requirements)
• Grid systems, layout alignment, and spatial scale (4px/8px grid system)
• UI design patterns and component styling (Buttons, Inputs, Cards, Badges, Navbars)
• Iconography and image selection principles
• Introduction to visual accessibility and inclusive design fundamentals

High-Fidelity Interface Transformation

Learners select 3–5 mid-fidelity wireframes from Week 4 and transform them into polished, production-ready high-fidelity UI screens in Figma by applying:

• Scaled typography and typographic hierarchy.
• A defined color system (Primary, Secondary, Background, Text, Semantic colors).
• Consistent 8px spacing, visual grids, and alignment rules.
• Styled cards, form inputs, buttons, icons, and micro-copy.

Expected outcome

Learners can design visually engaging, consistent, accessible, and professional high-fidelity interface screens.

By the end of this module, learners should be able to:

• Explain interaction design principles and micro-interactions.
• Build multi-screen clickable prototypes using Figma Prototype mode.
• Configure screen transitions, smart animations, and interactive component states.
• Design overlay states, modals, drawers, and form interactions.
• Account for system states (Loading, Empty, Success, Hover, Disabled, and Error states).
• Demonstrate and present interactive prototypes effectively.

• Fundamentals of Interaction Design (IxD)
• Introduction to prototyping methods and tools
• Figma Prototype Mode: Connections, Triggers, and Actions
• Navigation transitions (Push, Slide, Dissolve, Smart Animate)
• Interactive Components and Variant States (Default, Hover, Pressed, Disabled)
• Designing Modals, Overlays, Bottom Sheets, and Side Drawers
• Micro-interactions and feedback mechanisms (Toggle switches, heart/like animations)
• Designing system feedback states (Loading skeletons, empty lists, validation errors)
• Presenting, sharing, and recording interactive prototypes

Interactive Multi-Screen Prototype

Learners connect their high-fidelity screens in Figma to build an interactive prototype demonstrating one seamless primary user task.

Example Flow:

Onboarding → Login → Dashboard → Search/Filter → Item Details → Action/Booking → Dynamic Form Submission → Confirmation Screen.

The prototype must incorporate interactive component hover states, input focus states, dynamic overlays, and clean screen transitions.

Expected outcome

Learners can build and demonstrate interactive prototypes that accurately simulate real product experiences and component interactions.

By the end of this module, learners should be able to:

• Plan and execute a usability testing session with target users.
• Formulate scenario-based test tasks and testing scripts.
• Observe user behaviors, document usability friction, and track completion rates.
• Synthesize usability test data into prioritized design iterations.
• Create reusable UI components, variants, and design tokens (Styles/Variables) in Figma.
• Apply web and mobile accessibility standards (WCAG guidelines, touch targets, contrast ratios).

• Introduction to Usability Testing methodologies
• Writing test plans, scenarios, and non-leading test prompts
• Moderated vs. Unmoderated usability testing techniques
• Qualitative observation: Identifying user hesitation, errors, and confusion
• Usability metrics: Task completion rate, time-on-task, and error rate
• Prioritizing usability bugs (System Usability Scale / Severity Ratings)
• Iterative design: Refining prototypes based on test evidence
• Introduction to Design Systems: Tokens, Atomic Design, and Component Libraries
• Figma master components, instances, variants, and auto-layout setup
• Accessibility standards: Color contrast tools, touch targets (44 × 44 px minimum), and screen reader considerations

Usability Testing & Design System Optimization

Learners execute a usability cycle on their Week 6 prototype by:

• Recruiting 2–3 test participants.
• Creating a test script with 3 scenario-based tasks.
• Moderating the session, recording user friction, and logging findings in a Usability Matrix.
• Iterating and updating the high-fidelity UI based on test findings.
• Building a foundational Figma Design System sheet containing Color Styles, Typography Styles, and Master Components (Buttons, Input Fields, Cards) used in the project.

Expected outcome

Learners can test digital products with real users, iterate designs using evidence-based feedback, and build foundational design system libraries.

By the end of this module, learners should be able to:

• Execute a complete end-to-end UI/UX project from initial research to tested prototype.
• Articulate clear design rationales behind visual, structural, and interaction decisions.
• Structure a professional UX case study suitable for portfolio platforms (Behance, Notion, Webflow, Medium, or Personal Site).
• Demonstrate user flows, wireframes, iterations, and interactive prototypes concisely.
• Present design solutions with confidence and respond constructively to feedback.

• Structure of an industry-standard UX Case Study
• Writing compelling design stories: Problem, Research, Insights, Solution, Impact
• Documenting design rationales and "Before & After" iterations
• Visual presentation of research artifacts (Personas, Flows, Wireframes, Testing matrices)
• Formatting high-fidelity mockups, device frames, and prototype walkthroughs
• Building a UI/UX portfolio presence
• Presentation and storytelling techniques for designers
• Standard design review processes and handling stakeholder critiques

FINAL CAPSTONE PROJECT — End-to-End UI/UX Design

Learners finalize a comprehensive digital product solution addressing a real-world problem statement (e.g., Mobile Banking App, E-Learning Platform, Hospital Appointment System, Food Delivery App, E-Commerce Platform, Transport/Ride-Booking App, or Event Management Portal).

Complete Capstone Deliverables Checklist

• Executive Summary & Problem Statement: Clear articulation of the business problem, target audience, and proposed digital solution.
• User Research Artifacts:
  • Competitive Analysis matrix.
  • Primary User Persona (Demographics, Goals, Frustrations, Behaviors).
  • Empathy Map & User Journey Map.
• Information Architecture & Flows:
  • Sitemap / Application Structure diagram.
  • Comprehensive User Flow diagram covering primary, decision, and error paths.
• Wireframes (Low/Mid-Fidelity):
  • Digital wireframe suite of 5–7 core screens showing layout logic and structural hierarchy.
• Foundational Design System:
  • Typography scale, defined Color Palette (with contrast check pass marks), and Master UI Components (Buttons, Forms, Navigation, Cards).
• High-Fidelity UI Screens:
  • Fully styled screens (5–7 views) framed in device mockups with consistent auto-layout, spacing, and typography.
• Interactive Prototype:
  • Clickable Figma prototype demonstrating a complete, functional end-to-end user flow with transitions and interactive states.
• Usability Testing Report & Iterations:
  • Summary of usability test feedback (2–3 users), identified usability issues, and visual documentation of design revisions ("Before vs. After").
• Published UX Case Study:
  • A published, readable UX Case Study hosted on Notion, Behance, Medium, or a personal portfolio site detailing the full end-to-end process.
• Final Capstone Presentation:
  • A 10-minute live or recorded project presentation demonstrating the product research, design choices, prototype walkthrough, and key learnings.

Expected outcome

Learners possess a complete, portfolio-ready UX Case Study and an interactive prototype demonstrating end-to-end mastery of user research, information architecture, wireframing, high-fidelity UI design, usability testing, and professional design presentation.