CHALLENGE

Communication and collaboration styles used by students while working in a team are positively correlated with project performance and success. However, based on our primary research conducted on IU students, we observed that students faced inefficiencies in communicating and collaborating while working within teams. We researched and found a multitude of problems that hampered the productivity of students, namely: use of multiple platforms for communication, diversion of attention, loss of efficiency, no dedicated collaborative platform for team-related work, absence of file organization and synchronization. In our research we also found out that Canvas, the learning management system is a common platform to every IU student and they use it for their academic purpose. It also comes up with a mobile app and tablet version. However, currently Canvas does not support team collaboration and also lacks effective communication feature between students.

Hence we decided on our challenge to redesign Canvas LMS for helping students to communicate and collaborate efficiently while working in teams.
PROJECT TYPE & TEAM
Academic Project
Team of three
MY ROLE
Research - Literature Review, Interviews, Brainstorming, Usability testing
‍
Design - Storyboarding, Userflow, Wireframes, Low & High Fidelity Prototype
TOOLS USED
Adobe Photoshop, Figma
DURATION
Nov – Dec 2019
(6 weeks)
SOLUTION

In our solution, we chose to redesign the existing team communication and collaboration features of Canvas LMS. We replaced the Inbox asynchronous messaging functionality by rich instant messaging called Message. Using this service we have also given features to upload documents, set appointments and receive notifications on updated team files or folders.

1. Message Feature
This is the home screen of the Message platform. Users can have realtime conversations with individuals or in groups which was not possible earlier.
Users can have direct realtime communication with their professors, TA, team members or peers
from the same course.
Message has a search feature to search for chat contacts as well as past messages.
There are pre-made project groups where groups can have project discussions. Users can also
switch between groups workspace and group chat using the back arrow.
There are options to set up an appointment or upload files which makes the team work easy.
Team members can accept or reject the team meeting invitations in the chats itself.
Users can also create their own groups.
Users start new chat by selecting the coursework.
Users get notifications on any changes in team files or folders.

With collaboration we improved the Groups feature by introducing shared workspace for team-related work and included third-party application integrations. These new changes are accessible by all of the IU students and will mainly help boost the productivity of students while working within teams thus increasing their performance. We plan to make similar changes in the Canvas mobile app as well.

2. Groups feature
This is the home screen of the Groups feature. It shows all the past and current project groups with their
progress status.
This is the collaborative workspace where users can connect with their IU cloud accounts and create project folders.
This is an example of project folders created using integrated IU free accounts like Google drive and Box.
Instead of files, users can also add links to the documents.
DESIGN PROCESS OVERVIEW
DISCOVER PROBLEM SPACE
Team communication and collaboration efficiency is positively correlated with project success and performance.
Inefficient tools for communication and collaboration leads to increase in waste activities like response time and search time appear. The main reason for performing efficient communication is to reduce the waste activities without affecting the clarity of information.
Canvas is a popular learning platform used by the college students and the tutors making 30+ million users. About 30% of the total universities in USA have adopted the use of Canvas LMS. It is a cloud hosted learning management system from a company called Instructure who provide instructors and students modern tools and resources to empower the learning experience. Canvas also comes with its mobile application and a tablet version.

Below are the screens of existing message and collaboration features of Canvas with drawbacks:
EMPATHIZE WITH USERS
Interviews Key Findings
There are privacy concerns. Some of the messaging apps require you to share your contact numbers. However, some people might not want to share their numbers.
There is diversion of attention and loss of productivity.
When using any social chat app to communicate with team, when you switch to a different conversation it often leads to loss of focus, getting distracted by unimportant messages while discussing something important.
Multiple teams use multiple platforms for communication.
During our primary research, a common finding from our interviewees were that: “Communication for project work usually varies across platforms right from Messenger -> WhatsApp -> GroupMe.” One can't efficiently communicate across all these different channels.
Multiple teams use multiple platforms for collaboration. Some use google drive, some use box and so on. To add to the confusion, there are personal as well as IU provided free accounts on the same platforms. Locating files becomes a headache.
There is no dedicated platform for collaboration, file organization and synchronization for students. Lack of file organization and synchronization leads to confusion, mismanagement of work thereby leading to inefficiencies.
GENERATING INSIGHTS - PERSONA
User is the key person for whom products and solutions are designed. We found the following key user requirements :
  • Want efficient ways of communicating and collaborating with teams.
  • Wish to have a single platform for everything.
  • Want to keep professional and personal communications separate.
DEFINE
How might we redesign Canvas LMS for helping students to communicate and collaborate efficiently while working in teams?
IDEATION
For ideation we conducted multiple white boarding sessions to get ideas on how can we redesign Canvas to make team collaboration and communication efficient. After we got some ideas, we segregated the ideas based on different parameters like feasibility, target audience, productivity, impact and cost.
Solution one
Our first solution is inspired by the Slack messaging platform. In this design we have replaced Canvas features of 'Inbox' and 'Groups' by a single 'Team' feature. Team is a messaging platform as well as a collaborative team space where users can have instant communication with team members as well as integrations with other IU free accounts like Google Suite, Box, Office etc.
Solution two
In the second solution we redesigned the existing Groups and Inbox feature of Canvas to make team communication and collaboration more efficient.We replaced the Inbox asynchronous messaging functionality by a rich realtime communication service called Message. With collaboration we improved the Groups feature by introducing shared workspace for team-related work and included third-party application integrations.
Final Solution- CANVAS REDESIGN

‍We decided to go with the solution two as our final design which we felt was a viable solution. We analyzed that re-designing existing features would be more feasible than replacing the features. Also, there is not much learnability with solution two as compared to solution one.
1. One stop solution for efficient team communication and collaboration.
3. Collaborative Workspace
2. Instant Messaging
User Flow Diagram
Storyboarding
PROTOTYPING

Low Fidelity Prototype Sketches

1. Message Feature
Users can have direct realtime communication with their professors, TA, team members
or peers from the same course.
Message has a search feature to search for chat contacts as well as past messages.
There are pre-made project groups where groups can have project discussions.
Users can also switch between groups workspace and group chat using the back arrow.
Team members can accept or reject the team meeting invitations in the chats itself.
Users can also create their own groups.
Users start new chat by selecting the coursework.
2. Groups Feature
This is the home screen of the Groups feature. It shows all the past and current project
groups with their progress status.
This is the collaborative workspace where users can connect with their IU cloud accounts
and create project folders.
This is an example of project folders created in Google drive and Box. These are the shared
folders so everyone in the team can view and edit them. Everything is accessible from one place.
Instead of files, users can also add links to the documents.

High Fidelity Wireframes

High Fidelity Working Prototype - Using Figma

EVALUATION

This is the phase where we got the high-fidelity prototype solution evaluated by self, users and experts.

➕Evaluation Methods Details

For evaluation we chose to perform following two important tasks:
 1. Start a new chat with group members and peers using from Message
2. Create a new folder using Groups under Files inside your project folder

(A) Self cognitive walkthrough:
It helped us to find the usability issues with the app. It made us understand how easy or difficult it is for new users to operate. By this approach, we divided each task into different steps and asked a set of questions to the users and evaluated the user aspect for our app design. Because of this approach, we were able to do step by step analysis of how users completed the assigned tasks.
‍
Key Findings:
1. ‘Search names’ functionality needs to be improved. Users need to be informed using an information icon that only course mates can be searched. Furthermore, it is essential that a course dropdown is introduced for students to quickly find the names.
2. An additional issue we witnessed was when users visit the groups tab, they get to see two ‘message’ icons - one on the top right and one on the left panel. This can create confusion in students about their usage if don’t know about the difference in their functionalities.
3. Not all the displayed options are clickable or selectable which creates confusion of next. Requires error prevention.
4. Information rich UI. It can be overwhelming for users.
5. Navigation is easy.
6. At some points FAQ could be helpful for users.

(B) Expert evaluation:
For expert evaluation, we created evaluation packets and sent it to the known experts in the field. The packet consisted of Instructions on steps to perform, Link to prototype, task error sheet and questionnaire. After completion of their evaluation on product, we conducted short semi-structured interviews with them for validating the concept and getting overall feedback on improvements.
‍
Key Findings:
1. Navigation not intuitive.
2. Need to remove redundancies.
3. Suggested to keep only selectable dummy data.
4. There are no exit points present at some places. Needs error prevention.
5. The new features will be helpful for students and will make their communication efficient and also improve their productivity of teamwork.
6. Screen fit was one particular issue which was highlighted by all the experts.
7. Students will require hand-holding or guidance in the beginning, to understand the new features.

‍
(C) User evaluation:
For user evaluation, we conducted think-aloud with users while they were performing the two tasks and later interviewed them on their overall experience.
‍
Key Findings:
1. Privacy: Four of the users responded saying that the text size was too huge to read, which compromised on their privacy.
2. Need to improve on navigation.
3. Screen fit: Throughout the prototype, a few of the user interface elements were not visible in the designed screen resolution.
4. Action on files: In the files section of the group workspace, the users expected the files to be downloadable or could be edited in some way, which was missing when they interacted with it. 
5. Workspace: While going about the second task, we observed the users taking a considerable amount of time in creating group files by connecting their cloud accounts.

After the evaluations, the main problems we found are:
1. Privacy Concern
2. Navigation not intuitive
3. Screen Fit issues
4. Needs error prevention‍
5. Walkthrough on new changes

Recommendation:
From the evaluation results, we propose certain recommendations for our social computing product.
1. First, rectifying the text size to resolve the privacy concern of the users as well as keeping it consistent with existing messaging systems to ensure familiarity.
2. Our next recommendation is to give the user complete freedom by implementing appropriate navigation and adding exit points, thus making it more intuitive.
3. Further, we aim to resolve the screen fit issue so that users don’t miss out on important elements in the product.
4. We will also eliminate error-prone conditions by checking for them and present users with a confirmation option if required.
5. Our final recommendation would be providing an overview or a tutorial to guide the users about the new features. 

Design Challenges
Learnings
1. Define the right problem : We had hard time defining our problem. When we started working with our problem space, we kept researching on issues with communication and collaboration, not thinking about that they both are broad terms. Communication is exchanging information as collaboration is working together to create something. In reality, our problem was more of technical than the terms, it was issue with the team communication and collaboration working styles due to no uniformity in tools usage. Due to the confusion in the problem space, every member had their own perspective of problem definition.
‍
3. Sketching vs Prototyping: It is important to have the low-fidelity design sketches ready before you start making the high-fidelity prototype. It saves a lot of time and is easy for making changes.
‍
4. Prototype should be simple and intuitive for testing: During our product evaluations, many users noted that at some places the dummy data could not be selected or it was not clickable. Some found the UI overwhelming.
References & Attribution
Link to document ➤

VIEW OTHER PROJECTS

 Back to top ⬆ 
Copyright © 2020 Ulka Patil