UI/UX Design · Sem 4 · Figma · Grade A

Quiz Time

A mobile quiz app designed for students and teachers — built on persona-based research and a full Figma design system.

SDCIK2103 User Experience Design  ·  Grade A  ·  UI/UX Lead
Semester
Sem 4
Tools
Figma
My Role
UI/UX Lead~50% Figma work
Team
5 MembersGroup 2
Grade
A

Overview

Quiz Time is a mobile quiz application designed for students and teachers, targeting three key gaps in existing platforms: lack of personalised learning paths, low interactivity during question-answering, and no ability to review previously answered questions.

As UI/UX lead within the 5-person team, I drove the Figma work — including the design system, component library, high-fidelity wireframes, and overall visual direction. Approximately half of the Figma deliverables were led and executed by me, with the remainder produced collaboratively under my design direction.

Figma Design File

View Design File ↗

Research & Discovery

Competitor Analysis

  • Kahoot!, Quizizz, and Duolingo analysed for strengths and gaps
  • Key gaps identified: no personalised learning paths, low interactivity, no question review functionality

User Personas

  • Dr. Sofia (teacher, 32) — needs efficient quiz creation tools and class progress tracking
  • Desmond (student, 19) — needs quick access to quiz content, immediate feedback, and retry functionality

Key Research Findings

  • Users prioritised minimal-distraction interfaces
  • Quick access to quiz content within two taps
  • Immediate right/wrong feedback during sessions
  • Subject filtering and score visualisation
  • Retry functionality for missed questions

Design System

Colour Palette

  • Primary: #7E5EBC
  • Secondary: #D2EEFF
  • Correct feedback: #7DEE78
  • Wrong feedback: #FE7373
  • Background: #FFFFFF · Text: #000000

Typography

  • Inter typeface across 17 defined type styles — from 12px captions to 64px hero titles

Component Library

  • Buttons (primary, secondary, ghost)
  • Navigation Bar
  • Quiz Panel (A–D answer blocks with live feedback states)
  • Progress Bar
  • Icon Card
  • Text Field
  • Leaderboard Block
  • Achievements Block

All components designed for modularity and reuse across screens.

Screens Covered

← Previous

Interactive Data Visualisation

Power BI · AR · Sem 5