UX Design and Mockups: From User Research to a Tested Prototype
UX Design and Mockups is a beginner-level course of 5 lessons (about 1 h 26 min), with 16 exercises and 15 quiz questions. No prerequisites. Exercises run in the browser, with nothing to install.
- Cross-functional skills
- Beginner
- 5 lessons
- 1 h 26 min
- 16 exercises
- Exercises run in the browser
The course in brief
This course teaches the end-to-end UX design process through a running example: an ordering app with in-store pickup. You run and synthesize user research, build personas and journeys, organize information and draw wireframes, then create mockups and prototypes in Figma before testing them with real users. Each lesson ends with hands-on exercises with verifiable results.
What you will be able to do
- Prepare, run and synthesize user interviews without biasing the answers
- Build personas and journey maps grounded in data
- Organize a site structure with card sorting and draw mobile wireframes
- Create consistent Figma mockups using styles, components, variants and auto layout
- Link screens into a prototype and check basic accessibility rules
- Run a user test, calculate success rate, median time and SUS score, and prioritize fixes
Syllabus: 5 lessons
- Choose a research method suited to the question asked (interview, observation, survey, usage data)
- Prepare and run an interview without steering the answers
- Synthesize observations by affinity and formulate a problem to solve
- 02
Personas and User Journeys
- Build a persona grounded in research data
- Map a user journey with its stages, emotions and friction points
- Distinguish the user journey (overall experience) from the user flow (sequence of screens)
- 03
Information Architecture and Wireframes
- Organize a product's content into an understandable site structure
- Use card sorting to name and arrange sections
- Draw a low-fidelity wireframe that establishes the hierarchy of a screen
- 04
Mockups and Prototypes in Figma
- Move from wireframe to a consistent mockup using styles, components and variants
- Use auto layout and grids for screens that adapt
- Link screens into a clickable prototype and check basic accessibility
High-fidelity mockupComponents, variants and auto layoutInteractive prototypeVisual accessibility
- 05
Testing with Users and Iterating
- Prepare a user test protocol with task scenarios
- Run a session by having participants think aloud, without helping
- Measure and prioritize results (success rate, time, SUS, severity) in order to iterate
User testUsability metrics and SUSHeuristic evaluationIteration
Final project
Design and test the pickup journey of an ordering app
For a fictional neighborhood retailer launching online ordering with in-store pickup, run the complete UX process on the journey "knowing when to come and pick up your order, and picking it up". Starting from five interviews (real ones, or done with friends or family playing the role of customers, and saying so), produce the synthesis, the persona, the journey map, the site structure, the wireframes, the mockup and the prototype, then test it with at least five people and propose a corrected version.
Deliverables
- The interview guide and the affinity synthesis (themes counted in participants)
- A primary persona and a journey map with an emotion curve
- The site structure and the mobile wireframes of the journey's screens
- A Figma file with styles or variables, components with variants and a clickable prototype
- The test report: scenarios, success rates, median times, SUS scores, problems ranked by severity
- The corrected version of the affected screens
Assessment criteria
- Each design decision is tied to a research or test observation
- The interview questions and test scenarios are open and non-leading
- The mockup is consistent (styles, components) and covers error, loading and empty states
- Contrasts meet level AA and no information relies on color alone
- The metrics are correctly calculated and the fixes prioritized by severity
Frequently asked questions
Do I need to know how to draw to take this course?
No. UX design starts with understanding users and organizing information. Wireframes are drawn with rectangles, and Figma provides the tools needed for mockups.
What is the difference between UX and UI?
UX (user experience) covers the whole process: understanding needs, organizing journeys, testing. UI (user interface) is its visual part: colors, typography, components. This course covers both, with an emphasis on the process.
Do I need a paid Figma license?
The course exercises can be done with Figma's free plan or with another mockup tool that offers components and prototyping. Check the current plan terms on the vendor's website.
Is this course useful for developers?
Yes. Understanding personas, journeys and mockups helps you ask the right questions, respect accessibility and collaborate better with designers and product owners.
This course, told for your job
Say what you want to be able to do: “UX Design and Mockups” takes its place in your path, with examples from your field. The concepts stay those of the course.