OVERVIEW
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.
Client
FrontRow
Expertise
Design Systems, UI / UX Design,
Product Design
Deliverables
Design System
Product Design
UX
Goals
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.
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.
Primitives
Broad controls are defined at the primitive level. Color, space, size, and corner-radii are controlled from this level.
Brand 1
Brand 2
Brand 3
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.
BUILDING (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
T
Badges
Live
Limited
Premium
Buttons
Cancel
Submit
Checkboxes
BUILDING (Phase III)
Molecular Components
With our styles and token architecture in place, we started building basic atomic components. This included buttons, fields, badges, etc.
BUILDING (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.
RESULTS
1-click themeing
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.
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.
1
1
1
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.
