design system
Lead Product Design for TV and Sports Experience at Accedo
Project shipped January 2025
Increased design efficiency by 50%
Collaborators include Dóra Illés, Petry Oliveira, Terrance Nelson, Grace Lim, Cecilia Garcia Lainz, Justin Wu, and Victor Solares
challenges
Agency Model
As an agency, Accedo was always designing for vastly different products, including ones that didn’t exist yet. We needed a way to adapt our design processes to anticipate the requirements that changed with every client.
Time Cost
We didn’t have time to reinvent the wheel for each new product, and making changes on the fly was impacting profit margins. Constant client negotiation made it extremely difficult to manage our B2B customer experience.
Quality Loss
Redesigning similar features and components for each client reduced consistency over time. Reusing unmanaged designs propagated mistakes which were costly to fix and reduced overall design quality.
Objective: Build a versatile design system that meets agency and client needs.
Objective: Build a versatile design system that meets agency and client needs.
process
Testing and Iteration
We regularly tested new variables and designs to ensure usability and flexibility for all client projects.
Partnership with Developers
I worked closely with developers to troubleshoot Figma variables, ensure technical feasibility, and make sure our documentation met their needs.
System Standardization
Our team standardized design system operations by harnessing version control, naming conventions, design file structure, and documentation standards for the design system.
final structure
This library maintained attributes that were best managed globally. Text styles, colour, and corner radii could be changed here to update the branding across all apps.
global primitive library
Our final design system consisted of 7 files: a Global Primitive Library with three separate Component Libraries for Web, Mobile and TV. Each Component Library had a corresponding Gallery File, and the entire system was managed by a robust set of Figma Variables.
component libraries
We created these libraries to maintain frequently used components. They were separated into Web, Mobile, and TV files, as each of these platforms have different requirements. For example, only TV components needed a focus state for remote navigation. I took ownership of the TV Component file, while contributing to both the Web and Mobile components.
gallery files
Our team built these files using the Component Libraries as templates for common features, flows, and screens. We incorporated detailed documentation for developers and designers. I took ownership of the TV Gallery file, while supporting our team on both Web and Mobile.
variables
Our team set up a complete variables library for all frequently altered attributes. Variables enabled fast changes without manual updates. Developers could then pull these changes automatically through an API.
Visual representation of variables from Figma Learn
result
Design efficiency increased by 50%.
Our new design system eliminated constant feature redesign; streamlined developer handoff; and set the standard for reliable design quality.
