About this course
Research, wireframing and high-fidelity product design in Figma, closing with a shipped-quality case study.
This is a 6-week short course - enough depth to build real projects and a portfolio piece, without a long commitment. It runs online in the August 2026 cohort (starting 1 August 2026) and is taught the EchoLens way: you learn by doing real, gradeable work rather than just watching lectures.
What's included
- Live, instructor-led online sessions across 6 weeks (24 hours total).
- Hands-on coding quests you solve inside the EchoLens browser compiler - nothing to install.
- Gems, stages and a leaderboard that keep you moving instead of grade anxiety.
- A verified certificate with a scannable QR code, ready to share on LinkedIn, when you finish.
- The first week is open free so you can try the course before you pay.
What you will learn
Course learning outcomes
By the end of this course, you will be able to:
- CLO 1. Conduct user research and translate findings into personas, journeys, information architecture and user flows.
- CLO 2. Design high-fidelity interfaces in Figma with a consistent, token-driven design system.
- CLO 3. Build, usability-test and iterate an interactive prototype, then prepare it for developer handoff.
Course outline - level by level
12 leveles, each with hands-on quests you clear in the portal.
- Level 1. UX fundamentals and user research - What UX/UI are and how they differ, the user-centered process, interviews and surveys, personas and empathy maps
- Level 2. Problem definition, IA, and user flows - From insight to a sharp problem statement, journey maps and pain points, site maps, user flows and navigation
- Level 3. Figma fundamentals and auto layout - The Figma interface, frames and pages, components and instances, auto layout, organising a file cleanly
- Level 4. Wireframing: layout and hierarchy - Low fidelity thinking, layout and visual hierarchy, screen by screen flows, annotating intent
- Level 5. Visual design principles for interfaces - Colour and typography for UI, spacing systems and layout grids, visual hierarchy, light and dark modes
- Level 6. UI components and design tokens - Buttons, inputs and cards with states, component states and consistency, design tokens, a starter component library
- Level 7. High fidelity mockups - Wireframe to polished screen, applying the design system, empty and error states, real content over placeholder filler
- Level 8. Prototyping and micro interactions - Clickable prototypes, transitions and smart animate, micro interactions, testing on a real device
- Level 9. Design systems and accessibility - Variables for colour, spacing and type, variants, properties and slots, semantic naming, contrast and touch targets
- Level 10. Usability testing and AI in the workflow - Writing and running a usability test, prioritising issues and iterating, Figma AI features, AI as a collaborator
- Level 11. Case studies and portfolio - The case study structure, telling the process as a story, presenting screens well, showing outcomes not just visuals
- Level 12. Developer handoff and delivery - Handoff in Figma Dev Mode, specs, tokens and redlines, exporting assets, annotations and edge cases
How you submit: Quests submitted as PDF or image exports - multiple files per submission.
Your production end project
A Complete Product Design Case Study
One real product, researched, designed, prototyped, tested, and presented, the portfolio piece that gets UX interviews.
Take one real problem from research all the way to a tested, high fidelity, prototyped product design, documented as an outcome driven case study. This is the single artifact that gets a junior designer hired, because it shows process and judgement, not just pretty screens.
- ✓A defined user problem backed by real research, whether interviews or a survey
- ✓Personas, a user journey, and a clear problem statement
- ✓Information architecture: a site map and user flows
- ✓Low fidelity wireframes for the core flow
- ✓A design system with colour, type, and spacing tokens as Figma variables, plus reusable components
- ✓High fidelity screens for a complete flow, including empty and error states
- ✓An interactive, testable prototype
- ✓One round of usability testing with findings and a documented iteration
- ✓Accessibility and responsive design addressed, with contrast checked
- ✓A written case study: problem, process, solution, and outcome
- ✓A developer ready handoff prepared in Dev Mode
Shipped when: The prototype runs on a phone, the case study reads as a clear story from problem to outcome, the design system is consistent, contrast passes, and a recruiter understands your process in two minutes.
Who it's for
UI/UX Designing suits learners at a beginner to intermediate level who want a practical, project-based route into UI/UX Designing. You need only a browser and an internet connection - all coding runs inside the EchoLens compiler, so there is nothing to set up.
Certificate
Finish every stage and EchoLens issues a verified certificate carrying a QR code anyone can scan to confirm it on our site. You can add it to your CV or share it to LinkedIn in one click.