Project Overview
HighScope Educational Research Foundation, a leader in early childhood education, was transitioning from a third-party LMS to a custom-built in-house platform.
However, initial usability tests revealed critical navigation challenges, workflow inefficiencies, and an unfriendly gradebook interface — leading to confusion, increased task time, and frustration among administrators, facilitators, and students.
My Role
As a UX Consultant working remotely, I conducted expert usability testing, streamlined complex workflows, and refined screen layouts.
Key Outcomes: Improved Navigation, Role-Specific Workflows, Optimised Gradebook Design
Physical Deliverables: Information Architectures & 40+ Mid-fidelity Wireframes
Deliverables
Note: I delivered mid-fidelity wireframes for this project because an existing design system was already in place, and the issues existed primarily in layouts and navigation, not high-fidelity designs. Thus, utilising mid-fidelity wireframes for development saved time and resources.
Key Usability Issues
Through expert usability testing and in-person user feedback from stakeholders, I identified three key issues affecting LMS usability.
Complex Navigation & Workflows
Users struggled to find key actions, leading to confusion and errors.
📌 Impact: Inefficient workflows increased task completion time and user frustration.
Unclear & Incomplete Feature Distribution Between User Roles
Some users lacked access to essential features, causing confusion and inefficiencies.
📌 Impact: Role-based restrictions disrupted workflows, leading to workarounds and frustration.
Frustrating Gradebook Layout
The gradebook was too cluttered, making it difficult to scan, fill, and compare data.
📌 Impact: Users got frustrated while navigating and endless scrolling, affecting task-completion speed.
Streamlining Complex Navigations & Workflows
The incomplete flow of information and limited details in the existing information architecture led to redundancy (e.g., multiple threads for the same discussion post) and additional clicks (e.g., multiple clicks in the quizzes).
Overhauling of the Information Architecture, Iteratively Adding & Refining Details
Impact After Overhaul
✅ Reduced redundancy by improving clarity in information flow.
✅ Decreased the number of clicks by refining the architecture.
✅ Facilitated efficient development by distinguishing mutually exclusive & connected modules inside the LMS.
🎯 During the overhaul, we also identified and fixed the role-based feature distribution, solving permission inconsistencies in all 3 user roles (Admin, Facilitator, and Student) for a seamless experience.
Note: Similar workflows were also created for Facilitator & Student roles for completeness.
Improvements in Action (Example: Quizzes)
❌ 3 clicks to select an answer.
❌ Cannot modify answer after clicking Select Answer.
❌ Extra time to complete the task.
✅ Just 1 click to select an answer.
✅ Modify answers as many times until you click on Submit Test.
✅ Quick and Effective task completion.
Redesigning an Efficient Gradebook Experience
Original Design: Endless Bi-directional Scrolling
Facilitators and admins had to scroll both horizontally and vertically to fill in and compare grades across students and gradebook items. This led to increased task completion time and user frustration.
❌ Bidirectional scrolling is time-consuming and inconvenient for users.
❌ Filters allow only a single selection, resulting in additional effort to fill and compare grades.
Revamped Design: Simplified Layout & Reduced Scrolling Requirements
I distributed the Gradebook in 3 different modes:
Student - See all gradebook items and grades for a student.
Category - See all students, gradebook items, and grades in a specific gradebook category (e.g., file upload assessments, quizzes, etc.)
Item - See all students and grades for a specific gradebook item.
✅ Reduced scrolling to a single direction for easier navigation.
✅ Enabled 3 flexible viewing modes for efficient access to gradebook data.
✅ Improved filters with multi-selection options for better usability.
❌ Technical Constraint: The redesigned gradebook requires extended development time, exceeding project timelines.
Balancing Usability with Feasibility
To balance usability improvements with feasibility, I collaborated closely with stakeholders and developers, iterating until we reached an optimised design that met both user needs and technical constraints.
✅ Fixed student names to limit horizontal scrolling.
✅ Added category headers for better clarity.
✅ Enhanced filters with multi-selection capability.
✅ Optimized design to improve usability while reducing development time.
Final Outcomes & Key Learnings
✅ Reduced total no. of clicks by 15-20% across the WebApp.
✅ Decreased scrolling effort in the Gradebook by 10-12%.
✅ Improved navigation clarity and differentiated between role-based features & permissions.
Personal Learnings
Balancing user needs with business and technical constraints taught me how to align usability with feasibility.
Navigating stakeholder disagreements while streamlining complex workflows pushed me to think more strategically.
Next Steps
User Validation
Conduct another user study to assess and validate the web app’s usability.
Design Iterations
Refine designs based on user and stakeholder feedback to enhance the experience.
Additional Features
Plan and design upcoming LMS features, such as an Admin View for User Profiles.
Thank You
All images and screenshots are used for illustrative purposes only. Copyrights belong to their respective owners.
Other Relevant Work
-
![]()
Redefining HighScope's Curriculum Design
Design Systems · WebApp Design · Wireframes · EdTech
-
![]()
Crafting Iosta Design Studio's Digital Identity
Responsive Web Design · Sitemaps · Web Development
-
![]()
Reinventing Clothes Trading Digitally
Mobile App Design · Interactive Prototyping · Usability Testing
-
![]()
EmoRe: An Empathetically Responsive Voice Assistant
User Research · Conversation Design · Interviews · Observations
