BRIGHTSPACE

BrightSpace is the Toronto District School Board Online Learning Platform managed by DL2

PROJECT OVERVIEW

This is a real-life independent case study, where I was trying to figure out why students and teachers were complaining that they were having many problems using the new online platform since most classrooms have moved online due to the pandemic. I wanted to investigate what the issues were and if there were any solutions to solve them. 

PROJECT TYPE

Re-Design existing web platform

TOOL USED

Adobe XD

PROTOTYPE LINK

 

PROCESS

  1. Interview users: Teachers, Students & Parents

  2. Conduct a survey to collect  qualitative and quantitative data

  3. Understand users through empathy mapping and persona

  4. Find the problems with the current designs

  5. Define possible solutions

  6. Wireframe & Prototype

  7. Usability test

Give it a few seconds to load...

You can interact with the image. Go ahead try it out! 

 

Empathy mapping

trying to understand the users' points of view

EmpathyMap.png
  1. Teachers

  2. Students

  3. Parents

  4. All

 

User Persona

Focusing on students since they have the highest participation rate in this study

UserPersona.png
 

WireFrames

Improving the site functionality by using layouts that maximize usage of space while maintaining its esthetic look 

WireFrames.png
 

Prototype

The prototype focused on where the improvements are needed, not the entire website

Screen Shot 2021-03-25 at 3.52.03 PM.png
 

REDESIGNING TO IMPROVE CURRENT ISSUES

CURRENT DESIGN & PROBLEMS

The entire main page was just for log-in and it has confusing multiple students' log-in slots, and there was no link to access help or get additional information.

LogIn.png

RE-DESIGNED:

 

Main Page has additional information and clearer sign-ins

TDSB Main.png

BEFORE:

Confusing multiple ways to do just getting into the class home page and the screen is mostly empty, wasting space. Students have to click on it multiple times to get where they want to be.

HomePage1.png

SOLUTION:

Students can see their classes while also checking their schedules and see the announcement on the home page without too much clutter. They don't have to click multiple times to see the information or to get where they want to be.

Students Home Page.png

BEFORE: 

The logins were completely different. Even the logos were so different they look like from two separate companies.

Sign-In 2.png
Sign-In 1.png

SOLUTION: Login screens should be the same across the TDSB's website

 DESIGNS BEFORE AND AFTER

CONFUSING MAIN PAGE 

The entire main page was just for log-in and it has confusing multiple students' log-in slots, and there was no link to access help or get additional information.

LogIn.png

RE-DESIGNED

Added important information with clearer sign-ins, and the "Help" option for support.

TDSB Main Page

LOG IN NOT CONSITENCE

The logins were completely different. Even the logos were so different they look like from two separate companies.

Sign-In 2.png
Sign-In 1.png

SOLUTION

Login screens should be the same across the TDSB's website

LogInAfter.png

WHY AN EMPTY PAGE JUST FOR ONE FUNCTION?

Once the students log in this is what they see. An empty page just so that they can select their classes. 

HomePage1.png

SOLUTION

The first page is redesigned and organized so that the class information is clear and easy to understand. In addition, the class schedule and announcement are right on the main page, saving students time and clicks.

Students Home Page.png

CONFUSING ICONS & PAGE FUNCTIONALITY

The course main page is not useful, and students are confused with the use of similar icons for completely different functions. They don't know where to go for their Sync classes and can't find their assignments.

HomePage2.png

SOLUTION

The course pages functionality can be improved by changing the icons and reorganizing them in a way that students can easily access their course information such as schedule, assignments, and grades

French Home – 4.png
Content – Expand.png

Reflection

I find users research and usability testings are the two most essential processes in product design and can not be skip. Qualitative and quantitative data are helpful when it comes to knowing who our users are. At the same time, usability testing can help us understand our users' behaviours, find our design flaws and make improvements based on our findings.  For example, students' ages can make a difference in how they use the user interface; therefore, our design strategy must match each age category.  

 
 

Next Project