Over the past 2 years, we have collected a huge amount of user feedback regarding the experience of our product. The time has come were we translate the feedback into new product features. In order to update the platform in a consistent way we decided to create a solid design fundament first. This would allow us to work more efficient in the future and create new features and components much faster.

But the benefits of our system go way beyond UI/UX consistency. We greatly accelerated and scaled our development, improved our product quality, and greatly improved work between developers, designers, and everyone else.

By letting everyone of our team create and share components in a collaborative way, we are now able to achieve faster and wider adoption of our design system.

‍

Color Palette

We have structured our color palette into 5 different categories. These are the colors that are most frequently used across our user interface and imparts a distinct identity to the product. While the elevation colors are mostly used for the background of different components, the primary color will only highlight interactive elements on the platform that the user can actually click on.

‍

Typography

The Source Sans Pro is the main font in our system. It is highly recommended to use for digital interfaces, because it is easy to read even when the text is very small. We have defined a certain hierarchy to make sure that the components stay consistent throughout the platform. Every size has a certain task to fulfill so everyone of the team knows exactly when to use them correctly.

‍

Spacing

We use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs. This scale is applied and used within all Stagecast components.

‍

Buttons

A button triggers an event or action. They let users know what will happen next and are a crucial part of allowing the user to take decisions on our platform. We have defined three different color types, two different sizes and many variations with and without icons that become important when we want to highlight a specific task.

‍

Dropdown

A dropdown allow users to select one option from a temporary modal menu. They are often used, when a user has several options to choose from. Therefore we have defined two variations, that can be brought into play when a user either wants to select one specific option or wants to filter out several options.

‍

Illustration

We have created a set amount of small icon illustrations that are mostly used to help the user understand complex tasks and make the product environment appear more friendly.

‍

‍

Components

All of these design elements help us to craft the design components that you find when you start using Stagecast. We hope we could improve your experience by putting that design system into use. Let us know what you think.

‍