E-Learning Platform
For Mac, PC, and Tablets
.png)
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
Concept ideation,
Researcher & Designer.
This project lasted for 6weeks and I used Adobe XD throughout this project
My role
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
