SP
FEEDBACK
FIRST
Empowering students to prioritize feedback over grade.
Picture this: You're a 9th-grade student receiving a notification that your English teacher has provided feedback on your essay. How motivated are you to explore the feedback, or do you simply want to see the grade and move on?
The answer lies in the school culture, norms and expectations for feedback.
Year: 2022
Role: UI/ UX Experience
Tools: Figma, Miro, Google Workspace
Debate surrounds when and how to provide feedback and grades in education.
Students often feel stress, frustration, and confusion immediately after receiving grades.
Without strategic delivery, feedback posted alongside grades can go unnoticed.
I redesigned the Canvas LMS feedback feature for students in K-12 schools so they can see teacher feedback before grades. Students are diverse in learning styles and motivations.
The new step hierarchy relieves students of the stress of figuring out their next moves after feedback, providing clarity for performance improvement by 90%.
Review Feedback
Choose one of the four options to respond.
Confirmation pop-up will allow you to unlock the grade.
The grade is now visible.
What is Canvas (LMS)?
As a former teacher, I had the opportunity to enhance student experience and communication within Canvas, a Learning Management System (LMS) used for accessing and engaging with coursework.
Disclaimer: This case study is a hypothetical showcase of my creative and problem-solving skills, illustrating my approach to design challenges in a professional context. It is not evaluative and is not commissioned by Canvas.
“Teens are (over) confident in their web abilities, but they perform worse than adults. Lower reading levels, impatience, and undeveloped research skills reduce teens’ task success and require simple, relatable sites.”
(Teenager’s UX: Designing for Teens By Alita Joyce and Jakob Nielsen)
The Design Process
My experience as a former teacher has played a crucial role in guiding my design process. It enabled me to validate my assumptions through student interviews and research, leading to a reimagined design, layout, and structure for how students access and respond to feedback in Canvas LMS.
RESEARCH
Heuristic Analysis
Market Research
User Interviews
Surveys
IDEATE
Affinity Mapping
Persona
User Journey Map
User Flow
DESIGN
Sketches
Digital Wireframes
Prototype
RESULTS/ ITERATION
User Testing
Iterations
Recommendations
So...How might we help students effectively use teacher feedback to improve their performance and alleviate stress related to grades?
RESEARCH
The Heuristic Analysis
To initiate the process of gaining a clear understanding of the user experience, I dedicated time to analyze the user interface (UI) of the current features in the Canvas app. This step allowed me to highlight the emphasis on grade, point out unlabeled tiny icons and confusing options within the inconsistent UI design.
The Mobile App
1
3
Grade is emphasized
Submission & Rubric is confusing labeling
Rubric button - is tiny and tucked away requiring multiple clicks
Message the teacher feature is not ideal mode of communication
The Desktop View
"Late" is indicated in red
(red = negative pyschological impact)
Comment and Feedback icons are unlabled, unintuitive, tiny and tucked away to the right.
Grade is prioritized and is front and center
“I don’t know how to describe it specifically but there are many aspects of the app that feel old and outdated or that are just scraping the barrel. It definitely needs a revamp.”
- A Student
Competitive Analysis
According to Gartner, Canvas is rated one of the top LMS for K- 12 schools. It has many communication features, holds lots of course content, and teacher feedback options compared to its competitors.
The competitive analysis validates that despite offering various feedback options for teachers, Canvas lacks a direct and prompt method for students to respond to teacher feedback.
It is clear that for students less is more.
According to the eLearning Industry and Gartner, there is a general consensus that Canvas is overwhelming and confusing to use.
Also, the student mobile app user interface is
not consistent with the desktop format,
making it difficult to navigate between the platforms.
To learn directly from the users,
I sent a survey for students in 9-12 grades and fourteen students completed the survey. Click here to preview the full survey.
9/10
Users primarily use the laptop to navigate Canvas
5/10
Users revise and resubmit assignment after getting feedback
8/10
Users confirm that it takes 3 to 4 clicks to get to the feedback
3/10
Users don't always know how to respond to feedback
6/10
Users's attention first goes to the grade when offered with feedback
7/10
Users experience stress and negative emotions when anticipating grades/ feedback
“Getting grades back definitely stresses me, but when I do well I feel really good!”
-A Student
Pain Points
The extensive research consisting of heuristic analysis, competitive analysis as well as user survey resulted in defining four pain points and a reminder of their negative impact.
Complex Navigation
Opportunity:
Simplify and make the navigation more intuitive, ensuring inclusivity for various learning styles.
Negative Emotional Impact
Opportunity:
Provide clearer instructions and constructive feedback to motivate and engage users positively.
Communication Gap
Opportunity:
Enhance communication options to bridge the gap between teachers and students, fostering trust and understanding.
Lack of Inclusivity
Opportunity: Design the feature to be inclusive of various learning styles, ensuring a seamless and user-friendly experience for all.
How might we optimize the student experience on Canvas, enabling them to confidently act on teacher feedback and take control of their academic performance with a sense of ownership and enthusiasm?
IDEATE
The student
Using the insight, I created user persona to gain a deeper understanding of the users and their needs.
The cycle of frustration and confusion
In addition, I created a user journey map to visualize the ongoing cycle of user frustration and confusion in the process of receiving and responding to feedback.This journey map presented a clear picture of the negative user experience and helped me see the possible opportunities to create a more positive and sustainable experience.
The improved user flow
With this user flow I clearly depicts a shorter, more efficient path to feedback with four clear methods to respond to the teacher.
It also shows that once the student responds, they receive a confirmation that then will unlock the grade and make it viewable to the user. This user flow reinforces positive engagement and empowerment in the user.
DESIGN
Streamlining the user experience
Guided by the user flow, I started sketching ideas for redesigning the feedback screen. After numerous iterations, I concluded that to enhance the flow and user engagement, it's optimal to present the assignment, feedback, and response options in a single, continuous scroll rather than requiring multiple clicks.
Original Version
The grade is the first thing you see -------------->
Unclear labeling to
access feedback -------->
Yet another click to
see the feedback
<----------------------
The only way to
respond to feedback
<-----------------------------
Iteration 1: These sketches only illustrate the navigating to the feedback and receiving the confirmation, there is no inclusion of the grade.
Iteration 2: Upon further consideration and understanding user motivations, I recognized that presenting only feedback without a grade might be a significant departure from the school culture. Therefore, I aimed to find a balance between providing both feedback and a grade as the most suitable solution.
The resulting digital wireframes show a scroll from the assignment, rubric, and options for responses. Selecting a response sends confirmation pop-up that ultimately unlocks the grade, prioritizing the feedback first.
Did you know that the most used school spirit colors are orange and blue?
To ensure the design comply with accessibility and contrast test, I took some time to research a color theme that would best fit the context of a school and also bring some excitement and energy to its users.
Iteration 3 Iteration 4
-
Orange = Enthusiasm/ Energy
-
Blue = Intelligence/ Stability
"The new feature makes me feel calm and clear about what I need to do after I get feedback from a teacher. It takes away a lot of pressure from me to make a decision or go see the teacher. "
- A Student
With the improved design, 100% users felt confident in their ability to improve their performance and communicate with the teacher effectively.
To compare the user experience of the original flow with the improved design, I conducted usability tests with 5 students who were familiar with using the original Canvas app. Overall the students reacted positively to the streamlined their access to teacher feedback and the simple and clean look of the overall design.
5/5
students found feedback to be quick and easy to find.
5/5
students liked that they can see the assignment, feedback, and a clear way to respond to teacher, all on one screen.
4/5
students were satisfied with the 4 clear options for response.
4/5
students liked that the grade was unlocked after they responded to feedback.
"I think it's awesome that this feature shows the teacher that I actually read their feedback and made the effort to do something about it before its too late."
- A Student
Recommendation for Canvas
-
Diversify the options for student response with further research
-
Build collapsible sections within the page to offer a simplified option for viewing and navigating the assignment, rubric, and response options.
-
Ensure consistent application design across multiple platforms.
-
Conduct regular usability tests over two years, focusing on accessibility and inclusiveness for all learning styles.
Opportunities / Inspiration for Future Ideas:
-
Rethink Canvas LMS app UI with teen behavior in mind, drawing from popular apps like BeReal, Snapchat, TikTok, VSCO, and Instagram.
-
Explore integrating motion graphics, game-based learning, AI/GPChat to foster global learning connections and enhance student motivation.
Amidst the ever-changing landscape of technology and education, Canvas LMS has an extraordinary opportunity to leverage student and teacher feedback to refine its design and flows to foster effective communication, trust, and motivation in the learning process.
Takeaways
Value in Iteration in the Design Process
To deepen the empathy for struggling students multiple rounds of iteration are essential to achieving a seamless user experience in product design.
Appreciation for Human-Centered Approach
To validate assumptions and confirm the success of the improved design, user interviews, surveys, and testing, especially observing their interactions with the app is essential.
User Needs vs, Business Goals
To ensure the development of the improved product it is important to align user needs with business goals in the UX design process.