E-Learning Platform
For Mac, PC, and Tablets
iphone-11-mockup-scene@2x copy.png
ipad-pro-mockup-scene@2x (2).png


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.


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.


Competitive analysis

User persona


Prototyping &

Usability testing









User interviews

Information Architecture





Concept ideation,

Researcher & Designer.

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

My role.png

My role


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.


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" 

Avatar 107

Ralph 35yo


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

Avatar 109

Vicky 41yo


"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.


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.


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.

Group 14.png
Group 15.png
Group 15.png
Group 17.png


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. 


Screenshot 2020-09-01 at 11.34.12.png

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.​



Before Distant learning Website Welcome.
  • 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 distant learning Website Welcome.p
  • 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 Teacher Login form.png
  • 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 Teacher Login form.png
  • 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

e-learning gif.gif