Author’s note
Still working through content in this case study.
September 2021 to April 2022
Scaling League’s design system to enable multiple customer brands
Caption
Team
Engineering Manager: Jeff DeButte
Product Designers: Brad Swerdfeger (Lead), Joe Li (IC)
Engineers: Francine Navarro (Web), Gonzalo Perretti (iOS), Miguel Lopez (Android)
Overview
League serves their customers by selling white-labeled versions of its services as custom branded web and mobile apps. To enable League’s teams to build more efficiently for existing and new customers, I led multiple initiatives to improve League’s design system: Genesis. On the design systems team, I was able to:
complete an audit to identify inefficiencies and opportunities with the existing design system
introduce new design tokens with a standardized naming structure, to support the decoupling of themes and promote cross-product consistency
introduce a centralized component library in Figma with documentation and component interface guidelines for developers
introduce a contribution model for designers to add to the design system in a consistent manner
support the hiring and onboarding for new team members, including a lead designer, my designer replacement :’), and multiple engineers
Context
League is a digital health platform designed to empower users to engage with their health. They provide services such as employee benefit claims, enrolment in health improvement programs, and telehealth booking with various healthcare providers. As part of its business model, League runs a program called Powered by League (PBL) to sell white-labeled versions of its services to partner customers in the form of custom branded apps.
Definition
White-labeling: A white-label product is a product or service produced by one company that other companies rebrand to make it appear as if they had made it.
2020 Design System Audit
At the time in September 2021, League only had its own app and one Powered by League customer. With plans to introduce two other PBL customers by the end of the year already in progress, our team wanted to identify instances where our design system failed to meet the needs of our team members.
Design Tokens
Definitions
Design tokens: represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for color, with self-explanatory names.
Theme: A theme is a collection of token values designed to achieve a certain look or style. Themes enabled switching between different client brands using tokens, as well as features like light and dark mode.
Scaling League’s design system to enable multiple customer brands