Fable Design System Branding
Fable powers teams to invent immersive, cinematic experiences for Prime Video customers. Fable is Prime Video’s design system, consisting of reusable components, working code, design resources and human interface guidelines. The goal is to leverage design principles and standards to create a system that is delightful, cinematic, clear, inclusive, efficient and consistent across clients.
My Role and Process
My role was to define the brand of Fable and create an ecosystem of visual elements that complement and reinforce the system before its launch date. I like to start the branding process with a kick off with the client and get an expectation for what they are expecting visually and if they are unsure guide them through a competitor analysis, explain logo types, and share inspiration.
Step One:
For this project I worked with the design systems manager and principal UX designer and they wanted and icon brand mark logo with the initial creative direction being “make a cool F”. Not the weirdest logo ask I have been given but definitely the shortest.
I drew up around 20-30 F’s that shared some general geometric themes: Folding Lines and Paths, Soft Shapes, Divisions, Building Blocks.
Step Two:
Normally with clients I only share around 5 concepts. I do all initial rounds in black and white vectors to keep color from being a swaying factor. For logos like this that utilize an icon brand mark I avoid any lockups with the brand name as fonts can also create a lot of confusion on narrowing choices.
Step Three:
This round is about narrowing and refining down to 1-2 options and then the introduction of colors and fonts can begin. The team had asked me to explore pinks and purples for the color palette and they felt strongly about the font “Futura”.
Step Four:
Now that the logo is finalized I needed to create some different background patterns and design elements along with flushing out the color palette. I knew I wanted the website to be very dark and opted for a deep purple and myriad of neon pinks and purples and a calming blue for contrast. I made 4 options: 2 utilizing design system elements and 2 that were abstract geometric.
Final:
The design system had very little branding needs beyond elements for the system’s informational website, presentation templates, figma templates and some merchandise.