Xamify · Smart CBTWeb design case study

Smart CBT: a cutting-edge skill assessment software

The smart way to take assessments for hiring, tech screening, staffing, and recruitment.

Product: Smart CBT by Xamify
Company: BJIT Limited
Role: Lead UX Designer
Year: 2024

01.Overview

Meet Smart CBTThe new age assessment software

Welcome to Smart CBT, the future of testing. This cutting-edge software is here to revolutionize how we assess knowledge and skills. Smart CBT goes beyond just an assessment tool; it's a whole new experience.

Smart CBT offers a sophisticated yet simple interface, transforming traditional testing limitations. It enhances education and recruitment by turning every interaction into a growth opportunity, so educators and organizations can streamline assessments and empower their journeys.

What I designed

Landing pageHero, value, features, steps, industries, pricing, blog and contact
Purchase flowPlan form, login, OTP verification, payment and confirmation
Admin dashboardQuestion bank, question sets, sub-person assignment and previews
Email templateOne-time password email
UI style guidelinesMenus, buttons, icons, form errors and illustration

Why Smart CBT: an all-in-one solution for CBT systems

Efficient Tech Recruitment
Enhance your tech recruitment efficiency by employing accurate programming and coding tests to evaluate developer skills, enabling precise assessment and selection of candidates best suited.
Secure Online Exams
Enable the execution of secure online examinations through our dependable proctoring system, designed to uphold fairness and integrity, thereby showcasing genuine talent and fostering an equitable assessment environment conducive to merit-based success.
Easy & Flexible
Our interface prioritizes user-friendliness and adaptability, featuring an intuitive design for effortless navigation and exceptional flexibility customized to meet the distinct organizational requirements of any entity with utmost ease and efficiency.
Time and Cost Savings
Our streamlined recruitment processes not only minimize the need for manual labor but also result in substantial time and cost savings, allowing organizations to allocate resources more efficiently while achieving their hiring objectives.

02.Landing page

One page, from first look to pricing

The page moves a visitor from what Smart CBT is, to how it works, to who it's for, to what it costs, with a contact form and a closing call to action at the end.

Full Smart CBT landing page: hero, Why Smart CBT, Meet Smart CBT, features, four steps, industries, pricing, blog, contact form, call to action and footer

Scroll inside the window to see the full page ·

Features & services

Six kinds of testing

Recruitment Testing
Academic Testing
Skill Assessment Testing
Psychometric Tests
Coding Assessment Testing
Finance & Accounting Tests

Industries we serve

Eight industries

Information Technology
Engineering & Manufacturing
Education & Academia
Retail
Finance & Banking
Hospitality & Tourism
HR & Recruitment Agencies
Healthcare

Achieve hiring success in simple four steps

01
Register & Log In
Register and then log in to your dashboard to get started.
02
Select Exam & Invite Candidates
Choose specific pre-loaded exams and invite candidates via email with one button click.
03
Begin Exam
Candidates can participate in the online exam. Proctoring features prevent cheating.
04
Get Result
Take auto-generated scores and exam results with advanced sort and filter.

Simple, transparent pricing

StartupFreeLifetime
Standard$25/month
Advance$40/month

Landing page hero and the Why Smart CBT cards, with pricing and industries behind — The hero and value cards, with industries and pricing behind.

03.Purchase flow

From pricing to paid

Choosing a plan on the pricing table starts a short, focused flow. Every screen shares one quiet shell, the Smart CBT wordmark and a "Back To Homepage" link, so the form is the only thing asking for attention.

1Choose a plan
2Fill out the form
3Verify email (OTP)
4Confirm payment
5Payment successful

Purchase form for the Advanced plan with name, company, phone, address, email, password and confirm password — **Fill out the form.** The chosen plan stays pinned at the top while the account details are entered.

Login card with email, password, Submit and Forgot Password — **Login.** Returning customers sign in with email and password, with a clear path to reset.

OTP email: Hi Ashik, here is your one time password, five digit code, expires in 3 minutes — **The OTP email.** A five-digit code that expires in 3 minutes.

OTP verification, designed in three states

OTP verification with empty boxes and a disabled Submit button — **Empty.** Submit stays disabled until the code is complete.

OTP verification with two digits entered and a countdown — **Typing.** Filled boxes turn brand blue; a countdown and Send OTP sit below.

OTP verification with boxes outlined in red — **Error.** The whole code turns red so the problem is unmistakable.

Confirm payment with SSL Wireless or Stripe and card information fields — **Confirm payment.** Pick SSL Wireless or Stripe, then enter card details.

Payment successful confirmation with Back To Home — **Payment successful.** A clear end state that points to the email receipt.

Full confirm payment page including the blue site footer — The full page shell: header, card, and the shared Smart CBT footer with newsletter sign-up.

04.Admin dashboard

Where the exams get built

Behind the marketing site sits the Smart CBT admin, where hiring teams build a question bank, assemble question sets and run exams. The screens are dense, so the design leans on small, consistent patterns that keep tables readable.

Dashboard
Question Bank
Question Set
Exam Manager
Candidate
Report Management
Profile
Settings

Dashboard

Upcoming Exam15th June3:30 PM (GMT)
Question Bank: Total Question1,000216 New Question
Total Question Set213 New Set
Exam Overview4 Examsin this month

Dashboard with a light sidebar and compact row actions — **Light sidebar.** The same dashboard with a quieter navigation and actions tucked behind a menu.

Patterns that keep dense tables calm

01
Context on hover
The usage counter reveals which exams used a question (“Exams used in: ExamID12, ExamID13, ExamID14”); dates reveal created and updated times.
02
Actions on demand
Rows show a quiet “•••” until hovered, then view, edit and delete appear with labels.
03
Add and remove in place
Search results toggle between Add and Remove, so the set builds without leaving the list.
04
Where it came from
Origin badges show whether a question came from the QB question bank or a QS question set; new ones are marked NEW.

Question bank

Question list with a usage tooltip and labelled view, edit and delete hover states — **Question list.** Type, technology, tags and usage, with labelled hover actions.

Question list search results with compact row menus — **Search results.** “41 Search Result Found”, with compact row menus.

Success banner: New Question has added to the Question List, with the new row highlighted — **Success.** A banner confirms the save and the new question is highlighted at the top.

Question preview: MCQ options with the correct answer marked, metadata, files and comments — **Preview.** Correct answer marked, every attribute, attached files and comments.

One form that adapts to the question type

Every question shares the same base fields: title, type, platform, technology, job role, rank, difficulty, mark, tags, remarks and files. Choosing a type adds only what that type needs.

Create question form with only the shared base fields — **Base form.** The shared fields, before a type is chosen.

Create question for MCQ with options, correct answers as chips and attached files — **MCQ.** Options A to D, “Add More Option”, and correct answers picked as chips. Up to 6 files.

Create question for a coding problem with a rich text editor and test case files — **Coding problem.** A rich editor plus sample and real input and output files (.txt only).

Question sets

Prepare question set in draft with total questions and marks at zero and the question bank below — **Prepare a set.** A draft with running totals, plus assign sub-person, create question and finish.

Create question set with collapsed set panel and search results to add or remove — **Build.** 52 matching questions, each with Add or Remove.

Expanded question set showing added questions with editable marks and a total of 55 — **Review.** Expand the set to adjust marks; the total updates (55).

Sub person assignment form with an error message banner — **Assign a sub-person.** Delegate questions with an instruction, deadline, count and mark; errors appear as a banner above the form.

05.UI style guidelines

One system for every screen.

The guidelines document the menu across desktop, tablet and mobile; four button types in active, hover, focus and disabled states; the icon set; form error messaging; and the illustration style.

PrimaryContact UsActiveContact UsHoverContact UsFocusContact UsDisabled

ActionContact UsActiveContact UsHoverContact UsFocusContact UsDisabled