Design System - Creation and Maintaining

Bitmovin, a leading video infrastructure company, needed a design system to create a consistent and intuitive user interface across their products. The design system project involved establishing a cohesive set of design principles, guidelines, and reusable components that could be applied to various products, from video encoding to analytics.

By standardizing design patterns and improving the user experience, the design system project improved Bitmovin's brand identity and helped users navigate their products more easily.

In addition to analyzing existing design elements and patterns, I leveraged design tokens to create the design system components. Design tokens played a crucial role in ensuring consistency, scalability, and efficiency throughout the design process.

Design tokens allowed for efficient and scalable design updates. By defining and organizing design attributes in a tokenized format, it became easier to make changes across the entire system. For example, if a brand color needed to be updated (and we did change brand color from so called "baby blue" to "electric blue"), I simply modify the corresponding design token, and the change would propagate seamlessly throughout the entire product.

The design system included a comprehensive library of design components, that are based on the popular Mantine component library, which provided a solid foundation for the system while also allowing for flexibility and customization.

I have developed a color palette and a set of guidelines for spacing, layout, and accessibility, ensuring that the design system was flexible and adaptable for a wide range of use cases.

The application design system I developed was designed to cover a wide range of different screens and scenarios, including demo pages, functional pages, documentation, and more. Recognizing the diverse needs and contexts in which the application would be utilized, I ensured that the design system was comprehensive and adaptable.