Product UX | Applied case study
STUDJEE :
Rebuilding the Student Learning Experience
Overview
Project Summary:
Studjee was a web-based learning platform used by students for practice tests, peer discussions, and academic guidance. While the platform supported multiple learning activities, the test-taking experience was the most important and frequently used workflow.
The redesign focused on restructuring the test interface, refining navigation, introducing a responsive approach aligned with student usage patterns, and improving performance visibility. The goal was to reshape the platform’s core learning experience around how students actually studied and practised.
Project Type: Applied Product Redesign
My Role: UX Designer
Domain: Ed-Tech
Duration: 2 years
Product Stage: Existing Platform (In-use during redesign)
Primary Focus: Test-Taking Workflow & Performance Visibility
Tools used: Figma, Adobe XD (early stage), Adobe Illustrator, Jira
Team: Developers, Coaching staff
PROBLEM
The Test Interface Created Unnecessary Friction During Test-Taking
The test section was the most frequently used part of the platform, yet the interface did not fully support how students attempted tests in practice. Students had to spend more time and effort navigating the interface rather than focusing on the questions.
Before redesigning the experience, it was important to understand how students interacted with the test environment and where the interface was getting in the way.
RESEARCH
Understanding Student Test-Taking Behaviour
To better understand where the interface was creating friction, I conducted interviews with students and observed how they interacted with the platform while taking tests. The goal was to understand how students navigated questions, managed time during tests, and which features they relied on while attempting questions.
In addition to student research, I also conducted an internal review workshop where team members attempted tests on the platform and documented usability issues they encountered. This helped surface interface problems that were not immediately visible during regular use.
RESEARCH APPROACH
Student Interviews
Spoke with students to understand how they typically approached tests, what challenges they faced on the platform, and which parts of the experience felt confusing or difficult, what features they used often while giving tests.
Observation Sessions
Observed students while they attempted tests to see how they navigated between questions, tracked time, and interacted with the interface during timed sessions.
Internal Product Review Workshop
Conducted a workshop where team members attempted tests on the platform and documented usability issues they experienced.
KEY FINDINGS
Most students relied on mobile devices
Students primarily used their phones to take tests, but the platform was originally designed for desktop and was not responsive. This caused several usability problems:
Buttons and interactions were partially inaccessible. The floating home button (X) overlapped the “Start” button, making it hard to start a test.
Drag-and-drop questions were difficult or impossible because scrolling interfered with dragging answers.
Some buttons and interface elements were cut off or misaligned on smaller screens, preventing access to functionality.
Important controls were difficult to discover or interpret
Several controls that are essential for efficient test-taking were not immediately visible or understandable:
Features like the timer, bookmarking, and question navigation were often overlooked.
Certain labels, such as “End Test” and “Save and Exit”, were confusing, leaving students unsure how to submit or pause a test.
Navigation between questions was inefficient
Questions were presented in a long scrolling format, making it harder for students to quickly move between questions during a test. The question loading time with a quick scroll was also an issue.
Test scores were unavailable
Instead of showing the test score right after submitting the test, students had to go back and find the test to check the test result.
DESIGN APPROACH
What Changed in the Test Taking Experience
The redesign focused on improving how students start, navigate, and complete tests. The following changes simplified the test flow and made key actions easier to access during a test :
Mobile-Friendly Layout
The interface was redesigned to work reliably on smaller screens so students could attempt tests comfortably on mobile devices.
Page-by-Page Question Navigation
Questions were redesigned to appear one at a time, allowing students to focus on a single question and move through them without page-loading delays or added friction.
Visible Timer and Test Controls
The timer and key actions such as bookmarking, reporting and navigating through questions were made visible and easily accessible throughout the test.
Clearer Submission Actions
Confusing interactions and wording were removed, with a clear “Submit Test” CTA to keep submission simple and easy. The pause function was also removed, as it was rarely used. If a test was interrupted due to network or browser issues, students could simply continue or reattempt it.
Improved Interaction for Matching Questions
Some question types relied on drag-and-drop interactions that were difficult on mobile, especially when scrolling interfered with dragging. Matching questions were redesigned so students could rearrange answers directly within the table instead.
Performance Summary
A structured results view was introduced to help students review their performance after completing a test. A dashboard was also created to track performance over time.
To Summarize How the Test-Taking Workflow Evolved
Together, these changes reshaped the student test-taking experience. The diagram below summarizes how the workflow evolved ( Red = friction, Green = improvement ✅ )
INTERFACE AND VISUAL DESIGN
Designing a Clear and Mobile-Friendly Test Interface
The interface was redesigned to support mobile usage and improve clarity during tests. A lightweight design system was introduced to bring consistency across screens and make key actions easier to identify and use.
Core Interface Screens
Home / Dashboard
Centralized overview with quick access to tests, performance, and other learning features.
Test Interface (Page-by-Page)
One-question-per-page layout to support focus and simplify navigation during tests.
Match-the-column Interaction
Reworked matching questions to allow in-place selection, removing the need for drag-and-drop on mobile.
Test Controls
Timer, reporting and bookmarking remain visible and accessible throughout the test.
Question Navigator
Quick access to all questions with visibility into attempted, unanswered, bookmarked, and reported items.
Performance Dashboard
Structured view of results to help students track performance across tests and subjects.
Prototype
Interactive prototype showing navigation, key interactions, and test completion flow.
(check the video)
Beyond the brief
Taking it further with AI…
Studjee was discontinued before it reached users. The test taking workflow, the core of what this case study covers , was too well thought through to leave in a Figma file!
When I discovered Google Antigravity, I used my original designs as a blueprint and prompt engineered those into a working interactive experience. Take it for a spin.!! (play the video)