Project 2

Canvas Redesign

Check out the code on Github!

Our task for this project was to redesign Canvas, the tool used at UC for professors to post assignments, announcements, grades, etc. for their classes. Our redesign of Canvas was to boost it's motivational and organizational utility. This project was completed as a group along with Khoa Do, Jenn Gutman, and Veronica Ufferman. The research and sketching stages were completed evenly with each member conducting interviews, sending out surveys, and drawing sketches of the potential parts of the webpage. Each member of the group then created one page of the final Canvas redesign.

Interviews

What is your experience using Canvas?

Likes

Keeps grades and assignments together for every class.
Many people use the calendar functionality to keep track of due dates.
Turning in assignments through canvas allows users to see what they have and haven't submitted.

Dislikes

Professor's often don't personalize their page, leading to unnecessary pages.
Assignments and such can be hard to find because there are several different pages that professors can keep them.
To-do list includes announcements, which are rarely ever to-do items.

The most interesting result of this question was seeing that most of our interviewee's issues with canvas were more user error from professors. This is something that I kind of knew but had never actually connected that if all of our professors are having trouble making a good Canvas page, maybe Canvas needs to improve their process. Our main takeaway was that we should limit the amount of customizability for professors because it adds confusion for students, and professors don't take advantage of it anyway.

What motivational tools help you to complete school work?

Calendar/Planner
- helps see upcoming work/deadlines
- helps keep assignments together and pick a date to get them done
- Can easily input all assignments at the beginning of the week
- It allows me to know what I’ve done so far and what I still need to do
Block Timer/Pomodoro Technique
- Easier to get started working on something you don’t want to do when you know when it’ll be over
- Wished block timer had a visible countdown and didn't just buzz when time is up
Task List/White Board
- Can move assignments around to order them in a specific way
- Can easily input all assignments at the beginning of the week
- It allows me to know what I’ve done so far and what I still need to do
Go to a quiet space (Coffee Shop, Library, etc.)
- Coffee shops make work environment more enjoyable
- Minimize Distractions

Our most important takeaway from this section is that the most popular forms of motivation/organization are a calendar/planner and a task list. These were the two organizational tools that we added to our version of Canvas. One thing that I wish we had considered more was the implementation of a block timer for use in the Pomodoro technique. I didn't realize at the time what the interviewee's meant, but I believe that the timer would have been a better motivational tool than the one that we decided on, which was badges/awards.

What motivates you in an academic setting?

Grades
Graduation/Scholarship
Engaging Professors/Classes
Learning
Anxiety/Urgency
Rewards and Incentives (either from a class or individually)

This question showed that most students are motivated by factors outside of canvas. Students get their work done because they have to so they can pass classes, keep their scholarships, and graduate. Multiple students mentioned being motivated either by being rewarded through classes by turning in assignments on time or by giving themselves rewards for completing work. We decided to implement this by implementing badges for students that can be earned by completing assignments.

Which features in canvas do you use the most/find most helpful?

People
- Interact with classmates
Discussion Posts
- Wish there was more differentiation in replies within discussions
- Wish you could add a response/reply to another reply instead of it all being in one thread
Assignments
- Like that upcoming is separated at the top
- Need to use to submit work
- Have a good selection of options for ways to submit (file upload, url, text entry, etc)
Modules
- Helps split the course material into groups (either by week or by topic)
- Very dependent on professors
Grades
- Somewhat required to use as grades are a motivator
- Helpful if they’re actually updated regularly
Zoom
- Especially when professors record lecture videos
- Easy to go back a re-watch parts missed in class
Calendar
- Track all of user's assignments and appointments that are school related.
- Can see all the assignment due dates for all of my classes in one place.
- Allows user to see which day all my assignments are due or if I have a quiz/test.
- Works as a planner
Customization Features
- Changing class colors

The most popular features of canvas are the calendar, assignments, grades, and modules. When we looked at these pages, we realized that assignments and modules could be combined into one page. The separation of assignments and modules is a big pain point for users because professors essentially have to choose which of the two they want to use to put important info. One of my professors had assignment submission in the assignment tab, but the actual assignments were in the modules tab. This made it very confusing and tedious to turn in assignments when most classes just have the actual assignment included with the submission, even if it is available in both the modules and the assignments tabs.

Is there anything about canvas that you find illuminating or confusing?

Illuminating

Canvas 101 example course is helpful for customizing/learning how to use canvas
Modular
Easy to return to home page

Confusing

Default setup has too many options enabled
Professors are able to set up their pages in such different ways, there’s a slight learning curve at the beginning of every semester
Too many options for where to put files
Wish there was a back button that would go back to last page you went to within canvas.
Confusing to try and modify Canvas page
So many pages that can be accessed in more than one way
There’s a lot of classes that are completely useless and user doesn’t know if they can remove them
There is no organization to files unless the professor sets it on purpose
To-Do list as of now includes all sorts of things such as announcements, assignments, and dates for quizzes/tests

From our interviews clearly the users had more problems with Canvas than they had things that they liked. As we have seen from answers to previous questions, many of the users had issues with how their professors had set up their pages. This reinforced our decision to simplify Canvas into only its essentials. Additionally, we got more comments about the to-do list, which confirmed that we should attempt to improve that section of the page.

Contextual Inquiries

We asked 2 participants to go through different processes within canvas from the initial login page to the completion of that activity, such as submitting an assignment, viewing grades, looking at a todo list/ calendar, etc. While they completed different activities we asked why they do certain things that we observed as interesting. We took notes on what the participant did to gain information.

When asked about viewing grades, the first student responded that they never using the grades page (which I view as essential), instead opting to navigate to a specific assignment to see their grade for that assignment. The other student said that they used the grades page to see their overall grade in the course and the assignment page to see the grade for a specific assignment. The second student noted their annoyance with having to go to two different places to view their grades. This indicated to us that we needed to have a specific place where all grades could be viewed.

When asked about viewing assignment deadlines, the first student used the calendar page in canvas, while the second used an external planner. As a result of this finding, the interviews, and the surveys that we will see in the next section, we decided to have both a to-do list and a calendar functionality as there seemed to be an even split of people who used each method.

Surveying

Along with the other groups in the class, we created a survey that would be sent to UC students to get even more insight about how students see and use Canvas.

Word cloud in response to "What strengths does Canvas have? What weaknesses?"

A surprising result of this question in my mind is that good and easy were more prevalent than bad and weakness. I partly believe that this is because strength comes first in the question.

If I were to do the survey again I would have separated this question into 2 questions in order to see the specific strengths and weaknesses easier.

This survey question was the most illuminating. This is a clear indicator for a few functionalities that are essential (Modules, Assignments, Grades) and which are almost never used (History, Chat, Pages).

As was shown with the contextual inquiry and the interviews, students are roughly split between using a planner and a to-do list.

Design Requirements

Limited to actually important information
Fewer tabs, easier to find the information you need
Rewards system for turning in assignments
Easy to set up for professors
Standardize where professors place things
Easy way to identify deadlines
Way to view/track progression through courses/coursework
Add a helpful to-do list

Preliminary Design Sketches

In groups of 8 or so we brainstormed different ideas for features to add to our Canvas alternative. We sketched one idea for about a minute and then passed the paper to the person to our right, receiving another paper from the person to our left. This paper contained sketches from other people about a different feature of the page.

UI Design Sketch

Sketch of the home page by Veronica Ufferman in class with consultation from the other group members

Storyboard Sketches

Sketch of badge page by Colin Conn

Sketch of singular badge dialog by Colin Conn

Sketches of the to-do list by Jenn Gutman

Sketches of the calendar page by Khoa Do

Sketches of the grades page by Veronica Ufferman

Color Palette

For this interface we decided to keep the color palette using the University of Cincinnati's actual primary color, UC red. Because we were redesigning an existing product to make it easier for students, we wanted to use the colors that UC would have in their product.

Home Page - Colin Conn

When creating the home page, we found that most people used the card view in canvas, so we wanted to model off of that. The home page functionality is similar to the current state of canvas with a few quality of life improvements.

Our surveys showed that the navigation bar on canvas is full of buttons that people rarely use, and the course-specific ones are even more cluttered. We reduced the navigation bar into 5 buttons, home, profile, courses, grades, and calendar. We decided that these buttons were the most commonly used by students (with the exception of profile). We kept the profile section because part of our motivational tool was going to include a customizable profile. However, that page was not implemented. Each button has a tooltip that shows what the icon is connected to in case the icons are unclear.

The classes are still displayed as cards, but we reduced the information that was on the cards to the course name, the professor, and the course description.

The to-do list on the homepage now excludes announcements for the courses, which was a major pain point expressed in our interviews. Additionally each assignment has a list of deliverables that break an assignment up into more manageable pieces. The to-do list is filterable by class in case the student only wants to view assignments from a specific class.

The final section of the home page is the badges section. The section currently contains badges for viewing class syllabi and turning in assignments. The badges are not interactable at this point, but that would be the primary focus if we were to continue working on this project.

Future Improvements

If we were to continue the work on this project, there are parts of each section that we would address. Firstly, the cards contain a course description, which is not as helpful for students after the class starts. Additionally, it would be helpful for the class time and location to be displayed on the cards in case the student needs to see that information quickly. For the to-do list, we would like for the assignments to be sorted by due date instead of class, and the student should be able to filter by more than just class (assignment type, point value, etc.). It would also be valuable as a motivational tool if the student could add their own deliverables to the assignments. For the badges, we would like for there to be a more detailed view of the badges to see their point value and description. The badges would be a much more valuable motivational tool if there was a shop implemented. We weren’t sure that we could give bonus points for classes, but our idea was to implement a customizable profile with color themes and an avatar that you could change using points in the shop. Finally, as I discussed earlier, I believe that a built-in timer to allow students to set work and break time would be a more effective motivational tool and should have been prioritized over badges if not replacing it entirely.

Courses Page - Jenn Gutman

When creating the courses page, we wanted to keep the layout and location of files consistent across all courses. The difference in layout for each course in the current version of Canvas was one of the biggest complaints in the interview responses. The courses were placed in an accordion, where you can click on a course to expand the tab and view the modules for the individual courses. We also included the To Do List on the courses page to make it easier for students to determine what files they needed to access to complete their upcoming work.

Each course in the main accordion contains an accordion of modules. We decided to split the modules by week in the semester, therefore Module 1 would contain all the announcements, presentations, pages, and student uploaded notes for the first week of the class. The syllabus was placed in Module 0 which serves as a course information module, with an announcements section that could still be used to address changes in the syllabus. An example Module 0 is shown below. One other feature added was the change in color when hovering over an accordion title. This provides visual feedback for which section the user is about to receive more information.

As mentioned before, each module is broken into three sections - announcements, files, and notes.

We found in interviews that the number of announcements on canvas can be overwhelming, and placing them in one large list leads to a lot of information being missed. This led to the design choice of placing them within weekly modules for each course. Each week will have a much shorter list of announcements that are relevant to the lectures and assignments for that week. Announcements will show up as a list, with a title, when it was posted, and a little eye button on the right. When the eye button is clicked, the announcement can be viewed and a box to add a reply is shown. This allows for communication with the professor and other students in a manner similar to how discussions work currently on canvas. To close the announcement, the eye button must be clicked again.

The files section contains links to lecture slides and activity or informational pages created by professors. Again, these show as a list of titles, dates posted and a download button to access them.

Lastly, the notes section was created as a place where the student can upload their personal notes from lectures or in-class work for the week. This provides an organizational tool on canvas so the student does not have to store all the files for a course locally.

Future Improvements

We would like to color code the courses and modules to be consistent across the various canvas pages. Additionally, getting the download buttons for the files to be functional, adding an upload button to actually add notes files to the page, and getting the reply feature for announcements working would be the next major improvements to the courses page.

Grades Page - Veronica Ufferman

When conducting our research we found that most students are the most motivated in an academic setting by grades. We also found in our interviews that people wanted to be able to view all their grades in one place rather than having to navigate to each page.

So the grades/assignment page is set up where you can view and access all the grades for all of the class in one place.

Since grades are so important to academic motivation the overall grade for each course is prominently displayed. A color is overlaid on the course titles that shows the state of the overall grade for each course. Red denotes a failing grade that needs to be improved upon, this will motivate students to improve, yellow denotes a warning grade “C” that if the student does worse will result in a failing grade, and green denotes a good grade where the student does not need to worry as much.

Furthermore the grades in the past assignment section has the grades of each individual assignment clearly visible, with the name of the assignment and a button for the student to download their submission for review purposes.

Above the grades on the same page are upcoming assignments. In our interviews we found that people preferred to view their upcoming assignments on the same page as the grades. This allows the student to more easily view all of their assignments both graded and ungraded. This allows the students to see the full picture of the semester and remain motivated in their school work.

In the upcoming assignment section there are sections displaying all the upcoming assignments for each course. Each assignment is able to be downloaded without leaving the page, and a submission link is provided easily without being redirected to another page for ease of use. Each assignment has the points that it is worth prominently displayed, to motivate students to complete assignments that are worth many points. The colors of the assignment titles are the same as that of the grades section to remind the student of how they are doing in each class.

Future Improvements

In the future we would want to make the download and submit buttons functional. We would also want to implement a filer system.

Calendar Page - Khoa Do

From our research, we found that most students like to use a calendar/planner as a motivational tool to complete school work. Students found the calendar from canvas to already be helpful so some aspects of the canvas calendar stayed relatively the same. For example, due dates for class assignments are color coded and placed on the calendar so that students can be aware of upcoming deadlines. The grayed out boxes signify days from another month which makes it less confusing to look at. This is a feature that Canvas does not currently have.

On the left side of the calendar is a list of courses that the student is currently taking. The color of the courses corresponds to the color of events.

Above is the top display of the calendar. On the left side, there is a button to jump to today’s date. Next to it are the back and next buttons which go to the previous and future month respectively. On the right side of the display, you are able to view the calendar in a month, week, and day display. This is helpful for students who would like an overview of what to do in a day or in a month so that they could see upcoming assignments. The agenda acts as a planner for students which is a significant motivational tool students use.

This feature allows students to create a new event on the calendar if they would like. The inputs require a name for the event, the start date, and end date. If it is an all day event, the start date and end date should be the same. Once a user clicks on the start date/end date input box, a miniature calendar will appear where a user can click on a specific date that is intended.

A student mentioned in one of our interviews that they used Google Calendar as a motivational tool. In our group’s calendar, users are able to sync the canvas calendar with another calendar such as Microsoft Outlook, Google Calendar, and Apple Calendar. When one of these calendars are selected, a login pop-up will appear so that students could use their account to access their other calendars. Ideally, once a user logs in to their account for the calendar they selected, it will combine with the Canvas calendar. This feature is not fully functional so nothing will happen if you actually input the information needed.

Future Improvements

In the future, we’d like to implement the functionality of syncing with other calendars. Also, we want to add some sort of way to filter the data within the calendar in cases where students would only want to see events from a specific course.

Back to Class Page

Page updated

Google Sites

Report abuse