Building a scalable, flexible design system for FrontRow.
A system that supports multiple brands, with light and dark modes for each, across mobile, tablet, desktop and TV.
Design Systems
UI / UX Design
Product Design
Problem Statement
FrontRow helps creators launch personalized OTT apps across iOS, Android, Web, TV, and AR/VR.
The in-house design team had established a basic design system, but it could not support multiple brands, and had become hard to maintain. Rolling out the product for a new client involved manual duplication and re-theming of designs, which was a waste of the team's time and effort.
It was time to step back and re-architect the design system, but with constant pressure to deliver new designs and support product rollouts, the team had no bandwidth to conduct this exercise.
Goals
Carefully planned
We would be building the system alongside a moving target, and needed a carefully considered roadmap.
Highly scalable
With two clients onboard and many more signing up, plus support for light and dark modes and multiple devices, the system had to be highly scalable and very flexible.
A short learning curve
The system had to be well documented and highly usable, so new designers and devs could be onboarded easily in the future.
RESEARCH & PLANNING
Creating a roadmap
We started with a review of the existing system and files, and spent some time with FrontRow's designers to understand their specific needs and workflows. At the end of this exercise, we had a list of components to build, a roadmap, and unique pain points to address.
Style & layout
Laying the foundation for a scalable, flexible system.
Atomic components
Basic bootstrap components, universally required in all products.
The FrontRow team starts using the system to build new flows and screens.
Molecular components
Larger components and FrontRow-specific components.
60-70% of existing designs can be recreated using the system.
Building in context
Recreating FrontRow screen-by-screen, and adding new components in context.
BUILDING
Phase I
Style & Layout Elements
We began by creating styles and a robust system of design tokens that would become the foundation of our system and allow easy theming.
Size & Space
CORNER RADIUS
Typography
COLOR
ICONS
SHADOWS
Primitives
Broad controls are defined at the primitive level. Color, space, size, and corner-radii are controlled from this level.
Tokens
Specifics and dark and light mode values are defined at the token level. Variables from the Primitive level trickle down here. We allow for a great deal of granularity, and only use relative values, never absolutes.
Styles
Typography, effects, gradients & grids.
Phase II
Atomic Components
With our styles and token architecture in place, we started building basic atomic components. This included buttons, fields, badges, etc.
Avatars
Badges
Buttons
Checkboxes
Phase III
Molecular Components
Next, we shipped basic molecular components. These included generic ones, such as lists and tables, and also components that were specific to FrontRow and key to its most important screens, like the player and thumbnails.
Phase IV
Building in context
With our basics in place, we were equipped to start recreating FrontRow’s original designs using our new components. We chose key screens that covered as many unique components as possible, without wasting time on recreating flows.This phase is still ongoing, and components are added into the library as we go.
THE RESULT
1-click theming
With the new system plugged in, reskinning designs for new clients is a breeze.
Easy to adopt
We accounted for differences in the mental models of designers who would use this system on a daily basis, and tried to make it as intuitive and easy to use as possible.
Highly searchable
Each component is tagged with all relevant keywords, so you always find what you’re looking for.
Intuitive naming
Really obvious naming makes it clear where a token should be used.
Clear documentation
Our docs include rules & best practices, designer & dev notes, and call out components that need special attention while reskinning.
Improved workflows & turnaround times
We now have an exhaustive list of components, synced up to a robust token system. It supports designing in wireframe mode and dark and light themes for multiple brands. Creating new feature flows is faster than ever before, and the FrontRow design team can focus purely on solving UX problems.
Working with Studio Proximity has been an excellent experience. From the start, they dove into our project at FrontRow with enthusiasm, asking insightful questions and suggesting creative ideas we hadn't considered. Unlike typical agencies, Kitu & Madhvi go beyond mere execution, bringing valuable expertise and a willingness to challenge assumptions. Their honest approach has been a tremendous asset, and I would highly recommend them for their exceptional service and collaborative mindset.
Ty Haener
Sr. Design Manager, FrontRow
Over to you. What's your big idea? Let's bring it to life.
