/ Blog /How 100ms designs Virtual Learning tech that "Just Works"
October 21, 20226 min read
In a post-pandemic world, most of us spend more time at home. And to improve our lives, companies are solving challenges in virtual learning/live classrooms, events, telehealth, fitness, among others.
100ms is helping companies that want to launch fast and learn fast with an all-around solution that works right out of the box.
That way, companies can focus on the core aspects of their business instead.
We started with solving challenges in the education technology Ed-Tech space. Let’s take a deep dive into how we designed EdTech experiences that “just work”.
Understanding everyone’s needs
Product designers work at the center of business, product, technology, and users. Each stakeholder has their needs — from teachers to students, product managers to engineers.
The closer to reality we operate, the better we can serve our users.
Read our popular blog on how to add Live Interactive videos to your product.
We spoke to product people and teachers working at EdTech companies. Here’s what they want:
🪡 Tailor-made products: Edtech companies are using clients like Zoom and Google Meet as ad hoc solutions, but want a more tailor-made product for teachers and students.
😌 “Just works” experience: EdTech companies want their teachers to have a seamless experience while presenting slides, whiteboarding, and annotation. Screen sharing and remote browsers are frictionless ad hoc solutions.
🔐 Security and privacy: Securely inviting people, protection against Zoombombing.
📊 Analytics: Rich analytics and complete control over user data.
🍸 Quality of life features: Virtual backgrounds, “end room for all”, “mute all”, and features designed to delight end users.
🧑🏻🎓 Serving end-users: Keeping students and parents happy, of course!
We classified stakeholders into two groups and identified their needs:
Translating needs into features
Understanding the needs of all stakeholders gave us insights. Every feature would now have a solid rationale behind its existence.
Design and Product worked together to make a prioritised feature list:
Keeping the needs of stakeholders in mind, we invested time in building a robust design system that could scale across any configuration of features.
Here’s how we did it.
Seen one of these plates in the Buffet halls of any typical university?
This thoughtfully designed plate can organize everything from Salad to Soup and from Salmon to Risotto. Moreover, it’s easy to maintain, stacks well, and lasts a lifetime.
It limits chaos without sacrificing user experience.
Taking a leaf from this, we bet on this constrained—yet well-considered—layout to handle all our use cases:
It worked well, and we could even skip the sidebar in many cases.
Continuing with the theme of keeping tight constraints, we designed a few components we could reuse in multiple cases. To maximize reusability, we made sure to:
For example, here’s our list item component:
This component could be used anywhere by carefully selecting the text style, height, padding, and icon size. It could even reuse the generic input box as a search field and still look like a consistent, cohesive whole — no extra component needed.
Fewer components ➡️ less code ➡️ fewer bugs ➡️ happier users!
We needed a workhorse icon set and typeface that could handle anything.
We licensed Streamline Icons and also made a few icons from scratch.
And we used Inter as the default typeface with a small set of typestyles.
By thoughtfully picking defaults, we own the responsibility to make a great experience instead of deferring it to the user. If they like, users can override them with their preferences, but we hope they won’t need to very often.
Opinionated defaults let users spend precious mental energy on more important action items.
Let’s experience the product as Karen — a physics teacher conducting a remote class for 6 students.
You follow a link that brings you to a “pre-join” screen. You can adjust your settings and check your appearance before joining.
Two punctual students have been in the waiting room for some time already. You let them in.
Some students are yet to switch on their videos. You note that Barry is experiencing internet issues so his video and audio might be choppy.
You start a Google Slides presentation directly in the app. No screen sharing or window management is required.
You invite students to draw on the slide along with you, making it a fun and interactive experience.
🌟 Delightful detail: on the top bar, note the indicators for “active speaker” and “poor internet connection”. With a single glance, find out whose mic is leaking background noise, or whose slow internet is causing choppy audio.
You close the presentation and continue teaching.
Some students have raised their hands to ask doubts. You keep an eye on the chat to stay caught up.
It’s time for Alex to read out his homework assignment to everyone.
You place him in the “Spotlight”. He is now the center of attention on every participant’s screen.
Class is finally over.
Once you end the room for everyone, you are taken to the “post-leave” screen.
🌟 Delightful detail: Some flowers to remind you to go out and take a walk!
For a teacher, it’s important that they see all the students at once and have full control over the class. But for students, it’s important that they see the teacher prominently.
Layouts for those in the Student role can be set to allow only the teacher on stage.
Keep things simple with a light theme.
We like square tiles because they focus on the face and reduce background distractions, but you can go wide if you like.
We made the monograms look so good you’ll want to lick them.
Use virtual backgrounds to reduce distraction and preserve privacy.
We hope this article has left you with new insights into building robust and modular products that “just work”.
To learn more about 100ms, click here: www.100ms.live
See all articles
February 21, 20226 min read
Adding AR Filters in a 100ms Video Call - Part 1
Want to build a video call app with Snapchat-like filte...
March 2, 20227 min read
Building a FaceTime app for iOS using 100ms
In this blog, we will take you through a step-by-step g...