Improving Collaboration in Learning Management System

Designing a tool to promote collaborative projects between DePaul University students.

Introduction

D2L coLab is an app designed to allow students to communicate about group projects. The app is intended to help in-class and online students collaborate on assignments. The app will integrate with the D2L (Desire to Learn) learning-management system, which is used by universities nationwide. The app gives students the ability to set up video meetings with classmates, participate in online chat sessions, have easy access to assignments from instructors, collaborate on shared documents, and assist with project management by allowing students to create and assign tasks to other team members and manage a team calendar. The app is available on both desktop and mobile in order to meet students where they are.

Role

Personas

User Testing

Wireframing

Assimilating Report

Team

Kathleen Domines

Anna Markiewicz

Natalie Roman

Samantha Wanamaker

Duration

8 weeks

Tools

Figma

Project Goals

Create an effective way for students to communicate with other students in their classes
Ability to have video calls through the app
Create a way to facilitate group work through the app
Provide a way to add group tasks in the in-app calendar
Give ability to prioritize assigned work from class and assigned group tasks
Ability to add users’ availability schedule to the in-app calendar
Provide a checklist of assignments and tasks to help keep track of what needs to be done
Facilitate the interactions between in-class students of DePaul university with their online counterparts

Design Tenets

These are the guiding principals our group kept in mind throughout this project:

Make it easy to access the features needed by the user
Make the number to steps needed to achieve a goal minimal
Users should be able to gather information on a page with a glance
Make it easy to collaborate, communicate, and coordinate

Low Fidelity Wireframes

Our team used a design charrette to begin our initial design process. A design charrette is a collaborative technique where each member of a group prepares designs to compare and contrast. This allows each member a voice in the design process and helps to reach a consensus. Each member of our team created a low fidelity wireframe for mobile and desktop applications and chose features we liked best from each of our designs. When we came to a decision as to which features we should incorporate into the product , we created one more final sketch.

Mid-fidelity Prototype and Usability Testing

Using the wireframe sketch, we moved on to creating our initial mid-fidelity prototype. Keeping user testing in mind, we decided in order to keep the length of testing to a reasonable amount and to get the best feedback, we would focus on the most important aspects of our app - messaging, with video call/meeting set-up features, and the calendar, with the ability to create tasks for group members and set up meetings.

Usability Testing Tasks

We asked our participants to complete four tasks:

Set up a meeting in the chatroom
Set up a meeting via the calendar
Assign a task to team member via the calendar
Assign a task to a team member via a report (an assignment)

The first two tasks are similar as we created two different ways to create a meeting in our wireframes and we wanted to test which method the participants would prefer.

We recruited six participants (3 participants for each mobile and desktop prototypes). After completing each task, we asked the participant to rate it's difficulty on a scale of 1-10 with 1 being very easy and 10 being very difficult. Our average for both desktop and mobile application were low, but had room for improvement.

High Fidelity Prototype

Taking the feedback received from the usability testing, we iterated on our design.

Before

After

Improvement 1: Calendar

A recurring comment among the participants was the plus icon used in the messaging screen to set up a meeting. One tester had explained that “...having the option to add an audio or adding a photo seemed logical to put inside the plus icon… for setting up a meeting it seemed out of place.” We decided to place the meeting feature as its own button.

Before

After

Improvement 2: Plus Icon

Another comment was the lack of contrast of the plus icon in the calendar screen. The team decided that green would be a great contrast color against the white background and gray text and will indicate to the user that it is an interactive element.

We also added a create icon in the desktop version of the calendar as well. Some participants found it difficult to finish the task involving the calendar as they did not notice the plus icon on the bottom right. So we moved it to a more prominent place at the top of the screen and gave it a brighter color as well.

Before

After

Improvement 3: Tasks

The last general feedback given by participants involved the calendar menu. Many remarked that combining self tasks and group tasks into one navigation section would be better.

Retrospective

If we had more time I would have liked to start out with interviews to really dial in to what users would have wanted in a product like ours
More design iterations would have helped to flesh out areas that were still clunky such as the assignments tab where a lot of participant confusion occurred
More users testing to see if our new design was effective in tackling the problems that were found from the first test
I enjoyed using the design charrette as it was a technique I’ve never used before. It helped to narrow down on the features we wanted in our project and brought up points to consider. This was a good way to gauge everyone’s expectation for the app and to make sure that we were all on the same page before proceeding forward.