Redesigning the BigBlueButton Classroom UI

BigBlueButton. A web conferencing system designed for online learning. It has everything you would expect in a commercial system including real-time audio, video, screen sharing, slides, polls, shared notes, whiteboard, and breakout rooms. Thanks to the open-source license, anyone can setup their own BigBlueButton server.

Current UI. Image: Blindeside Networks

What was the design challenge?

Our challenge was to redesign the interface without any major development hassles.

When a client approached us to make the interface better without any development hassle, we had few options. We made small changes might make the user experience better as well as look good.

Redesigning The Interface

We changed up the interface by only changing the CSS, the overall look was made more and sleeker and cleaner.

In the current interface, to identify the moderator, the user icon of the moderator was square and other users circle. In our version, we've placed a star on the user icon of the moderator, which will make it easier for the user to identify the moderator.

The public and private chat were also redesigned to be more visible and easier to read.

The right side of the screen (presentation area) was made more spacious with the presentation giving more space between webcams and the presentation slide.

The buttons for downloading the presentation file and fullscreen buttons were made more visible.

Overall design-wise, the buttons were made bigger, the font was changed and colors also were changed to be more vibrant.

It was a great learning and really an interesting and wonderful experience to redesign the interface of BigBlueButton. In the future, when we have more development help, we would love to make the UI and UX more friendlier.