Game in progress alert UI

Adding a new component variant to a design system ~

When you have a design system, I always try to enforce designers to stick to the components that are established. But sometimes, we will find use cases that have never been accounted for, yet.

Here is one example of a special circumstance where we identified that no other components were appropriate and made the decision as a team to add a new modal variant.

This modal is specifically designed to interrupt the user. It is intrusive and has no exit button by design. Why did we do that?

Well, Knowledgehook is a classroom app that teachers use with their class. Like any app, a kid could stray from the instructions of the teacher. This could be a pain point for teachers if they are trying to run an activity with all their students, but are having difficulties getting everyone on the same page. This design needed to be extremely intrusive to get all students to keep up with their teacher quickly. In this circumstance, 2 different users have different goals and motivations, the product needs to decide what to prioritize. We decided to give control to the teachers in their environment.

Again, this is not a common practice in most apps. It's important to identify your product's use cases, and design with consideration of all users.