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
- Create a simple, easy to use and intutive design.
- To incorporate a gamified look and feel that would lead to better user interaction with the platform.
- To use the concept of gamification to keep users interested in the platform for a longer time.
Our Goal
- To decrease workload on manually creating quiz, generating report based on performance of both the user and the quiz itself because of which the platform is based on AI/ML technology which will easily create an assessment, generate reports and analytics for the admin.
- To minimize human effort and build a easiy to use and accessible platform.
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
- Admin
- Participant
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
- Learn new technologies and keep updated with the latest trends
- Build software applications which helps all the targeted users
- Travel and explore most of the countries
pain points
- Does not want to take courses and quiz based on that
- Wants to take a quiz along with his peers and compare result which would make taking an assessment fun
- Feels demotivated after taking a quiz which shows only score and detailed results with correct incorrect answers
needs
- Wants to test his knowledge and improve by time
- Wants to self-assess his learnings and analyse his self development and other qualities
- Wants an intuitive and interactive platform
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.
- Wireframes are used to layout content and functionality on a page which takes into account user needs and journeys.
- Information architecture (IA) focuses on organizing, structuring and labelling content in an effective and sustainable way. The goal is to find information and complete tasks.
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.
Aa
Proxima Nova
Aa
Regular
Aa
Semibold
Aa
Bold
Aa
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
