E-Learning Platform

For Mac, PC, and Tablets

Situation

Because of the COVID-19 pandemic, experts have recommended social distancing as a measure to mitigate the spread of the virus. This lead Companies and organizations to switch over to remote working. Consequently, more video streaming platforms are in demand.

Overview

E-learning is a platform that allows teachers to invite students to online video-sharing classrooms. The uniqueness is that teachers can teach using the electronic trackpad as a replacement for the traditional whiteboards in the classrooms.

What can be corrected

Online video streaming platforms don’t offer features that are accessible to teachers with limited internet know-how. Because they focus more on companies and big organizations in their designs. For example, teachers could choose between traditional hand-written whiteboards instead of electronic keyboard-typing. This feature is my focus in this design. (Early 2020 research)

The challenges

Not enough teachers with keyboard-typing skills at the moment and education ministries will still need time to train more teachers.

Possible solution

Design more video-sharing platforms to help teachers cope with the new teaching ethics. Students will also be able to learn from the comfort of their homes regardless of distance and location.

THE DESIGN PROCESS

Competitive analysis

User persona

Wireframing

Prototyping &

Usability testing

1

3

4

5

6

7

8

2

User interviews

Information Architecture

Hi-fidelity

mock-up

Design

iteration

My role

Concept ideation,

Researcher & Designer.

This project lasted for 6weeks and I used Adobe XD throughout this project

COMPETITIVE ANALYSIS

I went online to search for what other platforms are already doing about this situation. Popular platforms like Zoom and Skype were very good examples for me.

what I learned

They are both amazing video-sharing platforms.

But they do not have features that allow teachers to use

hand-writing trackpads that will feel like the traditional

whiteboards in classrooms which is my main focus in this design.

USER INTERVIEW

Driven by my main focus, I wanted to know about user struggles and preferences in virtual learning-related platforms. I recruited three participants and drafted open-ended questions to help me gather insights about a possible solution to virtual learning, especially for older generation teachers with limited internet knowledge.

Interview participants

Luang 32yo teacher

"I’d love to be able to record classroom sessions and upload them for students. I also like settings that give me control over my mic, audio system, and screens"

Ralph 35yo

tutor

"I like it when classroom history can be saved somewhere for reviews"

Vicky 41yo

teacher

"It will be great to have an alternative way of writing during the class sessions, perhaps it will make it feel like the real classroom. Else I may have to do a bit of training on my keyboard typing skills so that I can cope with my young students on internet issues"

What I learned

All the participants have one struggle or the other
They think having more virtual learning platforms is a good idea
Older generation teachers prefer hand-writing features for lecturing.
All participants shared concerns over a fast internet connection.
They shared concerns over platform parental control of students.
They want to be able to keep records of student compliances and classroom participation. Etc.

USER PERSONA

Name: Lizzy Okoro

Age: 32YO

Location: Germany

Occupation: Teacher

Status: Married

Based on the interviews I conducted, I decided on a primary persona that will help me stay on track with user empathy and design decisions.

INFORMATION ARCHITECTURE

User flow

I structured user flow to organize the steps in a way that allows users to complete tasks from an access point to the success criteria. In this case, from signing in as a teacher to starting a classroom session using the electronic whiteboard/trackpad instead of the keyboard to deliver lectures.

Wireframe

I started out using pen and paper to create sketches of the key features of the content pages. This process was quick and allowed me to focus on high-level functionality. Once the basic functionality was established, I translated my designs from sketches into basic greyscale visuals using Adobe XD.

Hi-fidelity mock-up

& prototyping

The designs included more detail and provided a preview of how the real UI elements like the typography, the color, button, and icons would look and be placed. Then I connected the hotspots to activate the interactive prototype of the design and be ready for testing.

USABILITY TESTING

Since the main goal of design research is to build something useful for real users, I needed to evaluate the usability of the digital prototype. Firstly, I posted it on a designer slack community and also recruited 5 users to further observe how they interact with the design prototype.

Pain points

I’d like to be able to recover my password when I forget it.
To explore the website as a guest,
I’d like to have a button on the
welcome screen instead of just “Explore”
The green color on the welcome screen doesn’t march with the blue very well. Best to make it consistent.
“Select all” and invitation texts are a bit confusing on the student profiles. Perhaps the start button can serve as the invite button too.
Class history can be placed somewhere else to decongest
the screen in general.

SOLUTION & ITERATION

Before

During the usability testing, users struggled to know whether the "explore" was clickable.
The green color didn't fit with the navy blue color in the classroom screens.

After

A red call to action button has been added to create more emphasis and make it clear for users to recognize
The green color has been changed to a navy blue color, to give the entire user interface a consistent look.

Before

No way to recover passwords
No sign-up possibility.
The green color didn't give the design UI a consistent look
The back button was not intuitive in this position.

After

Way to recover password added
Way to sign-up as a new user is added
The green color changed to navy blue to give the design UI a consistent look
The back button added to the elevated card area so that it can be more intuitive.

Improvement summary

A way to recover a password has been included in the login screen.
A button has been added to the welcome screen so that users can easily recognize it as a CTA button.
Parts of the green-colored components have been changed to blue for consistency.
“Select all” and invite buttons are now separated so that users can differentiate them easily. Meaning that the start button now serves as an invitation button.
Finally. the class history has been moved to the main menu where teachers can separately navigate to.

The e-Learning platform

Here is how teachers can switch

between keyboard and trackpad

Interactive prototype.

Thank you.

VIEW MORE PROJECTS