What can be improved for an already wildly-successful learning management system?
Project Description
In a world where virtually-delivered education is more important than ever, Canvas is a leading Learning Management System (LMS) that helps teachers and professors create K-12 and tertiary education experiences for students all across the globe. While Canvas does an admirable job at accomplishing this mission, there is certainly room for improvement.
This is coming from someone who has used the popular LMS from middle school all the way into college, and while I have had a mostly positive experience using this platform, the need to upgrade becomes ever more glaring as I continue on my journey of UX. I have been gathering ideas on how to improve Canvas in the back of my mind for a while now, so I ultimately decided to bring some of them to life by mocking up mobile and desktop screens that demonstrate what a new and improved Canvas could look like. But before discussing solutions, I needed to figure out what needs to be solved in the first place.
The Problem
To put it simply, Canvas suffers from dated aesthetics, a cluttered site structure, and a lackluster messaging system.
On the surface, the desktop and mobile experience feels like it was left in the mid-2010s. It must be brought to modern standards to appeal to a young student user base. The structure of Canvas works for the most part, but there are certain scenarios in which users must make unnecessary extra steps to reach point A to point B. These obstacles need to be removed, and a more streamlined experience with only necessary features and screens. If the design was left in the 2010s, the messaging system was left in the 2000s. Their clunky hybrid of an email system and Instant Messaging (IM) platform needs to be replaced with a more familiar and usable IM experience that students are already acclimated to from other apps.
Audience
I mentioned earlier that Canvas has a user base consisting of “mostly young students”. While this is true for those who are going to be interacting and completing with the course material, Canvas needs to serve the needs for other roles and demographics as well. To make a great LMS, it needs to cater to both the instructor and their students to ensure a seamless experience for both.
An instructor is going to need systems to grade assignments, upload/organize/grade course material, send out announcements, create due dates, and all the other duties that come with being an instructor. A student is going to need an environment to access course materials and their grades, ability to submit self-created materials to complete work, etc.
As instructors (~30-80+ yrs) are typically older than their students (~10-40+ yrs), it’s important to make simplicity and ease of use the cornerstone of our design in order to accommodate a wide range of ages and tech-experiences while still providing the unique tools needed for both of these audiences.
Initial Brainstorming
For this project, I had a timeframe of 6 weeks to complete this project from inception to completion. With the problems and audience laid out before me, it was time to begin brainstorming solutions.
My initial brainstorming session came in the form of sketches. This allows me to quickly get any and all ideas that I come up with into something tangible. While going back and forth between navigating Canvas and sketching in my notebook, I was able to find specific pain points and issues that I thought could be improved. Particularly, I felt that navigation between courses could be shortened on the desktop version. I sketched out an example that included course tabs on the top of the screen to save extra clicks as opposed to clicking the “courses” button in the menu and selecting the course from there.
I also developed a concept for what an improved messaging system to look like. The idea would be to combine the announcements and messages tab to better streamline the experience for the students and eliminate the need to manage a whole other system for instructors. The messaging system was sketched out to feel similar to other popular IM systems, such as Microsoft Team’s chat section.
Wireframes
I further explored ideas in the Wireframe section. Since this project is a redesign, I took screenshots of several screens in both the mobile and desktop versions of Canvas to constantly refer to as I began building out my screen structures. This sparked several more ideas that I hadn’t thought of during the sketching sessions, especially for what the UI could look like. While Canvas wasn’t perfect, I found the UI to actually be pretty well designed from a structural standpoint. The key pain points I found were in the navigation, so I focused on changing that experience while giving the elements that did work a bit of a facelift. I wasn’t in the stage of creating a beautiful looking UI yet, but I had set the foundation for how an improved Canvas would be structured and navigate.
Both the desktop navigation and messaging system were introduced from my sketches, but I also came up with another navigational improvement as I was using Canvas on mobile during this stage. I found that the mobile version never brought you back to where you left off when viewing the list of modules, which I found particularly annoying. To solve this, I introduced a banner that would show up at the top of the screen when a class was selected that would provide you a direct link to not just the module you were looking at, but to the last thing in the module you were viewing. Whether it was a reading, discussion, or assignment, you could now get back to it with a single click.
With the feedback of colleagues and mentors, I created a second round of wireframes that introduced a menu screen, grade displays on top of classes, and other small changes that made the mobile and desktop experienced more streamlined with one another.
Final Designs
Bringing the wireframes to life with a beautiful fresh coat of paint is perhaps my favorite part of the design process. Now that I had really nailed in the structure, I got to work on designing the exterior. I had made a note of how I felt that the current Canvas design felt dated, so I really wanted to make Canvas feel like it was a new app just released this week. Ironically though, I took a lot of inspiration from Canvas itself for this design. One thing I thought they did very well was the use of color. I really like how they separate courses from one another by assigning a unique, customizable color to each one. I took this a step further and designed the UI around this so you always knew what course you were in at all times. This would be especially helpful when switching between tabs on desktop. Subtle gradients were included as well to highlight important and high-action buttons.
While I quite enjoyed that aspect of the Canvas design, I also revamped the parts of the design that weren’t working well. I opted for rounded corners for button elements, cleaner icon sets, and reduced on-screen elements to the essentials while still keeping them accessible when needed (the buttons under the courses on the Dashboard screen, for example). Drop-shadow was also a big focus with this design, as it helps elevate the design and gives it some depth that is severely lacking in the current version. Since the messaging system is essentially a complete overhaul of the old one, I included the necessary UI elements and navigational structure to make it feel like a messaging app with the look and feel similar to iMessage with the power of the Microsoft Teams chat feature. The messages are also split into a main inbox and announcements so that the two aren’t mixed up.
Conclusion
One thing that this project has really taught me is the importance of iteration and feedback from peers. While I was confident in my designs, an outside perspective really helped me see problems with my own design that I had not seen myself. Thanks to their help, I was able to bring the desktop and mobile versions together to be a single, cohesive experience. I’m certain that had there been more time on this project, the first thing I would make more time for would be additional feedback and iteration sessions.
I am happy with how the final product turned out from this project, but there is room for improvement I would have liked to have made for it. I would have really liked to explored the calendar feature, as it’s another area that works well but could use some tweaks to really make it shine. I also would like to revisit the modules screen sometime, as I think the design, while improved, could still be better. I had a hard time figuring out a way to create module drop-downs that provided proper separation from the module title and the several items within the module. Perhaps the last change I would make would be to the icon sets, particularly in their thickness. I think thinner icons would have contributed more to the sleek and modern look I was going for.
In the end, I believe the final product to be both a functional and visual improvement over the current version of Canvas. It retains the core system and features that make the LMS a great choice to begin with, but now has a more streamlined navigation, overhauled messaging system, and a bold, yet simple design that belongs in 2022. From the initial brainstorming process to putting on the final touches, this project allowed me to enhance my UX and UI design skills while further strengthening my design process for future projects to come.