Web App
QZ Test Web
Making exam preparation more accessible, structured, and engaging.
QZ Test is an online exam preparation platform designed for students in Bangladesh. It brings exam practice, question banks, study resources, and performance tracking together to help students prepare for academic and admission exams.
- Role
- UI/UX Designer
- Company
- HulkenStein
- Duration
- One Month
- Platform
- Web Application
Overview
QZ Test provides a digital learning and exam practice experience for students preparing for school, SSC, HSC, university admission, and competitive exams. The platform brings together exam packages, smart question banks, mock tests, live exams, previous-year questions, and progress tracking in one place. My design focus was to organize these features into a clear interface that helps students discover relevant exam resources, access practice materials, and navigate their preparation more easily.
The Challenge
An exam preparation platform can contain many categories, courses, questions, and learning tools. Making all these resources easy to discover and use is an important design challenge.
- Organizing multiple exam categories and preparation resources.
- Helping students find relevant courses and exam packages.
- Presenting information clearly without overwhelming users.
- Making exam practice features easy to access.
- Creating a consistent experience across different screen sizes.
Goals
The main design goals were to create a clear, accessible, and student-friendly exam preparation experience.
- Organize exam categories and learning resources.
- Make courses and exam packages easier to discover.
- Present key exam features in an understandable way.
- Support quick access to practice and question banks.
- Make exam history and performance information easy to understand.
- Maintain a consistent interface across desktop and mobile layouts.
Target Audience
School Students
Students in Classes 6–9 looking for structured practice and academic exam preparation.
SSC and HSC Students
Students preparing for board examinations who need practice questions, model tests, and revision resources.
University Admission Candidates
Students preparing for university, GST, medical, engineering, and other admission examinations.
Competitive Exam Candidates
Learners looking for online practice, previous-year questions, and ways to evaluate their preparation.
Design Approach
01
Information Architecture
Organize exam categories, courses, packages, and practice resources into clear sections.
02
Content Hierarchy
Prioritize important information so students can quickly understand available resources and choose where to begin.
03
Feature Organization
Present question banks, live exams, personalized tests, bookmarks, and leaderboards in a consistent structure.
04
Visual Consistency
Use consistent typography, spacing, components, and layouts to create a cohesive experience.
05
Responsive Design
Structure the interface to support browsing and exam preparation across different screen sizes.
Tools
Design
- Figma
- FigJam
AI
- Gemini
- Claude
- ChatGPT
Project
- ClickUp
- Discord
Design System
The design system supports consistency across the platform's pages and interface components.
- Color Palette
- Typography
- Components
- Spacing and Layout
Interface Design
Web interfaces covering discovery, courses, practice, and progress.
- Homepage
- Exam Categories
- Course and Exam Packages
- Question Bank
- Exam Features
- Student Progress
Interaction Design
The interaction design focuses on helping students move naturally between discovering resources, practicing questions, and reviewing their progress.
- Navigation and Discovery
- Course Exploration
- Exam Access
- Bookmarks and History
- Responsive Interactions
Deliverables
- Exam Preparation Platform UI Design
- Homepage and Exam Category Interfaces
- Course and Exam Package Interfaces
- Question Bank Interface
- Exam Feature Interfaces
- Student Progress and History Interfaces
- Reusable UI Components
- Responsive Interface Layouts