Create a design system for a new TV streaming platform for web, mobile apps and OTT
My main contribution was designing the following elements in all platforms:
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.
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.
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.
I designed the web's design system first and cascade it to mobile and OTT.
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).
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.
The icons designed from a 24x24px grid and a 1px stroke. The goal was to create simple metaphors that communicate quickly to the user.
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.
The funding lockup library managed all scenarios throughout all Rivit TV's products.
The show cards were universally used throughout the product and managed through one design system.