1. Home
  2. /
  3. Blog
  4. /
  5. Beyond Video: Designing EdTech Experiences That “Just Work”

Beyond Video: Designing EdTech Experiences That “Just Work”

October 20, 2021

Beyond Video: Designing EdTech Experiences That “Just Work”

In a post-pandemic world, most of us spend more time at home. And to improve our lives, companies are solving challenges in remote education, 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”.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Understanding everyone’s needs

Product designers work at the centre of business, product, technology, and users. Each stakeholder has their needs — from teachers to students, and from product managers to engineers.

The closer to reality we operate, the better we can serve our users.

*Register for the workshop here - https://bit.ly/3oW9ttw

What Edtech companies want to achieve

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!

Who are the stakeholders?

We classified stakeholders into two groups and identified their needs:

  • Primary stakeholders: C-suite executives, product managers, or engineering managers. They are the primary decision makers working with 100ms.
  • Secondary stakeholders: developers, teachers, students, and parents. Their needs heavily influence the primary stakeholders.

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:

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Thinking in design systems

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.

Smart tradeoffs to limit chaos

Seen one of these plates in the Buffet halls of any typical university?

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

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.

Measure twice, cut once

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:

  • Make components robust by designing every possible state
  • Make components modular by carefully crafting them to be compatible with each other

For example, here’s our list item component:

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

By carefully selecting the text style, height, padding, and icon size, this component could be used anywhere. It could even reuse the generic input box as a search field and still look like a consistent, cohesive whole — no extra component needed.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Fewer components ➡️ less code ➡️ fewer bugs ➡️ happier users!

Choosing a typeface and icon set that “just works”

We needed a workhorse icon set and typeface that could handle anything.

  • It had to work well at small sizes and in other constrained scenarios
  • It had to blend into the interface and not call attention to itself
  • A unique personality was not a priority for us

We licensed Streamline Icons and also made a few icons from scratch.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

And we used Inter as the default typeface with a small set of typestyles.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Opinionated defaults

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.


Bringing it all together

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.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Two punctual students have been in the waiting room for some time already. You let them in.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Class begins.

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.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

You start a Google Slides presentation directly in the app. No screen sharing or window management is required.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

You invite students to draw on the slide along with you, making it a fun and interactive experience.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app
🌟 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.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

It’s time for Alex to read out his homework assignment to everyone.

You place him in the “Spotlight”. He is now the centre of attention on every participant’s screen.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Class is finally over.
Once you end the room for everyone, you are taken to the “post-leave” screen.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app
🌟 Delightful detail: Some flowers to remind you to go out and take a walk!


Endlessly configurable

Different layouts for different roles

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.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Light theme

Keep things simple with a light theme.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Wide tiles

We like square tiles because they focus on the face and reduce background distractions, but you can go wide if you like.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Classic monogram avatars

We made the monograms look so good you’ll want to lick them.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Virtual backgrounds

Use virtual backgrounds to reduce distraction and preserve privacy.

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Screen sharing

educational app, edtech app, edtech video, video app, edtech app design, design ideas for edtech app, how to design edtech app

Thanks for reading

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.


Like what you’re reading?

Get Audio/video engineering tips straight into your inbox