March 2018  Rivit TV

Rivit TV's Design System

Build a design system for for web, mobile and OTT products

Brief

Design, build and maintain a design system for Rivit TV’s products.

My Role

Creating Rivit TV’s design system was a team effort which allowed for more ideas and solutionsx. The system included the following sections:

Web

Mobile (iOS/Android)

OTT

Show Cards - Defaults
Design System - Show Card - Rivit TV

Research

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.

Exploration

When development the system, we made sure to document and test, plus adapt as goals changed.

Discovery

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.

Final Components

Web

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.

Grids
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).

Web Grids
Design System - Grid - Rivit TV

Typography
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.

Typography - Headers
Design System - Typography - Rivit TV
Typography - Body
Design System - Typography - Rivit TV
Typography - Lists
Design System - Typography - Rivit TV
Typography - Element Padding Rules
Design System - Typography - Rivit TV

Colors
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.

Web Colors
Design System - Typography - Rivit TV

Buttons
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.

Web Buttons
Research TV

Icons
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.

Icons
Research TV

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.

Text Fields - Default
Design System - Typography - Rivit TV
Text Fields - Radio Buttons
Design System - Typography - Rivit TV
Text Fields - Drop Downs
Design System - Typography - Rivit TV
Text Fields - Elements
Design System - Typography - Rivit TV

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 :

  1. Season 1 is on funding state
  2. Season 1 is funded
  3. Season 1 did not fund
  4. Season 1 is available
  5. Season X is Funding

Any funding state or scenario through out any of Rivit TV's products would be mnanaged from the Funding State Library and Funding Lockup.

Funding State - Defaults
Design System - Funding State - Rivit TV
Funding Lockup - Defaults
Design System - Funding State - Rivit TV

The show cards were universally used through out the product and managed through one design system.

Show Cards - Defaults
Design System - Show Card - Rivit TV
Show Cards - More Scenarios
Design System - Show Card - Rivit TV
Show Cards - Show Logo Rules
Design System - Show Card - Rivit TV

Contact Me