For a more detailed breakdown, please check out my Notion homepage where I documented my process
Overview
WHAT IS CANVAS?
"Canvas is a web-based learning management system, or LMS. It is used by learning institutions, educators, and students to access and manage online course learning materials and communicate about skill development and learning achievement." (Canvas)
WHO IS CANVAS FOR?
Learning focused institutions and businesses
- Students (High school, college, and more) / Enrollees
- Instructors/Teachers
Main stakeholders in this case study is focusing on students
WHY CANVAS?
More than 30 million people use the Canvas Learning Management Platform for schools and businesses.
Now more than ever due to the pandemic and transition to online learning, Canvas and other learning management platform has been a vital tool to keep track and communicate assignments, exams, and more. Overall based on user reviews and interviews, Canvas was generally a good platform, but if it had some improvements, then it would be even better for the users.
INSPIRATION
I use Canvas for my local community college classes, but I often found myself frustrated with the platform for the several reasons listed below. After conducting research, I also resonated with the interviewees and their feedback. To investigate further into how to improve the experience, I decided to choose Canvas, a platform used by many educational institutions, to revive some of the features that I thought failed the users.
PROBLEM
Students, in this case as the main stakeholders, have a hard time navigating the course, and it's important that the user interface and experience are enjoyable as much as possible because this is a platform millions of users use every day.
PAIN POINTS
- Finding files and information; there are repeated sections
- Too many signifiers, meaning the user interface is too cluttered with a mix of nonessentials and essentials all on the left menu bar
- UI Visual design and persuasiveness are weak (service’s characteristics)
SOLUTION
- Users can customize the interface with user-specific needs by organizing it into categories
- Initial: Get rid of the extraneous tabs and narrow it down to the main features:
- Home, profile, and settings on the top bar section
- Have the important info: Assignments > Modules with Syllabus
- Tabs should include: Zoom, Discussion, Calendar, and more
Research & User Insights
CANVAS WEBSITE ANALYSIS
I decided to focus on the website because most users according to Canvas use the platform on the desktop version.
COMPETITIVE ANALYSIS
For the following competitive analysis, I gathered information from Google searches that comprised of blogs directly from the website, the third-party reviews with student reviews specifically because they are the main stakeholders in this case, and identified strengths and weaknesses. With this information, I can see what sorts of common thread there is to the strengths and weaknesses and use the following information for the design portion. This helped me to redefine my strategy and focus on making it user intuitive, collaborative, and have everything in one place.
MODERATED USER INTERVIEWS
Meet Ava and Connor.
Returning user: Ava* (she/her/hers) is a 15-year-old high school student at Online High School* who is using Canvas for a dual enrollment class.
New user: Connor* (he/him/his) is a 53-year-old who graduated from Brown* and has never used Canvas before. He plans on using Canvas to take accounting classes.
*For privacy sake, I changed their name and school.
User interview process
I did a user interview over Zoom with a list of tasks, observations, and questionnaires. I took observational and interview notes on Notion and shared screened the process. They controlled their page while I asked them questions or stayed silent.
For the following interview, Ava and Connor used my college calculus course on my Canvas account.
Before the interview, I told them what the purpose of this interview is and asked them some background questions about their knowledge and usage of similar platforms to Canvas. I used the similar platform they used to compare it for the task.
During the interview, I did not guide them, was quiet as possible, asked the task, observed, and used hints if they were stuck. I opened up the page to where the task was. Pain points.
After the interview, I asked them to recap their experience with some post questions. + pain relievers.
Time duration: Each interview took about 20-30 minutes on a Saturday night.
Pre questions:
- Basic info: Name, grade, school, demographic, etc.
- Why do you use Canvas?
- Is your school currently fully remote, hybrid (half in person and online), or fully online?
- How has your experience with online learning been different than your learning experience in classrooms?
- What other apps/websites/softwares are used by your school right now?
- What other learning management systems have you used?
Tasks: Details in Notion
- Sequence
- Finding
- Comparison
Post questions:
- What other platforms are you currently using?
- Would you be interested in using this site in the future? Why or why not?
- What would you change?
- Tell me about what you liked in this experience if anything?
- Tell me about what you would have changed if anything?
Full quote unedited and key takeaways:
Ava:
"I prefer there's no orange; gray. Neutral colors or colors that match the platform. Do not use the platform again because of the user interface. Too much going on and too many tabs. If there were fewer tabs, I would consider using them. I would use Google Classroom instead because I like that everything is connected while you have to find other things like Zoom. I would only consider using Canvas if teachers and schools forced us to use it. I like how the teacher and student immediate connection is there though."
Connor:
"I like the content. Discussion with trace and thread, but chat is something. Why is it far away? The tabs are all over the place. Combine discussion, people, and chat. Assignment, announcement, todos altogether. Under people, I would ask discussion and chatting features like Kakao Talk group chat or Gmail Groups. Canvas has more functions/resources like chatting and discussion but I do not like the layout because it's all over the place/not organized. A simple layout of Google Classroom, but it looks like they have fewer functions from the student side. If they could customize the color and interface, that would nice and easy."
USER SURVEY
To get a breadth of perspectives, I created a list of questionnaires regarding their use for Canvas, changes, and features they wished to see. This was sent out on Slack, Discord, and to some of my college classmates.
Although the sample size was small due to time constraints and the number of responses, it provided some insight into what features were most helpful, not helpful, and why they used the platform. It also gave insight into the other competitors and what they do well. The user survey google form https://forms.gle/FtXn4QMrPqKMnW5T9
Key takeaways from the user survey responses as of 9:10 pm PDT on 4/24/2021:
- High school females located in the US (Alabama and California)
- Primary use: School; fully online and hybrid as of now
"School. I would prefer to use Google Classroom instead because I like seeing a feed, classwork, and students in one section."
"I now use Schoology, but I used to utilize Canvas whenever I needed to turn in assignments for class."
- "Online learning is much more autonomous in that I get to choose whatever I study and tailor my academic schedule to my own needs. In other words, with less structure, I get to focus on my personal weaknesses and strengthen them through consistent practice. This is in contrast to in-person learning, where the learning process was very rigid and uncompromising."
- "More reliant on Canvas and other learning platforms during online learning"
- Competitors: Google Classroom, Schoology
- Pros: "Canvas is highly organized dependent on the instructor, and the interface has a concise, minimalistic appearance. It simplifies my digital workspace, allowing for me to focus on what matters."
- Cons: "The UI is hard to use and it’s hard to find information. I like Google Classroom because it is simplified and more pleasant to look at. UI looks outdated for Canva"
- Order of most (left, 1) to least features (right, 7): Assignments, Message instructor, Check grades, Inbox (Messages and conversations) Announcements and To-Do list at a tie, Chatting with other students
- Other features the interviewee uses: Calendar to oversee assignment deadlines
Redesigning process
BASIC INFORMATION HIERARCHY FOR PROTOTYPE
This was helpful for me to map out to understand how each component would interact and come first. It addressed two needs: Customizability and organizing in this case. The course homepage is the main hub and the following shows how the tabs will interact with one another.
LOW FIDELITY/RAPID WIREFRAMING
Rapid wireframing was important to get the general structure and content down despite it being a bit messy. As long as it was understood what I would do for the prototype, it was easier to map out how I wanted to do this on Figma. I could also figure out if something did not look right and validate ideas.
DETERMINING VISUAL IDENTITY
While I was researching earlier, I came across https://www.instructure.com/canvas and I really loved how modern, clean and chic it felt. I wanted to incorporate the same elements, so I used Font Ninja and Color Picker to copy a similar style.
ADDING ICONS FOR ACCESSIBILITY PURPOSES
Accessibility is another key component to making sure it's inclusive to all users. I added icons from Material Icons to convey information or an identifier for the following tabs e.g., Discussions has a speech bubble
Easy user interface on course homepage
Before
- Complaints from user reviews and studies about the amount of content or features in one place. Overwhelming
- Home should not have assignments and to do only
After
- It should contain the three most important features: a calendar to keep track of deadlines and more, a to-do list, and upcoming events. This is all in turn to keep track of what you are supposed to do
- The tab is purposefully hidden to have less noise
- Home, profile, settings up at the top
- Similar upcoming style like Google Classroom because it had nice feedback from user interviews
Course assignments
Before
- Assignments all clumped in one
- Show by date and type is not necessary and does not work on this page
After
- Identifiable sections with assignments underneath
- Moved syllabus to one page with assignments instead of a separate tab
- Easy to click back and forth
Customizability and getting rid or adding tabs
Before
- Too many tabs that are either 1) Not being used 2) The same but repeated 3) Not in the right order 4) Too many
After
- Only keep the essentials
- Able to customize to reorder and add or delete tabs
- Combined discussions with chat
- Inbox is more prominent to message teachers and more
Takeaways
Challenges I ran into
- I started the competition a bit around 12 pm PDT on Saturday due to external happenings. I think I would have started with a minimum lovable prototype. I think I would have tried to strike the right balance with enough research -> prototyping phase
- Not enough sleep hehe
- Beginner at UI/UX! Mostly a growth opportunity. Lots of google searches if I didn't understand certain processes, watching videos, understanding there, so lots of trial and error figuring out what works best
- Synthesizing user insight rather than what they were saying
Accomplishments I am proud of
- Going in-depth with the research. I think the research part is often overlooked, but it can tell a lot about what the user's needs are
- Clean and user friendly visual
- Despite the time crunch with less than 24 hours and working alone, I was able to manage to get lots of information documented along the way, prototype, create a pitch, create mockups, and more
- Pushing myself to create a finished project! I am happy with the way it turned out and I hope to continue my UI/UX journey
What's next?
- Usability testing with current prototype and adding, changing, etc.
- Adding more mockups for the different tabs. Continuing to reuse the same layout for different pages so it's easier
- Suggesting/pitching feature changes to Canvas
Built With
- figma
- materialicon
- miro
- notion
Log in or sign up for Devpost to join the conversation.