Lesson 4: User Interface (UI) & User Experience (UX) Prototyping
Developing a complex digital outcome to solve a real-world problem for NCEA Level 3 Digital Technologies.
🎯 Ngā Whāinga Akoranga | Learning Intentions
UI design principles (visual hierarchy, typography, colour contrast, whitespace), interactive wireframing (Figma / wireframes), usability heuristics, and mobile responsiveness.
Build low-fidelity wireframes and interactive high-fidelity Figma prototypes, test navigation flows with stakeholders, and refine layout grids.
🎥 Media Anchor & Pedagogical Scaffold
UI/UX Design Systems & Wireframing
Video Clip: “UI/UX Explained In 8 Minutes | UI/UX Design For Beginners | UI/UX Design Basics | Simplilearn” — 8 min 17 s.
🧠 1. Before Viewing (Activate & Predict)
Why do professional software teams build interactive prototypes before writing a single line of frontend code?
👁️ 2. During Viewing — the clip runs 8m17s; select the segments that serve these jobs
- Capture: Apply Nielsen's usability heuristics (system status visibility, user control, error prevention).
- Capture: Construct responsive flexbox/grid layout wireframes across mobile, tablet, and desktop viewports.
- Capture: Conduct interactive click-through user testing to catch navigation bottlenecks.
🗣️ 3. After Viewing & Kaiako Move (Process & Apply)
Kaiako Move: Facilitate peer usability testing where students observe classmates attempting tasks on their wireframes without providing verbal hints.
Immediate Task: Complete Section 4 of your Digital Tech Portfolio: High-Fidelity UI Wireframes & Usability Feedback Audit.
⚡ Whakaoho | Do Now: Squint at Your Own Interface
Half-close your eyes at your favourite app until the text blurs out. What is still obviously the most important thing on the screen?
Two minutes: now do exactly the same to your own wireframe. If nothing stands out once the words are gone, your visual hierarchy is doing no work at all and the layout is carrying nothing.
📖 Activity 1: Three Paper Layouts, Then Watch Someone Use One
Sketch on paper (13 min). Three different layouts for your main screen, on paper rather than in Figma. Paper matters here — the point is to be able to throw two of them away without feeling attached to the work. Then choose one and write why.
Test it silently (12 min). Build the chosen layout as a clickable prototype, hand it to someone with one task and no instructions, and watch without helping. Record every hesitation. A hesitation is a design defect even when the person eventually succeeds.
📝 Activity 2: Level 3 Digital Technology Portfolio Task & Merit/Excellence Scaffolding (20 mins)
Portfolio Section 4. Submit: (1) three paper layouts with your choice reasoned; (2) the interactive prototype with navigation flows working; (3) usability notes listing every hesitation you observed and what you changed in response — plus one thing you deliberately did not change, and why.
🏫 Kaiako Planning & Pedagogy Notes
NCEA Level 3 Alignment: Direct preparation for Level 3 Digital Technology (Develop a complex digital outcome to solve a specified problem). Emphasise systematic testing, stakeholder feedback loops, and technical code refinement for Merit/Excellence grades.