LMS Redesign: Tackling Clutter and Boosting Student Success Rate by 38%
LMS Redesign: Tackling Clutter and Boosting Student Success Rate by 38%
LMS Redesign: Tackling Clutter and Boosting Student Success Rate by 38%
O V E R V I E W
O V E R V I E W
Canvas LMS : Redesign
While Canvas LMS is essential for digital education, many students face navigation and task completion challenges, underscoring the need for a redesign to improve usability and efficiency.
Canvas LMS : Redesign
While Canvas LMS is essential for digital education, many students face navigation and task completion challenges, underscoring the need for a redesign to improve usability and efficiency.
O B J E C T I V E
O B J E C T I V E
How can we redesign the Canvas LMS to improve navigation and task completion, thereby reducing errors and increasing user satisfaction?
How can we redesign the Canvas LMS to improve navigation and task completion, thereby reducing errors and increasing user satisfaction?
C O L L A B O R A T I O N
C O L L A B O R A T I O N
Collaborated with over 30 users, including 15+ students, for research.
Collaborated with over 30 users, including 15+ students, for research.
M Y R O L E
M Y R O L E
Product Designer
Competitive Analysis, User Interviews, Online Surveys, Qualitative & Quantitative Data Analysis, Product Strategy and Architecture, Wireframing, Hi-fi Prototyping, Testing, Feedback and Iterations.
Product Designer
Competitive Analysis, User Interviews, Online Surveys, Qualitative & Quantitative Data Analysis, Product Strategy and Architecture, Wireframing, Hi-fi Prototyping, Testing, Feedback and Iterations.
P R O J E C T T Y P E
P R O J E C T T Y P E
UX Digital design project under the supervision of Prof. Amy King.
UX Digital design project under the supervision of Prof. Amy King.
UX Digital design project under the supervision of Prof. Amy King.
T O O L S
T O O L S
Adobe Illustrator, Photoshop, Figma, Flourish, Miro, MS Excel, Procreate.
Adobe Illustrator, Photoshop, Figma, Flourish, Miro, MS Excel, Procreate.
P R O B L E M O V E R V I E W
P R O B L E M O V E R V I E W
Understanding the struggles first.
Understanding the struggles first.
Understanding the struggles first.
Inefficient Visual Structure
Users navigate through a cluttered interface with poor visual hierarchy, hindering their experience.
Inefficient Visual Structure
Navigation Challenges
Users encounter confusing navigation in course sections, leading to misclicks and inefficiencies.
Navigation Challenges
Accessibility Issue
Users find inaccessible features that hinder
effective engagement in daily activities.
Accessibility Issue
Accessibility Issue
Users find inaccessible features that hinder effective engagement in daily activities.
Inefficient Shortcuts
Users struggle with ineffective shortcuts
due to poor naming, size, and placement.
Inefficient Shortcuts
User Retention Issues
Users frequently switch to alternative platforms
for various tasks, disrupting overall efficiency.
User Retention Issues
User Retention Issues
Users frequently switch to alternative platforms for various tasks, disrupting overall efficiency.
P R O C E S S
P R O C E S S
A user-centered approach.
A user-centered approach.
A user-centered approach.
Our redesign process began with comprehensive research on primary users—Students, Professors, and Administration Staff. After gathering user insights, we selected one focus group. We analyzed findings, ideated solutions, designed prototypes, with multiple testing cycles before presenting our work.
Our redesign process began with comprehensive research on primary users—Students, Professors, and Administration Staff. After gathering user insights, we selected one focus group. We analyzed findings, ideated solutions, designed prototypes, with multiple testing cycles before presenting our work.
Primary Research
Analyze
Ideate & Design
Testing-Iteration-Testing-Iteration-Testing
Present
U X R
U X R
We began by understanding
the problem through research.
We began by understanding
the problem through research.
A five-stage process transformed data into actionable
insights for students, professors or administrative staff.
A five-stage process transformed data into actionable insights for students, professors or administrative staff.
A five-stage process transformed data into actionable
insights for students, professors or administrative staff.
- ONLINE SURVEYS: The questionnaire included 10 high-level survey questions, yielding 25 onlineresponses, with 18 respondents expressing interest in participating further.
- INTERVIEW SESSIONS
- How has Canvas aided users throughout their usage journey?
- What are the current version's shortcomings as perceived by users?
- What features would users desire in the new version of Canvas?
- OBSERVATIONAL TASKS
- How do users typically navigate through Canvas, including their daily path and the areas they click most frequently?
- How well does Canvas adhere to the 10 heuristics of UX design?
- How straightforward is the process of performing an individual task on Canvas?
- Khan Academy: Intuitive content delivery.
- Google Classroom: Seamless Google services integration.
- Moodle: Extensive customization options.
- Opportunities for Canvas:
- Improve navigation and user flow.
- Enhance customization options.
- Simplify workflows for increased efficiency.
HEURISTIC EVALUATION
Nielsen's Heuristic Evaluation identified key issues: information overload, excessive jargon, missing 'Back' buttons, inconsistent layouts, screen real estate problems, and unclear tab functions. These insights informed our design improvements.
P R O J E C T S C O P E
P R O J E C T S C O P E
As the research progressed, we had to
decide who our design should serve.
As the research progressed, we had to decide who our design should serve.
As the research progressed, we had to decide who our design should serve.
Students, Professors or Administrative Staff?
Students, Professors or Administrative Staff?
Students, Professors or Administrative Staff?
We chose Students as their interaction is task and time-sensitive. While the
platform offers many features, its cluttered interface hinders their efficiency,
making them the most affected by usability issues.
We chose Students as their interaction is task and time sensitive. While the platform offers many features, its cluttered interface hinders their efficiency, making them the most affected by usability issues.
U S E R A N A L Y S I S
U S E R A N A L Y S I S
Next, we brought our users to life:
Creating personas based on real data.
Next, we brought our users to life:
Creating personas based on real data.
Next, we brought our users to life:
Creating personas based on real data.
We developed two student personas to accurately capture their attributes, identifying critical themes in the user experience.
We had to know more:
What do students really think about Canvas?
We had to know more:
What do students really think about Canvas?
The carefully crafted persona and its iterative development process enabled us to uncover key themes and insights central to the student user experience.
The carefully crafted persona and its iterative development process enabled us to uncover key themes and insights central to the student user experience.
U S A B I L I T Y M E T R I C S
U S A B I L I T Y M E T R I C S
To gain a deeper understanding, we
observed real students using Canvas.
To gain a deeper understanding, we observed real students using Canvas.
To gain a deeper understanding, we observed real students using Canvas.
We conducted 10 observational tasks with 16 students to evaluate their interactions with the LMS interface, capturing key usability metrics like Duration, Click Count, Success Rate, and Satisfaction Scores (SEQ and SUS). User performances were measured with KPIs, including Success Rate, Time on Task, and CSAT, providing a comprehensive view of user flow, pain points, and overall experience.
Get High-Res Usability Metrics & KPIs here.
We conducted 10 observational tasks with 16 students to evaluate their interactions with the LMS interface, capturing key usability metrics like Duration, Click Count, Success Rate, and Satisfaction Scores (SEQ and SUS). User performances were measured with KPIs, including Success Rate, Time on Task, and CSAT, providing a comprehensive view of user flow, pain points, and overall experience.
Get High-Res Usability Metrics & KPIs here.
The real aha moment: Key insights that
shaped our understanding of user challenges.
Our insights highlight the need for strong user support from the beginning. Improving interface organization and navigation boosts usability, while clear feature access increases engagement and retention.
W I R E F R A M E S
Low-Fidelity
Mid-Fidelity
Further development improved the course landing page and streamlined the messaging system, introducing shortcuts to reduce task time and clicks.
Hi-Fidelity
Low-Fidelity
Mid-Fidelity
Further development improved the course landing page and streamlined the messaging system, introducing shortcuts to reduce task time and clicks.
Hi-Fidelity
I S T H E R E D E S I G N E A S Y T O U S E ?
To make sure our ideas worked, we
ran usability tests with real students.
To make sure our ideas worked, we ran usability tests with real students.
The usability of the new designs was tested in an unmoderated setting with 12 participants. The results are summarized below.
What were the issues?
A list of most frequent and most severe usability issues that the testers faced.
A list of most frequent and most severe usability issues that the testers faced.
10/12 found the Dashboard cluttered with too many widgets.
12/12 were confused by different colors for subjects in the calendar.
10/12 were confused about finding and messaging people.
U S A B I L I T Y C H A N G E S
U S A B I L I T Y C H A N G E S
We then refined the design
based on feedback and testing.
We then refined the design
based on feedback and testing.
Challenge 1
Cluttered UI Lacks Visual Hierarchy and Color Contrast.
Challenge 1
Cluttered UI Lacks Visual
Hierarchy and Color Contrast.
We enhanced visual hierarchy
for clearer navigation.
The redesign employs a vibrant color palette and clear section delineation for visual hierarchy, customizable widgets for task prioritization, and intuitive navigation elements, enhancing usability and accessibility while aligning with heuristic principles.
We enhanced visual hierarchy for clearer navigation.
The redesign employs a vibrant color palette and clear section delineation for visual hierarchy, customizable widgets for task prioritization, and intuitive navigation elements, enhancing usability and accessibility while aligning with heuristic principles.
We enhanced visual hierarchy
for clearer navigation.
The redesign employs a vibrant color palette and clear section delineation for visual hierarchy, customizable widgets for task prioritization, and intuitive navigation elements, enhancing usability and accessibility while aligning with heuristic principles.
We improved the dashboard with customizable widgets.
Allows users to personalize their dashboard by integrating customizable widgets
for quick access to essential information.
We improved the dashboard with customizable widgets.
Allows users to personalize their dashboard by integrating customizable widgets for quick access to essential information.
We improved the dashboard with
customizable widgets.
Allows users to personalize their dashboard by integrating customizable widgets for quick access to essential information.
We designed dashboard variants for customization.
A dashboard with 6 course tiles, typical for graduate and undergraduate students.
A dashboard with 3 course tiles, commonly used by graduate students.
Challenge 2
Cluttered and confusing navigation hinder course section.
Challenge 2
Cluttered and confusing navigation
hinder course section.
We optimized course navigation for improved efficiency.
The redesign optimized course navigation by consolidating tabs into a list layout, enhancing accessibility and reducing navigation time through clear labels, visual hierarchy, and intuitive design, while feedback mechanisms keep users informed and minimize misclicks.
We optimized course navigation
for improved efficiency.
The redesign optimized course navigation by consolidating tabs into a list layout, enhancing accessibility and reducing navigation time through clear labels, visual hierarchy, and intuitive design, while feedback mechanisms keep users informed and minimize misclicks.
We optimized course navigation
for improved efficiency.
The redesign optimized course navigation by consolidating tabs into a list layout, enhancing accessibility and reducing navigation time through clear labels, visual hierarchy, and intuitive design, while feedback mechanisms keep users informed and minimize misclicks.
Challenge 3
Features are not easily accessible for users.
Challenge 3
Features are not easily accessible for users.
We enhanced feature accessibility.
We enhanced feature accessibility.
We enhanced feature accessibility.
The redesign enhances accessibility with a personalized reminders shortcut and a "+" icon for quick To-Do additions, boosting visibility and engagement.
The redesign enhances accessibility with a personalized reminders shortcut and a "+" icon for quick To-Do additions, boosting visibility and engagement.
Challenge 4
Ineffective shortcuts due to poor design choices.
Challenge 4
Ineffective shortcuts due to poor design.
We optimized shortcut usability.
We optimized shortcut usability.
We improved shortcut effectiveness with clearer naming, larger buttons, and strategic repositioning based on user task flows.
We improved shortcut effectiveness with clearer naming, larger buttons, and strategic repositioning based on user task flows.
The shortcut icon for quick submission, bypassing the lengthy conventional process.
The shortcut icon for quick submission,
bypassing the lengthy conventional process.
Challenge 5
Usability issues force users to switch platforms.
Challenge 5
Usability issues force users to switch platforms.
We improved usability to boost retention.
The redesign improves usability by effectively integrating messaging and collaboration tools, enabling seamless peer interactions and access to course histories, which fosters a supportive learning community and drives higher user satisfaction and retention on the platform.
Increasing retention
through better usability.
The redesign improves usability by effectively integrating messaging and collaboration tools, enabling seamless peer interactions and access to course histories, which fosters a supportive learning community and drives higher user satisfaction and retention on the platform.
R E S U L T S
R E S U L T S
Finally, how our results stack up against the current LMS.
Finally, how our results stack up against the current LMS.
The following metrics are based on a comparison with the existing LMS platform and are focused on a selected number of tasks.
Get High-Res Canvas Optimization Blueprint here.
The chart below illustrates the KPIs for observational tasks conducted on the optimized LMS interface, demonstrating significant improvements in user experience:
Average Success Rate: Increased to 37.5%
Total Time Reduction: Decreased by 14.3 seconds
Average Time Reduced per Task: Approximately 1.59 seconds
Reduction in Error Occurrence Rate: Decreased by 50%
SUS: Increased by 13%
SEQ: Increased by 125%
CSAT: Improved from 50% to 100%
These metrics underscore the effectiveness of the redesign in enhancing usability and overall user satisfaction.
Get High-Res Canvas Optimization Blueprint here.
Reflection
Reflection
Let's build a better future together!
Say hi at hsbisht@iu.edu
Copyright © 2024 Hitesh Singh Bisht. All rights reserved.
Let's build a better future together!
Say hi at hsbisht@iu.edu
Copyright © 2024 Hitesh Singh Bisht. All rights reserved.
Let's build a better
future together!
Say hi at hsbisht@iu.edu
Copyright © 2024 Hitesh Singh Bisht. All rights reserved.