top of page

ClassKlap

Notification System Design: Boosting Online Exam Attendance Rate

Overview

Roles: Design Research, UX Design, UI Design, Illustration | Tools: Figma, Adobe Illustrator | Team Size: 4

During the pandemic, in response to high user demand, the online exam feature was introduced on two ClassKlap apps — the student mobile app and the school web app.

Challenge

Shortly after the release of the online exam feature, schools reported that many students were missing their exams.

 

This posed a significant challenge during academic evaluation, especially for Indian schools, where there are typically 6-7 internal assessments in an academic year. 

Solution

We designed an intervention at two points to boost the attendance:

​

  • Giving school administrators the control and flexibility to reschedule exams multiple times using the school web app to accommodate students who miss their scheduled exams due to various reasons.
     

  • Providing clear and timely notifications to students on the student app about exam schedules, including dates, times, and any specific instructions or requirements to take exams online.

For an exam, the "Conduct Exam For All" button  on the school web app was modified to allow school administrators to reschedule exams without any limitations or time constraints. 

Designed a notification system on the student app to keep students informed about exam schedules.

Impact

Schools reported a significant increase in the online exam attendance rate after the introduction of notifications on the student mobile app.

Approach

01
User Research

  • Feedback collection

  • Data analysis

  • Personas

We employed a qualitative (feedback collection from users) and quantitative (data analysis of the online exam feature) approach to understand the pain points of our users and synthesised insights about the current online exam feature design. 

01

Lack of Inclusivity:
Existing feature was not designed for extreme users (students from low income families with limited access to devices and/or the internet).

02

Delayed Information:
There was a lack of timely and clear  communication with students about exam schedules (e.g., users were not instantly notified when exams were scheduled).

User pain points, their implications wrt to online exams, and design solution

PAIN-POINTS

HOW DOES IT AFFECT STUDENTS AND THEIR EXAMS?

SOLUTION

Limited access to internet

02

Low-income families own only one device which is shared between family members

01

Conflicting schedules

Delay in receiving critical exam related information

Allow school
administrators to reschedule an exam multiple times to accommodate the needs of the students.

Pandemic-induced situation (emergencies and illnesses)

03

Increase in number
of students missing scheduled exams

Design a clear and timely communication method on the student app to keep students informed.

Missing out on a mandatory step to verify account after
downloading app

04

Unable to log in on exam day causing panic and frustration

02
Constraints

When education shifted online, new requests and demands poured in everyday and the biggest constraints we faced were lack of time and resources.

 

We focused on developing a notification system on the ClassKlap Learning App to keep students informed and tweak the exam scheduling process on the ClassKlap School App to allow school administrators to reschedule exams. 

03
Modifying Button Behaviour

For an exam, the "Conduct Exam For All" button on the Assessment page of the ClassKlap School App was initially designed to be disabled or inactive after scheduling the exam.

 

The behaviour was modified so that the button remains enabled/active, allowing school administrators to reschedule exams without any limitations or time constraints. 

"Conduct Exam For All" button on ClassKlap School App

03
Notification
Framework
  • High-level user action map

We created a notification framework based on the inter-app dependencies and triggers in collaboration with the Technology team to ensure the functionality and scalability of the framework in the future.

High-level user action map to understand inter-app dependencies and triggers

To create a system for our extreme users (students from low income families with limited access to devices and/or the internet), three scenarios were considered — when students 1) have no internet connection, 2) are not active on the ClassKlap LearningApp, and 3) are using the app — to create the notification framework design principles.

01

The notification copywriting should reduce cognitive load and have a clear action prompt.

02

Notification type should reflect importance of conveyed information.

03

All notifications and reminders should always be accessible to students on the ClassKlap Learning App.

04

Increase content and design personalization by addressing student in second person and using illustrations and GIFs.

Notification system framework built with extreme users in mind

04

Design Iterations

  • Market standards 
  • Existing notifications analysis

​I owned the design and prototype process and collaborated with the Technology team during this iterative phase to understand the technical constraints of development. 

 

Majority of our users were Android users. To lay the foundation for the design phase, I analyzed existing app notifications in line with iOS and Android's standard notification design guidelines, as well as the notification designs of popular Indian apps like Paytm and Byju's.

 

I presented the common practices identified to the team members, which helped us make decisions about moving forward with designs that fit the Indian market mental model.

Evolution of the push notification design 

2

3

1

4

  1. Large app icon for brand identity

  2. Addressing student by name in title to increase content personalisation

  3. Custom illustration to increase design personalisation

  4. Concise information and clear action prompt to reduce cognitive load

Iterations of Notification Centre button placement on the ClassKlap Learning App

I chose to place the Notification button on the bottom navigation bar of the home screen to increase visibility of the feature.

 

For multiple profiles (more than one child in different grades), the number in the red badge of the notification button reflects a sum of the unread notifications for all individual profiles.  

Design evolution of the the Notification Centre on the ClassKlap Learning App

Flat icons to reflect the content of the notification 

GIF for design consistency with other existing  app screens

Concise information and clear action prompt to reduce cognitive load

Design

High-level action flow of the online exam set up on ClassKlap School App and notification on ClassKlap Learning App

SMS

Push

In-app

Notification Centre

Online Exam

The Notification Centre makes all notifications accessible to students

The Online Exam page has clear instructions on how to verify an account before exams

1. School Administrator schedules exam on ClassKlap School App

2. Scheduling an exam on ClassKlap School App triggers notifications on ClassKlap Learning App

3. Clicking on notification directs students to respective pages

Takeaways

Systems Thinking

I navigated complex project integrating exam system, apps, and user needs and developed a holistic problem-solving approach, recognizing interconnectedness of components in product ecosystems.

User-Centered Design

I evolved from obsessing over creating novel designs to prioritizing user needs and mental models. This led to the implementation of critical self-assessment in my design process (Now I always ask myself, "What problem am I really solving?"), consistently evaluating solutions against core user problems.

bottom of page