Designing Virtual Classroom Space for LQ live

Mohd Bilal
3 min readJul 12, 2021

--

A story of how I made the Virtual Classroom experience more fun and engaging for the students in grades 1–5

Design Brief

To design an online classroom space by gamifying the experience and enhancing engagement by making learning fun and accessible

It consists of the following elements and sections

  • Leaderboard
  • Activity-based information
  • Teachers window
  • Students window
  • User profile (Avatar, Name, and more)
  • Control panel (Mic, Video, etc)
  • Star, Coins, and Stickers allocation
  • Chat window

🔖Wireframe

Low fidelity wireframes

🎗 Final design

LQ Live Classroom
Classroom

Prototype

Prototype

🎖Gamification workflow and its elements

Allocation of Stickers

Stickers would be elements to be given during the session to make the session interesting and fun. E.g Thumbs Up, Flash, etc.

Allocation of Coins

Coins can be earned through activities. They can also be given by the teacher.

Allocation of Coins

Allocation of Stars

Allocation of Stars

Enabling Compact mode

The motive is to Reducing the streaming cost in the case of more than 100+ active students in a classroom

During the compact mode, the user can only see his own video on-screen; the rest all other student’s video gets closed for others

Compact mode

Iterations

Thank you for reading till the end! ⚡️If you like the work we have put in, don’t forget to long-press on the “clap” icon! 👏🏻

Are you a parent or student from grades 1–5 and Interested in experiencing the design in real? Book your free trial now

Feel free to reach out to me for any questions, or collaborations or if you have any suggestions/feedback I would love to hear or just to say Hi! ✌🏻

Let’s connect on LinkedIn and Twitter. ⚡

--

--