SmartTestby Verise Tech

SmartTest — UI Design Screens

A complete, responsive interface for an MCQ test system: teachers author a question bank and publish timed tests; students sit a uniquely shuffled paper that auto-submits and is graded on the server. Thirteen screens, each designed for desktop and mobile.

13 screens · desktop & mobile Server-side grading Countdown & auto-submit Per-student shuffle

Colour system

#0F1B36Ink
#2B57E0Brand
#0FB3A1Accent
#16A06BSuccess
#C2820FWarning
#DC4438Danger
#F4F7FCCanvas
#E4E9F2Border

Typography

Plus Jakarta Sans Inter for interface text · clear at every size JetBrains Mono · 12:43 · 85%

All screens

desktop 1440px · mobile 390px
Login desktop Login mobile
01 auth Open
Login
Split brand panel, demo credentials, SSO option.
Sign up desktop Sign up mobile
02 auth Open
Sign up
Role picker for Teacher vs Student, validation hints.
Teacher dashboard desktop Teacher dashboard mobile
03 teacher Open
Teacher dashboard
At-a-glance stats, recent tests, live submissions feed.
Question bank desktop Question bank mobile
04 teacher Open
Question bank
Searchable, filterable list of authored MCQs.
Add question desktop Add question mobile
05 teacher Open
Add question
Author a 4-option MCQ with a correct-answer toggle.
Edit question desktop Edit question mobile
06 teacher Open
Edit question
Same editor with a destructive delete confirmation.
Create test desktop Create test mobile
07 teacher Open
Create test
Select questions, set the timer, publish — with live summary.
Test preview desktop Test preview mobile
08 teacher Open
Test preview
Teacher view with correct answers and a publish switch.
Test results desktop Test results mobile
09 teacher Open
Test results
Per-student scores, timings and score distribution.
Student dashboard desktop Student dashboard mobile
10 student Open
Student dashboard
Available tests as cards with best-score badges.
Start test desktop Start test mobile
11 student Open
Start test
Pre-flight rules screen with duration and question count.
Take test desktop Take test mobile
12 student Open
Take test
The signature screen — timer, options, navigator grid.
Your result desktop Your result mobile
13 student Open
Your result
Score ring, difficulty breakdown and answer review.
About this palette. The colours are an interpretation of a professional Verise Tech-style identity (deep navy, brand blue, teal). If you share the exact brand hex values, every screen can be re-skinned in minutes — the whole system is driven by a handful of CSS variables.
SmartTest · designed for Verise Tech · 13 screens