top of page
MacBook Pro 16.png

ONLINE LEARNING PLATFORM

Background

As part of my User Experience Design fellowship, we were tasked to come up with a product that had a purpose: to help others. Being an educator at the time and COVID-19 transitioned regular schooling to being completely online, I had one thing on my mind.

Remote learning is hard on everyone involved; students, parents, and educators. Having multiple devices open along with a myriad of tabs up and running is overwhelming and the fear of accidentally closing them all induces a ridiculous amount of anxiety on top of the current state of education.

I wanted to create a product that could integrate all of school's apps and communication software in one place. It should be so easy to use a student could navigate it with very few issues.

My role in this was the sole designer and researcher. This project took place over two months as I learned how to conduct user tests & interviews, gather data, and create the product using Figma.

The original design was formatted for laptop sized screens for either Mac or PC.

Overview

The Challenge

My Role

Research

I interviewed various educators (elementary, middle, high, public, and private) and sent out surveys that asked how they use technology in their remote teaching practices.

All mentioned the anxiety of having 3+ devices open while trying not to have the internet crash or accidentally close an important page. 

One of the pain points also being that not all of the platforms they use can be found in one place, having to log in to several different accounts to teach.

Students and educators need one (1) platform for all online learning needs/resources because there are currently too many and don’t integrate with each other.

Affinity Mapping

RL Affinity Map.png

Comparative & Competitive Analysis

Trying to find something similar to what I wanted to create was a lot harder than expected. I managed to find one app that did most of what I was looking for but didn't hit all the marks.

Below is the comparative analysis of the desktop app Shift.

Competitive Analysis.png
Research

Define & Ideate

With the data and knowledge gathered from initial research, I created some user flows, a feature prioritization, and some user personas to start the design process.

User Flows

RL Platform User Flow.png

Feature Prioritization

2X2 Matrix.png

Peronsas

Define
High School Student

Behaviors:

  • Remote learning start to school year

  • Doesn't sift through emails since there are too many; misses important information

  • Using school-given laptop

  • Wakes up and turns on laptop, barely leaves bedroom

Frustrations:

  • Planning for college/after high school graduation but has no clue what they want to do/study

  • Parents are somewhat involved but needs an extra push to stay organized  and motivated

  • Leaves inbox mostly unopened

Goals:

  • One place to find important information and class assignments

  • Can contact teacher easily

  • Calendar updates through Google and notifies when assignments are due

Educator

Behaviors:

  • Remote learning start to school year

  • Wakes up early and goes to bed late preparing lessons/activities for class

  • Reaching out to students/parents to ensure remote learning experience is going okay

Frustrations:

  • Tired of having 23 tabs open on laptop

  • Deadly afraid of closing the wrong thing or all of them accidentally

  • Uses school-given laptop, personal laptop, and iPad to teach

  • Students/parents don't understand home/school/work boundaries

Goals:

  • One place for all things remote learning

  • Maximum of 2 devices (laptop/iPad or laptop/monitor)

  • Everything integrated in one place to input grades and attendance

Sketching & Wireframing

Screen Shot 2022-02-03 at 1.15.57 PM.png
Low Fidelity Wireframe.png

Initial sketches show desktop screens with communication, grading, and curriculum as main aspects.

Low-fidelity wire frames focused on identifying the structure of the product. Integrated into the system is the Google suite (most common amongst educational institutions).

Sketch

Testing & Iterating

Once the medium-fi prototype was ready, I conducted usability testing with people who were and were not educators to see if the product was simple enough to use by someone who wouldn't use it.

Users were tasked with logging in as a student and uploading homework and then logging in as an educator and scheduling a meeting with a student using the calendar.

Results:

  • Users gave up after two task requirements

  • 25% misclick average

  • Users were not abiding by the task and just wanted to use the product freely

Learnings:

Most users suggested making the buttons more obvious, whether it be with an adjusted color or larger text size. Because most of the users who participated were not educators or students, it was hard to translate their feedback on usability when most did not comment on its actual purpose; to make remote learning easier by having everything needed in one place.

Test

End Result

Result
Conuclusion

Conclusion

For my first project, I learned many skills throughout the process; the main one being patience.

After the usability testing results came back and feedback from users were gathered, I could not understand why some would give up so quickly.

The intention of this product was to make both student and educator lives easier in a remote learning setting. Even with snow days or school closures, this platform could be used to house lessons/assignments so as not to impact the length of the school year.

For future changes, some revisions to the styling would need to be done along with iconography.

bottom of page