Design System for TV Streaming Platform

Brief

Create a design system for a new TV streaming platform for web, mobile apps and OTT

My Role

My main contribution was designing the following elements in all platforms:

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

Gather Information

My first step was to look at the main web's user flow and take inventory of all the UI elements needed to build an MVP web product. Once I had my list, I shared it with the team to divide the different sections for exploration.

Exploration

From our user personas, we began to define and figure out the right visual language for our users. We kicked it off with a brainstorming session to answer questions like, "Should it have round or right angle corners? Should we go brand heavy or agnostic? What is the voice of our product". Once we had a sense of how the product would communicate to our users, I worked on sketching some preliminary ideas to present to the team.

Create, Test and Iterate

As decisions would get made from design critiques, I documented the decision, applied it, and presented updated designs. We made adjustments and formalized the first draft of documentation and rules. A lot of debate became a big part of the process to be sure we started with strong rules and patterns for the system. This would allow us to apply the same system to multiple devices.

Final Components

I designed the web's design system first and cascade it to mobile and OTT.

Grids

The grids were the fundamental structure. I created three different grids that a designer can use to create a layout (Public Facing, User Account, and Show Pages).

Web Grids - Consumer Pages
Design System - Grid - Rivit TV
Web Grids - Logged In
Design System - Grid - Rivit TV
Web Grids - Show Pages
Design System - Grid - Rivit TV

Typography
We were looking for a font that would feel familiar and easy to read for small screens. After testing many fonts, we went with Source Sans Pro.

Typography - Headers
Design System - Typography - Rivit TV
Typography - Body
Design System - Typography - Rivit TV
Typography - Lists
Design System - Typography - Rivit TV

Colors

Design System - Typography - Rivit TV

Buttons

Research TV

Icons
The goal was to create simple metaphors that communicate quickly to the user.

Icons
Research TV

Textfield / Loading / Success Error Message / Modals
For MVP, the text fields were designed with a minimal approach to deal with complex scenarios. Allowing for the system to scale and simpler redesign in the future.

Textfields Dropdowns Tabs
Design System - Typography - Rivit TV

Password

Password Default
Design System - Typography - Rivit TV
Password Focus
Design System - Typography - Rivit TV
Password Hint
Design System - Typography - Rivit TV
Password Success
Design System - Typography - Rivit TV

Modals

Modal Billing
Design System - Typography - Rivit TV
Modal Account Management
Design System - Typography - Rivit TV
Modal User Profile
Design System - Typography - Rivit TV

Funding Lockup
The funding lockup library managed all scenarios throughout all Rivit TV's products.

  1. Season 1 is funding
  2. Season 1 is funded
  3. Season 1 did not fund
  4. Season 1 is available
  5. Season X is Funding
Funding State - Defaults
Design System - Funding State - Rivit TV

Show Cards

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

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