top of page

ClassKlap

Redesigning Workflow: Enhancing Usability of Assessment Module on School Web App

Overview

Roles: UX Research, Design Lead | Tools: Figma | Team Size: 2

The Assessment module on ClassKlap School App, an Enterprise Resource Planning (ERP) web app solution, makes the process of planning, scheduling, and coordinating exams easier for school administrators. 

Challenge

Reviewing the module usage pattern after the first academic year during the pandemic highlighted a concerning trend. Throughout the year, there was a decline in the usage of the Assessment module to conduct online exams, and by the end of the year, only a few schools were actively using it.

In-depth user interviews brought to light critical usability issues and the lack of visual guidance to navigate through the Assessment module which prompted schools to explore alternative solutions.

Previous design

Group 367.png

Solution

We redesigned the workflow of the Assessment module and the web app's navigation to make it more intuitive and user-friendly.

​

An example of enhanced usability in the redesigned module is increased visibility of the module features (Exam SetUp, Exam Timetable/Schedule, Marks Entry/Update Scores, and Scoreboard) with the addition of secondary navigation (side menu) and improved experience of the module by providing a dashboard view for all critical steps in the workflow.

Redesigned Assessment module

Group 324.png

Impact

The intuitive UI and workflow for the Assessment module facilitated easy adoption of the service and the redesigned web app.

APPROACH

Approach

User Research
01

User Research

  • Activity log analysis
  • Usability testing
  • User interviews
  • Focus groups
  • Personas

As the lead for the user research, my responsibilities included choosing the type of research method, creating a script, choosing the user groups, conducting the interviews online, and data analysis and synthesis.

​

Our research mainly focused on qualitative and attitudinal methods:

  • Usability testing to assess how users interact with the Assessment module.

  • In-depth interviews with a semi-structured script to understand user mindset.

  • Focus groups with the Training Specialists Team to understand the training process.

UX Research Methods

Our analysis of the module usage helped identify 11 schools with low usage. In addition to the administrators of these schools, we also interviewed the ClassKlap Training Specialists Team, a team of 10 members, who provide instruction and support to administrators.

 

This led to the discovery of a new user persona, one who is not tech savvy and hesitant to explore even after the training session, and user pain points. 

01

Unintuitive workflow led to increased cognitive load and potential disruptions when distractions occur.

02

Limitations to administrators' ability to customize the module according to their specific needs.

03

Lack of clear signifiers to guide users to follow the desired workflow of the module.

User persona discovered 

Preeti S | Age: 54 | Role: School Administrator​

Preeti is a school administrator responsible for planning examinations at her school. She is not very tech-savvy and finds the online education landscape challenging to navigate. 

Pain Points & Challenges:

  1. Hesitant to explore new features due to a fear of clicking something wrong. This cautious approach limits her ability to fully utilize the available tools.

  2. Struggles to resolve issues that arise in the workflow without the assistance of a Training Specialist. This dependency on external support creates delays and inefficiencies in the exam planning process.

  3. Assessment module does not allow her to set up exams for a specific grade only, a feature she needs for efficient exam planning.

02
Gap Identification
  • Competitor analysis
  • Sitemap analysis

Competitor analysis of school ERP systems found that clear hierarchical navigation designs, including utility navigation bars and breadcrumbs, were used to improve content structure and wayfinding in web apps. These elements enhance user navigation efficiency and provide a visual trail for users to track their location within the app.

​

I presented these findings to the Product Team and emphasized the need to change the navigation design of the web app to address the lack of wayfinding elements and content structure clarity within the Assessment module. This challenge was particularly significant for non-tech-savvy administrators, limiting their capacity to navigate and leverage the module's features effectively.

An example of Gibbon's clear navigation system design. We also analysed other competitors such as Fedena, Rosario, and Open SIS.

Primary navigation

Breadcrumb navigation for wayfinding

Quick search

Utility navigation

Secondary navigation making features of the page visible to users 

03
Design Iterations
  • Wireframes
  • Prototypes

The design principles for the redesigned workflow of the Assessment module and the navigation of the web app focused on improving product flexibility and visibility of features and workflow. ​

01

Optimize workflow to minimize cognitive load and make resuming task easier amid distractions. 

02

Provide flexibility to allow users to customize aspects of the product to suit their preferences and workflow.

03

Use visual indicators to guide users through desired flow of the module.

04

Include status information of critical steps in the workflow to keep users informed .

Translating insights and design principles to wireframe

Design Evolution of the Exam Marks Entry (One of the Steps in the Online Exam Process)

APPROACH

Design

1. Improved visibility

  • Dashboard view increases system visibility of the Assessment module.

  • Secondary navigation (sidebar) increases visibility of features (Exam SetUp, Exam Timetable/Schedule, Marks Entry/Update Scores, and Scoreboard).

Before

After

2. Enhanced workflow experience

  • Breadcrumb navigation provides a visual trail for users to track their location within the web app

  • Placing features in a numbered order in the side menu prompts users to move in desired workflow.

  • Separating the features (Exam Set Up and Exam Timetable) and a clean UI enhances workflow clarity.

  • The redesigned Exam Set Up feature provides flexibility such as scheduling an exam for one grade (e.g., grade 1/class 1) instead of an entire group (e.g, elementary school/ primary group). 

Before

After

3. Matching expectations

  • Designing the data table used to grade students in the Marks Entry feature to resemble an Excel form, a tool that users are familiar with, increases usability of the feature.

Before

After

APPROACH

Takeaways

Collaboration

I leveraged user research and stakeholder input to make complex design decisions, developing a data-informed approach that became a core component in my product development process. This led to more effective solutions that aligned with both user needs and business goals.

bottom of page