Product Design (UX/UI)

User Experience Design: Product Discovery and Research

Students frame a product problem, research real users and plan a product with one AI-powered feature. They learn how product design, UX and UI fit together, how designers work with product managers and engineers, and how South African and African design traditions shape what people expect. Students run ethical, POPIA-compliant research, then turn their findings into affinity maps, personas, jobs to be done, journey maps and success metrics. They map information architecture, user flows and low-fidelity wireframes, and learn how HTML, CSS and a CMS work. AI is used as a research assistant, and students learn to check its summaries against the raw data and to spot bias. The module ends with a Product Discovery Brief.

User Interface Design: Visual Design and Design Systems

Students turn their wireframes into a high-fidelity product built on a documented design system. The module starts with the craft: typography, hierarchy, colour, grids, responsive layout, iconography and brand, with a short assessed exercise in Photoshop and Illustrator. These first weeks are mostly done without AI, so that students can judge AI output before they rely on it. Students then build components, variants and auto layout in Figma, with primitive and semantic design tokens, naming and documentation. They design to WCAG 2.2 AA, mobile first, with light and dark modes and a low-impact approach. They also design the product's AI feature, including suggestions, confidence, sources, undo and human review. The module ends with a tokenised design system and a high-fidelity product UI.

Prototyping: Interaction Design and Product Validation

Students answer a gamified brief from an industry client. Using Figma variables, conditional logic and state management, they prototype flows, transitions and microinteractions, including the AI states most products get wrong: loading, low confidence, wrong answers and fallbacks. Teams develop a game concept and estimate the time it will take to build. Students then test their prototype with real users, including users of assistive technology, and learn severity ratings and the basics of A/B testing, so that every change is based on evidence. Finally, they generate code from their designs with AI, then review and fix the HTML and CSS themselves. The module ends with a tested prototype, a usability report, a reviewed code handoff and a stakeholder presentation.

Professional Practice: Product Delivery and Live Client

Teams deliver and launch a live website for a real client in weekly sprints. Students learn Agile and Scrum, estimation and scope control, roadmaps, KPIs and the data literacy product teams rely on, as well as ethics, intellectual property, POPIA and the difference between freelance and in-house work. They build the client site in WordPress with custom CSS, run formal design reviews and design for launch and growth: an SEO-ready landing page, analytics and conversion tracking, an A/B test plan and a launch kit of social and print assets. Each team agrees an AI-use statement with its client and learns when not to use AI. The module ends with a live site, sprint documentation and a client presentation, exactly the experience employers look for.

Portfolio: Case Studies and Career Launch

The final module is about launching a career. Students choose their strongest projects and write case studies around the problem, the process and the outcome, showing clearly what AI did and what the designer decided. They create a personal brand launch kit in Figma, build a portfolio site in WordPress or Webflow, and polish their CV and LinkedIn profile. Mock interviews prepare them to talk about their work and their use of AI with confidence. The year ends at the Graduate Showcase, where students present a live portfolio, three case studies and a print-ready PDF portfolio.