Redesigning the “To-do” section of the canvas app

Using the sprint process to improve the canvas app

Spencer Wright
5 min readDec 15, 2020

Background

The canvas app serves as a central hub for a student’s education. The “to do” section gathers and displays all the assignments a student has due for the week. This is a cool feature, but the current design leaves some lacking. It has all the right information but the current design is hard to process. It also is missing some of the features of the desktop site, like adding custom assignments. My main goal through five sprints was to improve the readability of the “to do” section of the canvas app

Current app design

The Sprint

Monday

Research: I started with initial research to set a good base for this sprint. I looked at some to-do apps to see what features they had. I then browsed the canvas support website to see problems that students and teachers have brought up. I also researched design principles that could be helpful for reference throughout this process. Since readability is the main problem I found chunking to be my guiding design principle.

“Chunking usually refers to breaking up content into small, distinct units of information (or ‘chunks’), as opposed to presenting an undifferentiated mess of atomic information items. Presenting content in chunks makes scanning easier for users and can improve their ability to comprehend”

-Nielson Norman Group

I thought chunking the assignments could make it easier to scan and process assignment information.

Additional Problems found that I tried to fix in my design.

  • Student has to know what the assignment icons mean to know what kind of assignment it is. Unless the assignment type is listed in the title.
  • Students can’t add assignments. (This is something you can do on the website)
  • Doesn’t show if the assignment has associated material like a video, article, or file. Can only see this in module or asignmet description. And then you have to find in files/modules

Tuesday

This sprint was all about defining the problem and generating ideas. After defining the problem I started with Crazy eights. This is an exercise where I sketched eight different solutions in eight minutes. I wanted break up each asignment into distinct units of information. But still had some work to do deciding on the layout.

Ideas (left) and Crazy 8’s (right)

This was followed up by a solution sketch where I fleshed out three of my favorite ideas from crazy eights.

Based on feedback and personal preference I combined the layout of 1 and the group by function of 3.

Wednesday

This day was about finalizing the direction of the sprint. I got feedback on my ideas and got ready to prototype the design. Based on the feedback I took the best parts of my potential solution and combined them into one storyboard. This storyboard showed a typical app flow.

Feedback

  • Arrow down button to change assignment grouping can cause some confusion.

Thursday

Prototyping in Figma

Based on my work from my previous sprints I created a prototype in figma. I also ran some quick tests to make sure I had everything I need.

Friday

Student testing my prototype

It came time to validate my sprint. The main goal of my sprint was to improve the readability of the current “to do” section of the canvas app. I set up my test to see if my design had succeeded, as well as checking the usability of features added. I tested five students of various ages. The participants ranged from a 3rd grader to a 40-year-old who returned to college to finish their degree. To test the readability I had the students find different assignment information in the current canvas app. I then timed them finding the same information in my design. I then tested features added such as adding an assignment and finding an assignment with linked content. In my testing, I found that the content tags were causing some confusion. Originally I had the tag “Link” for any assignment with a website linked. But when asking the students to find the assignment with a video tag the majority were clicking on the assignment with a link tag. The thinking was that this assignment had a link to the video. I decided to change the tag to say article, file, or whatever the linked content may be. And upon further testing, this solved the problem.

Previous wording (left) Fixed wording (right)

Link to prototype

Takeaways from testing

Data from testing redability
  • Students were able to find assignments and due dates/classes much faster in my design compared to the current design.
  • Students were able to see what was due on a specific day much quicker.
  • After fixing the assignment tag’s students didn’t have any trouble with the features added.
  • In my post-test questions, I found that overall students liked the my design better and thought it was easier to use.

Conclusion

This was my first experience with the sprint process but it definitely won’t be the last. I loved the idea generation tequniqes I learned thorugh this process. During the the sprint I was able to put out lots of ideas fast. Not all the ideas where great but I was able to take the best parts and combine them into a better solution. Overall this was a very fun and from my testing seems like a successful project.

--

--