Design, build and maintain a design system for Rivit TV’s products.
Creating Rivit TV’s design system was a team effort which allowed for more ideas and solutions. The system included the following sections:
We wanted to create a library of components that would be flexible and scalable for future growth. We started with an inventory list of components throughout the web using the web's user flows. We first designed the obvious elements (for ex: primary button, main Typography). We also knew there were component that would arise from designing on the product(s). For those types of components, we created generic components that were used for position only and would evolve as we worked through the whole system.
When development the system, we made sure to document and test, plus adapt as goals changed.
Communication and a lot of debate became a big part of developing standards and personality for the product’s design system. This allowed for us to create strong rules and patterns which helped to transfer the same system to multiple devices.
We started as a web based product and branched out to mobile and then later to OTT. This helped designing the system because the web would have the most components and the most complete.
After brainstorming with our engineering team, we decided to go with Bootstrap Grid System because it was one of the most popular and supported CSS frameworks at the time.
The grid was the fundamental structure of creating a layout. There are three different grids that a designer can use to create a layout (Public Facing, Show Page, and User Account).
After testing many fonts, we decided to use Source Sans Pro because it felt the most modern, Its intended use is for user interfaces so it renders very well at small sizes.
After finalizing the branding and logo, we designed our color palette based from our green brand color. Green was used as our brand color because it represents fun, memorable and is the color of innovation.
The button system was created to be straight forward and easily understandable to contrast the product’s business model. We ended up with 8 styles through out the whole web product.
When designing our icons, we had one thing in our mind, it was for the icons to represent a simple metaphors in order for the interface to be easy and fast to read. The icons were designed using only a 1pt outline stroke making the design simple and removing any extraneous detail.
Textfield / Loading / Success Error Message / Modals
We created the communication components to work cohesively and behave in the same way. We The main goal was to create a balance between not being too unobtrusive and showing enough information for the user complete their task. For example, the fields were designed with a minimal approach to deal with complex scenarios like in sign up. This allowed for the system to scale.
Show Cards & Funding Components
The product had many states and scenarios through out the life cycle of a show, which needed to be designed for. To manage all of these states we created a library for the show cards and fundding compnents. show state :
Any funding state or scenario through out any of Rivit TV's products would be mnanaged from the Funding State Library and Funding Lockup.
The show cards were universally used through out the product and managed through one design system.