Beem is a decentralized video streaming platform that offers live video streaming and storage services. Along with that people can build their own custom video application built on Beem protocol.
My Role
In early 2023 I built some more connections in web3 communities and was contributing to different projects I found out about this great project Beem building a decentralized video streaming platform and looking for a designer to work with them.
One of the members of the team approached me to re-design their application and the internal design system.
My role in this project was to give it a completely fresh look as the existing design was making the application look more like a movie streaming app. So, the goal was to give the application a look that meets product goals.
The new design goals
As a new player in the video streaming market, it faced stiff competition from established players like YouTube and Twitch.
The challenge was to update the existing design system that not only differentiated the app from its competitors but also appealed to a broader audience. The app needed to be easy to use, accessible, and visually appealing while incorporating features unique to them.
In the previous version of the application, the design appeared to be more like an online video/movie streaming platform. Whereas their goal is to make a platform for content creators that gives them full ownership of their content by creating and setting up their own video application without code built using Beem protocol. Another major focus was redesigning storage and payment flow so that creators can choose how they want to earn from their content.
Research & Explorations
As we began working on the project I took ownership of design research and competitor analysis, whereas the user interviews and other benchmarking were done by the Product Managers that I was working with.
Researching how industry-leading brands such as YouTube and Twitch approached this dilemma strengthened our determination to turn our vision into a reality. I was also provided with spec documents for different features and overall design improvements that the client was expecting.
We found that users are looking for a personalized experience that is tailored to their interests. Scope of improvement in different components to make it simple but informative, improve experiences in pages like video upload, creating events, setting up storage, payments, etc.
The design system
From the start, I strongly believed that the key to our design system’s success was the unification of UX/UI across all the platforms, allowing for a system that could be easily maintained on the design side but also on the development side.
To avoid a split design system which is usually old-fashioned and cumbersome most components would become unified, some were deliberately left “native” in order to keep the familiarity associated with each platform. Some components evolved into “hybrid” versions that mixed custom elements with platform-specific ones.
In addition to those considerations, I believed that the Beem brand should be the prominent driving force behind our designs. Having our designs aligned with Beem's brand would mean that our users would be benefiting from a holistic experience across Beem's desktop & mobile products.
Because the app was constantly evolving, our secondary criteria for the design system was to create a flexible architecture that could adapt to future changes easily and seamlessly.
Together with the product managers, and developers, we defined a generic structure upon which we would build the system - essentially breaking down all elements into their most atomic form. Most importantly, the most common elements like typography styles, colors, inputs, and buttons would be detached from any specific context.
UI Components
As a testament to its success, the design system has managed to support very large-scale changes such as updating the app’s font, adding support for mobile, tablets, and 4k resolution screens, and even things such as accessibility for navigation, video upload, storage, and monetization that are being applied app-wide.
We estimate that over 90% of the app is being built using components from the design system, while the remainder is custom components that have not met the criteria for being added (one of the components that are not reused by any other teams). The system has proven its power to increase velocity and consistency for all teams.
Learnings & Retrospect
For the past few months, we were working on this project, we went from a movie-streaming-like video application to a platform more focused on creators and a custom video streaming service application with full ownership over the content and decentralization.
Today the application along with the design system is being developed and we are still making more updates to it as we move forward and plan our future roadmaps.
At the end of the day most importantly, creating a platform that gives creators their ownership over the content, choosing the way they want to earn, and flexibility of creating their own video application with ease has been the highest reward of all.
