Quiztics
A quizzing platform to evaluate learner performance
Tools used
Project Overview
Description
Quiztics is an online quizing platform made to easily filter participants’s based on their proficiency levels . In every quiz a participant task is based on a particular skill through which the platform will help identify a Novice, Proficient, Specialist or an Expert Candidate. Quiztics has a admin flow where the admin can create assessment, master data, questions and a user flow where the participant will take a quiz and see their progress.
Main Objective
Our Goal
Design Process
Understand
The platform is similar to E-learning or E-training system where an e-learning assessment is the process of assessing or documenting, in measurable terms, a person’s knowledge, skills, and attitudes, via an online method. Assessments are used in e-learning courses as a way for an instructor or manager to identify how well a learner has understood course content. Assessments also help learners gauge their own knowledge and learning progress. The participants can access all the assessments which will increase the person’s knowledge, skills etc.
There are two roles on this platform
A participant we conducted research to understand people’s actions, needs and behaviors, to gain a deeper understanding of the problems people face and received valuable insights which helped us proceed furher in the design process.
Define
Our goal was to develop a strategy that would cover up the real problems, user expectations and other essential insights and also gives us in-depth understanding of the user goals and frustrations. Based on research and data collected we created empathy map and persona representing the ideal users of the platform.
Martin Jacob
Age:
22
Job title:
Developer
Status:
Single
Location:
Bangalore
An investment in knowledge pays the best interest.
about
Martin is a recent graduate who resides in bangalore and started his career as a software developer in an IT firm. He was always passionate for learning new technologies and trends and wanted to be a part of it. He likes to participate for online competition on various platforms.
Goals
pain points
needs
interests
Coding
Reading
Travelling
Ideate
User flow helped us with segmenting and defining the user experience and it allowed us to track what screens users typically see when they interact with a product and how they interact with those screens.
Prototype
The goal of a prototype is to test and validate ideas before sharing them with stakeholders and eventually passing the final designs to team for the development process. Prototypes are essential for identifying and solving user pain points with participants during usability testing.
visual design system
Typography
Typography is the art and science of font style, appearance, and structure which creates harmony and consistency in a design. Hence, we used the poppins which is simple and easily readable.
Proxima Nova
Regular
Semibold
Bold
Black
Font size
Font weight
example
40px
Semibold
Good design always satisfies
32px
Black
Good design always satisfies
32px
Semibold
Good design always satisfies
24px
Black
Good design always satisfies
24px
Semibold
Good design always satisfies
20px
Bold
Good design always satisfies
20px
Semibold
Good design always satisfies
20px
Regular
Good design always satisfies
18px
Semibold
Good design always satisfies
18px
Regular
Good design always satisfies
16px
Semibold
Good design always satisfies
16px
Regular
Good design always satisfies
14px
Semibold
Good design always satisfies
14px
Regular
Good design always satisfies
12px
Semibold
Good design always satisfies
12px
Regular
Good design always satisfies
Colors
We use colors in such a way that it harmonizes perfectly with the UI/UX and looks relatable to the product attractively.
Primary Colors
#26235D
#6E797C
#6E797C
#6E797C
#6E797C
#6E797C
Secondary Colors
#70C27A
#F99F42
#2E79BB
#DE1B54
#C5C7C5
#FFFFFF
Components
Material Components are interactive building blocks for creating a user interface.
Input Fileds
Email ID
Email ID
Email ID
Hover
Email ID
Active
Icons
Buttons
Primary Button
Default
Hover
Secondary Button
Default
Hover
Tertiary Button
Default
Hover
Other Components
Test Phase
After the Visual design was complete we evaluted the design on the target audience. We collected feedback from users within our organization, who under the testing phase were given the link of wireframe. Further we evaluated the pros and cons of each feedback received from them in terms of applying them in practicality and how it can affect in functioning of the final product.
actual screens
Login Screens
Admin Screens
Reports
User Screens
Participant Dashboard
The Dashboard consists of Learner profile, Best performance, and Assessment Distribution sections. As and when there are any upcoming or ongoing assessments for the participant to take they can view them directly in the Assessments for you to take section
Assessment
The participant can view all the assessments, average score, proficiency and also Check result of a particular assessment. The participant can also see what is their prociency level in the graph and Assessment distribution count
Check Result
Here, the participant can view their detailed result, check their rank, see the count correct, wrong and skipped answers and also see how they have performed in individual questions
Settings
The participant can Change theme , Change password and Change Language from here, they can update their basic details too
Our goal was to create an interactive user interface which has a gamified look an feel so that the user’s enjoy taking assessment. After submitting the assessment user can instantly see their deatiled results and analyse how they have performed. User’s can also submit a feedback on the assesment.
Mobile Responsive
