At Showtime, I was pivotal in leading the development, implementation, and management of their Beacon design system. The primary objective was to foster consistency across diverse platforms and enhance workflow efficiency between the product team and engineers. This initiative coincided with Showtime’s comprehensive brand refresh and the refactor of their app code bases across platforms.
Product Designer
Reusable components create a shared language and saves time for every team at every step of the product development and release process.
This was my first time building a design system from scratch. I researched design system as well as looked at competitor and non-competitor design systems. This helped a lot with organization and structure. In order to organize and build the design, I took on the task of audting Showtime’s apps across platforms.
After auditing Showtime’s apps across platform and many meetings discussing how to organize all the elements of the apps, we established a foundation library of common shared elements and then branched out with platform specific libraries with their patterns and components.
The Showtime brand logo has been through several refreshes throughout the network’s 36 year history. During my time at Showtime, I got to witness another brand refresh right before Showtime merged with Paramount+. The white logo has been around since 2013 and refreshed to the orange red logo in 2022. Paramount+ still uses the white logo while the orange red logo is still used for marketing material. Below are variations of the logo used on the Showtime apps.
Since Showtime launched its streaming app in 2015, the sans serif font DIN was used for all text on the app across all platforms. The font emphasized boldness. During Showtime’s brand refresh, DIN was retired and a custom font called Showtime Atyp and Antique Legacy were introduced. Each served a different function. Different combinations give us the range needed to typeset bold statements, as well as functional information.
Showtime ATYP is used for headlines, kickers and navigation. It is always used in all-caps. Semibold is used for pay-per-view headlines, kickers, and modal headlines; light is used for larger headlines and regular for small headlines.
Antique Legacy is used more functional information such as body copy, shelf titles, tile copy and metadata. Body copy uses regular weight, shelf headers use thin, buttons and rating badges use semibold.
