Graspa Web LMS: UI/UX Case Study for EdTech

Moyo Weke

Project Overview

Graspa is a cloud-based Learning Management System (LMS) redesigned to address low student engagement and usability issues in online learning. Through extensive user interviews, research, and iterative testing, the Graspa team aimed to create an intuitive, accessible platform that fosters better student-facilitator interaction and encourages consistent use.

The Challenge

Limited Engagement: Students spent minimal time on existing LMS platforms.
Usability Gaps: Navigational hurdles, cluttered interfaces, and confusing layouts often deterred learning.
Accessibility Concerns: Poor offline capabilities and lack of accommodations (e.g., text-to-speech, translation) prevented full inclusivity.

Research & Key Insights

The team interviewed both students and facilitators to understand how they use LMS tools. They discovered that users value:
Simple, Organized Navigation – Clear menus and breadcrumb trails to reduce click confusion.
Interactive Features – Real-time chats, group forums, and quick feedback loops with instructors.
Better Accessibility – Offline access, assistive technology (text-to-speech, content translation), and easy password resets.
Robust Notifications – Automated reminders for upcoming deadlines and new materials.
Engaging Visuals – A clean layout, well-structured modules, and a responsive design that works seamlessly on mobile and desktop.

Proposed Features

Adaptive Layout: Dynamically adjusts to various screen sizes and devices.
Accessible Content: Downloadable learning resources, offline viewing, and text-to-speech for extended reach.
Robust Communication: Real-time messaging, group chats, and integrated discussion forums.
Effective Notifications: Automated calendar reminders and announcements to keep learners on track.
Simplified Navigation: Streamlined the menu structure and implemented clear signposting to guide users through the platform.
Personalized Dashboard: Designed a customizable dashboard that allows students to track their progress, access relevant resources, and communicate with instructors and peers.
Interactive Learning Modules: Incorporated multimedia elements, quizzes, and interactive activities to make learning more engaging.
Gamification: Introduced badges, leaderboards, and progress bars to motivate students and make learning more fun.
Accessibility Features: Implemented features such as text-to-speech, adjustable font sizes, and high-contrast color schemes to ensure the platform is accessible to all users.
Enhanced User Support: In-app guidance, user communities, and personalized recommendations.

Links

Design Process

User Research: Conducted interviews, surveys, and usability testing with students to understand their pain points, needs, and preferences.
Competitive Analysis: Evaluated competitor LMS platforms to identify best practices and areas for improvement.
User Personas & Journey Maps: Created detailed profiles to represent typical student and facilitator needs, guiding feature prioritization.
Information Architecture: Developed a clear and logical structure for organizing content and features within the LMS.
Wireframing & Prototyping: Developed Figma prototypes with improved course structures, clear dashboards, and integrated calendar tools for deadlines.
Usability Testing: Conducted remote tests (five-second tests, first-click studies, surveys) to validate layouts and features. Participants consistently noted better navigation and clarity in the new design.

Stack

Figma – For wireframing, prototyping, and high-fidelity UI design.
Google Forms – For survey distribution and gathering user feedback.
Google Docs – For research documentation, interview transcriptions, and collaborative notes.
Google Sheets – For organizing and analyzing survey responses and usability test data.
UsabilityHub – For running five-second testsfirst-click tests, and other usability testing methodologies.
Lucidchart – For creating user flow diagrams, system architecture, and wireframes to map out the LMS experience.
Miro – For brainstorming, affinity mapping, and visualizing user journey maps, empathy maps, and collaborative design discussions.
Google Slides – For presenting user journey maps, research findings, and design recommendations.

Outcome & Impact

The redesigned Graspa LMS prioritizes user-friendly navigation, collaborative tools, and essential accessibility features. Through iterative testing, the platform addresses the core pain points identified in the research reducing confusion, boosting engagement, and offering a supportive digital environment for both learners and facilitators.
Ultimately, Graspa stands to improve online learning experiences by ensuring students can easily access materials, manage deadlines, and interact with peers and instructors in a more efficient, enjoyable way.

SnapShots

Like this project

Posted Jul 23, 2024

Graspa is a cloud-based Learning Management System (LMS) redesigned to address low student engagement and usability issues in online learning.

Sunbeam Social: Interactive Social Analytics Frontend Dashboard
Sunbeam Social: Interactive Social Analytics Frontend Dashboard
No-Code Website Creation for a Digital Marketing Specialist
No-Code Website Creation for a Digital Marketing Specialist
Skilled eLearning: Conversion-Optimized Landing Page
Skilled eLearning: Conversion-Optimized Landing Page
Research Report Presentation Deck Design on AI Insights.
Research Report Presentation Deck Design on AI Insights.

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc