Design · User research, interfaces, and usability

UI/UX Design

Learn user research, information architecture, wireframing, visual design, prototyping, usability testing, accessibility, and mobile app design.

Move from design fundamentals to a complete Mobile App Prototype project with user research, personas, user flows, wireframes, high-fidelity screens, usability feedback, and a polished presentation-ready outcome.

Beginner to Intermediate 6 Weeks 10 Modules Online / Classroom Mobile App Prototype Project

Course overview

UI/UX design focuses on creating useful, usable, accessible, and visually effective digital products. User experience design considers how people complete tasks, while user interface design focuses on the visual and interactive elements they use.

This course introduces design thinking, user research, personas, user journeys, information architecture, wireframing, visual hierarchy, typography, color, layout, components, prototyping, usability testing, accessibility, and design handoff concepts.

The proposed capstone is a Mobile App Prototype covering user research, personas, user flows, wireframes, high-fidelity screens, usability feedback, documentation, and a professional presentation.

Good UI/UX design is more than making screens look attractive. It requires understanding users, clarifying tasks, testing assumptions, and improving usability through evidence and iteration.

Prerequisites

This course is designed for learners with basic computer knowledge and an interest in digital design. No prior design experience is required.

  • Basic computer knowledge.
  • Basic smartphone and web-browser knowledge.
  • Basic visual observation skills.
  • Basic communication and presentation skills.
  • Basic Figma knowledge is helpful but not required.
  • No prior UI/UX design experience is required.

Readiness activity

Choose a mobile app you use often. Identify its main task, navigation, buttons, forms, and one usability issue you notice. Explain how you would improve it.

Who can explore this course?

Beginners

Learn design

Build UI/UX and product-design foundations.

Career changers

Enter design

Build a foundation for UI/UX design pathways.

Developers

Understand design

Improve collaboration with designers and users.

Entrepreneurs

Design products

Turn product ideas into usable prototypes.

What you will learn

  • Explain UI and UX design fundamentals.
  • Use design-thinking and user-centered design processes.
  • Conduct basic user research and interviews.
  • Create user personas and user journeys.
  • Define user problems and design goals.
  • Create information architecture and sitemaps.
  • Create user flows and task flows.
  • Create low-fidelity wireframes.
  • Apply visual hierarchy, layout, typography, and color.
  • Design reusable UI components.
  • Create interactive prototypes.
  • Conduct usability testing and gather feedback.
  • Apply accessibility and inclusive-design practices.
  • Prepare design documentation and a portfolio case study.

Curriculum outline

The ten-module outline moves from UI/UX fundamentals to a Mobile App Prototype project. Exact design tool, project brief, and assessment requirements should be confirmed before delivery.

01

UI/UX design fundamentals

Understand the difference between UI and UX and the purpose of user-centered design.

  • UI versus UX.
  • User-centered design.
  • Design thinking.
  • Usability principles.
  • Accessibility basics.
  • Design process overview.

Practice: Analyze a mobile app and identify one UI strength and one UX improvement opportunity.

02

Design tools and workspace

Set up a design workspace and understand essential design tools.

  • Figma overview.
  • Design canvas and frames.
  • Shapes, text, and layers.
  • Components and styles.
  • Design file organization.
  • Collaboration and feedback.

Practice: Create a Figma file with organized frames, layers, and basic design elements.

03

User research and empathy

Understand users through research, interviews, and observation.

  • User research methods.
  • Interview questions.
  • Observation and context.
  • Research ethics and consent.
  • Affinity mapping.
  • Research insights.

Practice: Conduct a short interview and identify three user needs, goals, and pain points.

04

Personas and user journeys

Turn research insights into personas and journey maps.

  • User personas.
  • User goals and frustrations.
  • User journey mapping.
  • Touchpoints and emotions.
  • Problem statements.
  • Design opportunities.

Practice: Create a persona and user journey map based on approved research insights.

04

Information architecture

Organize content and features so users can find what they need.

  • Information architecture concepts.
  • Content inventory.
  • Sitemaps.
  • Navigation models.
  • Labeling and grouping.
  • Card sorting concepts.

Practice: Create a sitemap for a mobile app with clear navigation and content groups.

05

User flows and wireframes

Plan user tasks and create low-fidelity screen layouts.

  • User flows.
  • Task flows.
  • Wireframe concepts.
  • Low-fidelity design.
  • Screen layout.
  • Navigation and interactions.

Practice: Create a user flow and low-fidelity wireframes for a core app task.

05

Visual design principles

Apply visual hierarchy, typography, color, spacing, and layout.

  • Visual hierarchy.
  • Typography.
  • Color and contrast.
  • Spacing and alignment.
  • Grids and layout.
  • Icons and imagery.

Practice: Improve a basic screen using hierarchy, spacing, typography, and color contrast.

06

UI components and design systems

Build consistent, reusable interface components.

  • Buttons.
  • Forms and inputs.
  • Cards.
  • Navigation bars.
  • Components and variants.
  • Design systems.

Practice: Create reusable button, input, card, and navigation components.

06

Prototyping and interactions

Turn static screens into interactive prototypes.

  • Prototype concepts.
  • Frames and connections.
  • Interactions and transitions.
  • Mobile navigation.
  • Prototype testing.
  • Prototype presentation.

Practice: Connect screens into a clickable mobile prototype.

07

Usability testing and accessibility

Evaluate designs with users and improve accessibility.

  • Usability testing.
  • Test tasks and scenarios.
  • Observing user behavior.
  • Feedback analysis.
  • Accessibility guidelines.
  • Inclusive design.

Practice: Test a prototype with two participants, record findings, and propose improvements.

08

Capstone delivery

Complete the Mobile App Prototype project and prepare a professional demonstration.

  • Define the app purpose and target users.
  • Conduct basic user research.
  • Create personas and user journeys.
  • Define user flows and information architecture.
  • Create wireframes and high-fidelity screens.
  • Build reusable UI components.
  • Create an interactive prototype.
  • Conduct usability testing.
  • Improve the design based on feedback.
  • Document the process and present the outcome.

Practice: Submit a complete Mobile App Prototype with research, wireframes, high-fidelity screens, prototype, usability findings, and a case study.

Practical exercise ideas

Complete these smaller activities before assembling the final Mobile App Prototype project.

Research

User interview

Conduct a short interview and identify user needs.

Personas

Persona creation

Create a persona based on research insights.

Architecture

App sitemap

Create a sitemap and navigation structure.

Wireframes

Low-fidelity screens

Create wireframes for a core user task.

Visual design

UI screen redesign

Improve hierarchy, spacing, and readability.

Prototype

Clickable prototype

Connect screens and test a main user flow.

Suggested six-week learning plan

This is an illustrative learning sequence. Confirm the academy's official timetable, design tool, project brief, and assessment requirements before publishing.

Weekly focus and practical milestones
Week Focus Suggested milestone
01 UI/UX fundamentals and design tools Set up a design file and analyze an app.
02 User research, personas, and journeys Create a persona and user journey map.
03 Information architecture and user flows Create a sitemap and task flow.
04 Wireframes and visual design Create low-fidelity and high-fidelity screens.
05 Components, prototyping, and usability Create a prototype and conduct usability testing.
06 Capstone presentation Submit and present the Mobile App Prototype.
Turn user needs into a usable product

Capstone project

Mobile App Prototype

Build a Mobile App Prototype for an approved educational, productivity, health, travel, e-commerce, or another suitable use case. Possible examples include a task manager, study planner, fitness tracker, recipe app, travel planner, or local-services app.

Core project requirements

  • Define the app purpose and target users.
  • Identify the main user problem and design goal.
  • Conduct basic user research with approved participants.
  • Create at least one user persona.
  • Create a user journey map.
  • Define core user flows and task flows.
  • Create an information architecture and sitemap.
  • Create low-fidelity wireframes for key screens.
  • Create high-fidelity screens for key user journeys.
  • Use visual hierarchy, typography, color, and spacing.
  • Create reusable UI components.
  • Create an interactive prototype.
  • Conduct usability testing with at least two participants.
  • Document findings and improve the design.
  • Prepare a case study and final presentation.

Quality requirements

  • Use clear navigation and logical screen flow.
  • Use consistent typography, spacing, and color.
  • Use accessible color contrast.
  • Use readable text sizes and clear labels.
  • Use meaningful icons and imagery.
  • Use clear buttons and interactive states.
  • Use reusable components and consistent patterns.
  • Use inclusive and accessible design practices.
  • Use realistic sample content.
  • Use usability feedback to improve the design.
  • Document assumptions, limitations, and next steps.
  • Use only images, icons, and assets you are authorized to use.
  • Respect participant privacy and obtain consent for research.
  • Use a clear project file structure and presentation.

A strong mobile app prototype should be usable, accessible, visually consistent, and based on evidence from user research and usability testing.

Suggested project structure

Keep research, design files, prototypes, feedback, and documentation organized.

mobile-app-prototype/
├── 01-research/
│   ├── interview-questions.md
│   ├── interview-notes.md
│   └── affinity-map.png
├── 02-define/
│   ├── persona.pdf
│   ├── user-journey.pdf
│   └── problem-statement.md
├── 03-architecture/
│   ├── sitemap.pdf
│   └── user-flow.pdf
├── 04-design/
│   ├── wireframes.pdf
│   ├── high-fidelity-screens.pdf
│   └── design-system.png
├── 05-prototype/
│   └── prototype-link.txt
├── 06-testing/
│   ├── test-plan.md
│   ├── findings.md
│   └── improvements.md
├── case-study.pdf
└── README.md

Do not publish participant names, contact details, recordings, or other personal research data without appropriate consent and approval.

UI/UX design workflow

UI/UX design is iterative. Research findings, usability feedback, and changing product needs may require returning to research, architecture, wireframes, or visual design.

Research

Understand users

Learn user needs, goals, behaviors, and pain points.

Define

Clarify the problem

Create personas, journeys, and problem statements.

Structure

Plan the experience

Create sitemaps, user flows, and information architecture.

Design

Create interfaces

Build wireframes, visual designs, and components.

Test

Validate usability

Test prototypes and gather user feedback.

Improve

Iterate and document

Improve designs and explain design decisions.

A usable interface helps users complete tasks clearly and confidently. Accessibility, consistency, feedback, and simplicity should guide every design decision.

Tools and technologies

The exact design tool may vary by delivery. The proposed toolkit focuses on practical UI/UX design and mobile app prototyping workflows.

  • UI/UX Design
  • Figma
  • Design thinking
  • User research
  • Personas
  • User journeys
  • Information architecture
  • Wireframing
  • Prototyping
  • Usability testing
  • Accessibility
  • Design systems
  • Google Forms
  • Miro or FigJam

Supporting concepts

  • User-centered design and design thinking.
  • Research, personas, journeys, and problem definition.
  • Sitemaps, user flows, and information architecture.
  • Wireframes, visual hierarchy, typography, and color.
  • Components, design systems, and interactive prototypes.
  • Usability testing, accessibility, and iteration.

Learning outcomes

By completing the proposed lessons and exercises, aim to demonstrate the following abilities:

  • Explain UI and UX design fundamentals.
  • Use a user-centered design process.
  • Conduct basic user research.
  • Create personas and user journeys.
  • Create information architecture and user flows.
  • Create wireframes and high-fidelity screens.
  • Apply visual hierarchy, typography, and color.
  • Design reusable UI components.
  • Create interactive mobile prototypes.
  • Conduct usability testing and improve designs.
  • Apply accessibility and inclusive-design practices.
  • Build and present a Mobile App Prototype case study.

These are learning objectives, not guarantees of employment, certification, placement, or a specific design role. Progress depends on practice, research quality, design thinking, feedback, and continued learning.

Related career interests

Illustrative directions for continued learning, not job or placement guarantees.

  • Junior UI/UX Designer
  • UX Research Trainee
  • Product Designer Trainee
  • UI Designer Trainee
  • Interaction Designer Trainee
  • Design Assistant
  • Technology Trainee

Portfolio presentation ideas

  • Explain the app purpose and target users.
  • Show research insights and personas.
  • Present user flows and information architecture.
  • Show wireframes and high-fidelity screens.
  • Demonstrate the interactive prototype.
  • Explain usability findings and design improvements.
  • Discuss accessibility, limitations, and next steps.

Frequently asked questions

Who is this course for?

It is suitable for beginners, career changers, developers, entrepreneurs, and anyone interested in designing useful and usable digital products.

Do I need design experience?

No. The course starts with UI/UX fundamentals and builds practical design skills step by step.

Do I need Figma experience?

Basic Figma knowledge is helpful but not required. The course introduces essential Figma concepts and workflows.

Will the course cover user research?

Yes. It covers user research methods, interviews, observation, research ethics, affinity mapping, and research insights.

Will the course cover personas?

Yes. It covers user personas, user goals, frustrations, user journey mapping, and problem statements.

Will the course cover wireframes?

Yes. It covers wireframe concepts, low-fidelity design, screen layout, navigation, and interactions.

Will the course cover visual design?

Yes. It covers visual hierarchy, typography, color, contrast, spacing, alignment, grids, icons, and imagery.

Will the course cover components?

Yes. It covers buttons, forms, cards, navigation bars, components, variants, and design-system concepts.

Will the course cover prototyping?

Yes. It covers prototype concepts, frames, connections, interactions, transitions, and mobile navigation.

Will the course cover usability testing?

Yes. It covers usability testing, test tasks, observing user behavior, feedback analysis, and design improvements.

Will the course cover accessibility?

Yes. It covers accessibility guidelines, inclusive design, color contrast, readable text, labels, and accessible interactions.

What is the capstone project?

The proposed capstone is a Mobile App Prototype covering user research, personas, user flows, wireframes, high-fidelity screens, usability testing, and a case study.

Which tools are used?

The proposed tools include Figma, FigJam or Miro, Google Forms, and standard research and documentation tools. Confirm the academy's selected design tools before enrollment.

How long is the course?

The supplied course information proposes a duration of six weeks. Confirm the academy's official schedule, tools, and assessment requirements.

Does this course guarantee a job?

No. The course can support practical learning and portfolio development, but it does not guarantee employment, placement, certification, or salary.

How do I enroll?

This page is a frontend course-information demonstration. Enrollment, payment, scheduling, and admission workflows are not implemented here.

Design useful and usable products

Build your UI/UX project

Study user research, information architecture, wireframing, visual design, prototyping, and usability through a practical portfolio project.