top of page

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.



Omar Aboulubdeh
Omar Aboulubdeh
Aug 02, 2021

We have done something similiar:

please give us your feedback


Israel Vega
Israel Vega
Nov 04, 2020

it is possible that you share us the changes made in the css?

bottom of page