UI/UX Design for Product Teams

Research, wireframe and prototype like an in-house product designer, then hand off cleanly to engineers.

5 Weeks5 Sessions/WeekIn PersonBeginner-friendly

FigmaWireframingDev Handoff

Share this course

Overview Curriculum Deliverables Assessment Enquire

What you'll be able to do

Graduates can take a design problem from research through to a tested, high fidelity prototype and present it as a case study.

Run user research and turn findings into insight statements, personas and empathy maps
Structure a product through user flows, task flows, sitemaps and navigation models
Build interfaces using layout, grid, spacing, colour and typography systems
Work confidently in Figma with auto layout, components, variants and design systems
Build a high fidelity clickable prototype with interaction and animation
Run a usability test, rate severity and produce a prioritised fix list
Apply accessibility basics and hand off work to developers
Present a design case study

Who it's for

Beginners entering design with no prior professional experience
Graphic designers moving into product and interface work
Developers and QA engineers who want interface and usability skills
Career-switchers targeting design roles in the local and remote job market

Prerequisites

Computer literacy and a laptop
A Figma account, set up in Session 1
No prior design or coding experience required

Tools and technologies

FigmaAuto layoutComponentsVariantsVariablesStylesDev modePrototypingCard sorting toolsAffinity mapping toolsAI assisted clustering for research synthesisAI generated draft screens and assets

Target roles

UI/UX DesignerProduct Designer (junior)Interaction DesignerVisual Designer for digital productsFreelance interface designer

Course curriculum

5 modules · 4-5 weeks

01
What UX and UI actually mean
UX against UI, the designer's role in a product team, the local and remote job market, Figma account and interface tour
02
The design process
Empathise, define, ideate, prototype, test; the process as a loop; frames, shapes, alignment, grouping
03
The layers of user experience
Strategy, scope, structure, skeleton, surface; pen tool, boolean operations, corner radius, icon drawing
04
Colour
Hue, saturation, brightness; primary, secondary and semantic colour; contrast ratios and WCAG AA; colour styles and variables
05
Typography
Typeface anatomy, serif against sans serif, line height and line length, type scale, hierarchy, Devanagari and Latin pairing, text styles

06
Talking to users
Interviews against surveys against observation, non leading questions, participant recruitment, guide writing and peer review
07
Running research and making sense of it
Interview technique, note taking and consent, affinity mapping, insight statements, AI assisted clustering and its limits
08
Personas and empathy maps
What a persona is for, grounding in real quotes, empathy maps, says, thinks, does and feels
09
User flows and task flows
User flows, task flows and wireflows; happy path, error path and edge cases; flow notation
10
Information architecture
Open and closed card sorting, sitemaps, tab bar, drawer and hub and spoke navigation, labelling in user vocabulary

11
Layout, grid, and spacing
Visual hierarchy, alignment, proximity, balance, white space, the eight point spacing system, mobile grids and safe areas
12
Auto layout
Direction, gap, padding and alignment; hug and fill; constraints and responsive resizing
13
Components and variants
Components, instances and overrides; variants and component properties; when to componentise
14
Design systems
Tokens, components, patterns and guidelines; consistency at scale; assembling a mini design system
15
Icons, images, and illustration
Icon consistency, stroke weight and sizing, labelling icons, photography, illustration styles, AI generated assets and licensing

16
Interface patterns and a full teardown
Navigation, forms, search, filters, lists and modals; empty, loading, error, success, offline and first run states; app teardown
17
Prototyping
Fidelity levels; connections, triggers, actions and easing; prototyping for a test; device preview
18
Advanced prototyping
Smart animate, overlays, scroll behaviour, variables and conditional logic, AI generated first draft screens
19
Usability testing
The five user rule, task scenarios, facilitation without leading, the think aloud method, severity rating
20
Accessibility, handoff, and the case study
WCAG basics, touch targets, screen readers, colour independence, dev mode and handoff, case study structure

21
Problem and research review
Problem statement, research evidence and persona critique
22
Structure review
User flow, sitemap and wireframe critique
23
Interface review
Visual consistency, spacing, contrast and design system usage
24
Prototype and test review
End to end prototype, live usability test, prioritised fix list
25
Final presentation
Case study presentation, Figma file and prototype submission

Deliverables

#	Checkpoint	Submission
1	Session 8	Research summary, one persona, one empathy map
2	Session 10	User flow and sitemap
3	Session 14	Mini design system and wireframes
4	Session 18	High fidelity clickable prototype
5	Session 25	Case study PDF, Figma file, presentation

Assessment

40%The five checkpoint deliverables

20%Critique participation, assessed on the quality of feedback given

25%Final case study, Figma file and prototype

15%Final presentation and questioning

Project week is structured entirely as review and critique. Each of the four review sessions gates the next stage of the project.

Out of scope

Front coding and implementation
Branding and identity design
Print and packaging design
Motion design beyond prototype animation
Product strategy and business modelling, which are covered in the Product Design course