Pluto tv Style Library
My role: Product Design, User Research
Company: Pluto tv
Product: Pluto tv Apps v10+, Pluto tv Web
Platform: Web, Android, iOS, Mac OS, CTV, WebTech
Year: 2022
BACKGROUND
At Pluto TV, the design and development teams were each focused on their own platforms—iOS, Android, web, Google, CTV, and smart TV—working in silos without much collaboration. This isolation led to a fragmented design process, where there was no centralised, global library to share style assets.
It became a bit of a chicken-and-egg situation: were the teams siloed because they had their own libraries, or did having individual libraries cause them to work separately?
​
The lack of a unified style library meant that the end product looked completely different across platforms. Iconography was duplicated or even triplicated, with no standard sizes or guidelines, leading to a jarring and inconsistent user experience. Colors were no better—teams had different names for the same shades, creating confusion and errors. Gradients, too, were all over the place, with each platform creating its own based on personal preferences, adding yet another layer of inconsistency.
Typography was a mess. With no guidelines or standards in place, each platform did its own thing, resulting in chaotic, mismatched designs that lacked cohesion. This scattered approach to typography was the final straw, underscoring the desperate need for a single, unified style library to bring all these teams together and ensure a consistent, polished look across all platforms.
​
OBJECTIVES
-
Audit iconography, fonts, color palettes and typography, and create a new, single global library.
-
Make all existing libraries redundant.
-
Design Consistency: Achieve uniformity across all platforms and devices.
-
Designer Efficiency: Streamline the design process for faster iterations.
-
Accessibility Excellence: Ensure designs are inclusive by meeting A11y standards, and that assets, such as icons and typography, dynamically adjust to the user’s device settings.
 |  |  |  |
|---|---|---|---|
 |
THE PROBLEM
The incomplete and unorganised style library at Pluto TV was causing major headaches for our designers and developers. It was so confusing and hard to use that many team members resorted to "hard coding" information, leading to inconsistencies across different platforms. Each platform team had its own style library, resulting in duplicated color palettes, infinity of icons of all imaginable sizes, and design elements. This lack of coherence not only made the design and development process unnecessarily complex but also hurt the overall user experience. The Nitro Design System needed a major overhaul to unify and simplify the style library, making it easier for our teams to create consistent and cohesive designs across all devices.
METRICS
NORTH STAR METRIC:
Improve design coherence and scalability across platforms by standardizing visual elements such as color, iconography, typography, and spacing.
SUPPORTING METRICS:
Leading Metrics:​
-
Consistency Audits: Percentage of design elements (colors, icons, fonts) standardized across platforms.
-
Adoption Rate: Number of product teams adopting the style library in their workflows.
-
Design Implementation Speed: Time saved when updating or designing new screens using standardized styles.
-
Developer Feedback: Number of design-related questions or issues reported by developers (should decrease).
​
Lagging Metrics:
-
User Feedback: Increase in user satisfaction scores related to UI consistency and aesthetics.
-
Error Reduction: Decrease in platform-specific inconsistencies (e.g., colors or icons appearing incorrectly on different platforms).
-
Time-to-Market: Reduction in development and design time for features requiring updates to visual elements.
-
Accessibility Compliance: Percentage of components adhering to accessibility standards (e.g., WCAG 2.1 AA).
REQUIREMENTS
Functional Requirements:
-
A centralized style library accessible via design tools like Figma or Sketch.
-
Defined standards for:
-
Color: A comprehensive palette with primary, secondary, and neutral tones, along with usage guidelines.
-
Typography: Font families, sizes, weights, and hierarchy for different use cases.
-
Iconography: Scalable, consistent icon sets with clear labeling.
-
Spacing: Spacing tokens to ensure consistent padding and margins.
-
​
Non-Functional Requirements:
-
Performance: Ensure the style library integrates seamlessly into design tools and development pipelines.
-
Version Control: Maintain a change-log for updates to colors, icons, and other visual elements.
​
Design-Specific Requirements:
-
Ensure visual elements align with Pluto TV’s brand identity across all platforms (web, mobile, TV).
-
Document usage guidelines for each style element to ensure proper implementation.
MY RESPONSIBILITIES:
Conducted thorough research on existing design and user interface (UI) components across Pluto TV's platforms and regions to identify inconsistencies and areas for improvement.
​
Developed and designed the Global Style Library, defining color palettes, iconography and typography to be used across different projects and platforms to maintain a consistent user experience.
​
Worked closely with cross-functional teams, including designers, developers, and product managers, to ensure the design system aligned with the needs of various stakeholders and was implemented effectively.
​
Created comprehensive documentation for the Global Style Library to guide designers and developers in using the design system correctly, including clear guidelines, specifications, and best practices.
​
Continuously tested the design system components in real-world scenarios, gathered feedback, and made necessary adjustments and improvements.
​
TYPOGRAPHY
TYPOGRAPHY - XML AND SWIFT UI EXAMPLES
ENG HANDOVER, RESULTS & LEARNINGS
1. ENG Handover
For the engineering handover, we made sure everything was crystal clear for the dev team. We provided:
Detailed Documentation: All the components, colors, and typography were well-documented, so devs knew exactly how to implement them.
Component Libraries: Ready-to-use code for buttons, icons, and more, saving developers time and reducing inconsistencies.
Design Tokens: Easy-to-use variables for colors, fonts, and spacing, making updates quick and scalable across platforms.
Responsive Guidelines: Instructions on how to adapt designs for different screen sizes and device settings, like larger fonts.
Collaborative Workshops: Regular check-ins to ensure smooth implementation and resolve any technical issues early.
​
2. Results
-
Efficiency Gains:
-
Reduced design time by 30% due to readily available and reusable style elements.
-
Reduced developer integration time for visual updates by 20%, thanks to standardized components.
-
-
Visual Consistency:
-
Achieved 95% consistency in visual elements across all platforms, measured by design audits.
-
Resolved 80% of existing UI inconsistencies within six months of implementing the style library.
-
-
Improved Collaboration:
-
Reduced design-to-development feedback loops by 40%, as developers had clear visual guidelines.
-
Increased cross-team alignment, with 90% of teams adopting the style library in their projects.
-
-
User Experience Improvements:
-
Increased user satisfaction ratings by 15%, with specific mentions of improved UI consistency.
-
Reduced accessibility-related issues by 50%, achieving full compliance with WCAG 2.1 AA standards.
-
-
Cost Savings:
-
Saved an estimated $80,000 annually by streamlining visual updates and reducing rework caused by inconsistencies.
-
​
3. Learnings
Involve Engineers Early: Getting developers in the loop from the start avoided technical hurdles later on.
-
Regular Updates: The design system needs constant updating as new features roll out.
-
Cross-Team Buy-In: Everyone—designers, devs, product managers—needed to be on board for this to work.
-
Iterate Continuously: Testing across platforms helped catch issues early, allowing us to refine the system.
-
Documentation is Crucial: Keeping documentation up-to-date made onboarding and future updates much smoother.