Design System and Platform Consistency for Streaming Video App
Project Summary
I transitioned and managed the design system for a streaming video-on-demand platform, ensuring consistency across mobile (iOS, Android), desktop, and tvOS apps. My role involved importing an existing Sketch file into Figma and updating components to streamline the creation of future mockups and improve design efficiency.
The Research
Internal Research
To better understand the current system, I worked closely with a co-designer who had been with the company for a long time. This collaboration helped me identify the various components used across platforms (e.g., iOS, Android, tvOS), their specific variations, and the best practices for managing these elements in Figma.
I also consulted with developers to understand the technical aspects of the components and any limitations we might face when transitioning to Figma. This early feedback allowed me to make informed decisions about how to structure the new component library.
Design Approach
Figma Transition
The first step was importing the previous Sketch file into Figma. I worked with my co-designer to ensure a smooth transition, focusing on understanding how components needed to be adapted for different platforms, such as varying text sizes and image dimensions for iOS, Android, and tvOS.
The first step was importing the previous Sketch file into Figma. I worked with my co-designer to ensure a smooth transition, focusing on understanding how components needed to be adapted for different platforms, such as varying text sizes and image dimensions for iOS, Android, and tvOS.
Library Management
To avoid confusion and ensure consistency, I consolidated all components into a single Figma file. This allowed for centralized updates, reducing the risk of inconsistency across mockups. Figma’s component feature played a key role in maintaining consistency and quickly implementing changes across platforms.
Cross-functional Collaboration
After developing the Figma library, I presented it to my co-designer for feedback and clarification. I then shared it with developers to gather input on the technical feasibility of our components and how they would be implemented across platforms. This collaborative process ensured that the design system aligned with both design and technical needs.
Challenges and Solutions
Consistency Across Platforms
The primary challenge was ensuring that the design remained consistent across different devices, such as iOS, Android, and tvOS, while respecting their unique UI elements. However, because the designs were very similar, the use of Figma’s component feature made this straightforward. I structured the components to account for platform-specific variations, such as text size or image resolution, while maintaining a cohesive visual style.
Updating Components
One significant challenge was updating our font across the entire platform when we lost the license to use our existing font. Because the design system was centralized in Figma, I was able to update the font in the component library once, which automatically updated it across all mockups and platforms. This process saved a significant amount of time and prevented inconsistencies.
Final Outcome
Faster Development Cycles
By centralizing the design system in Figma, we significantly reduced the time required to create new mockups and make updates. The most notable example was the font update, which would have been time-consuming without the design system in place. Developers also benefited from the organized component library, as they could easily access updated assets and implement design changes more efficiently.
Improved Design Consistency
The use of Figma’s component features allowed for consistent design updates across all platforms, ensuring that the user experience remained cohesive, regardless of the device being used. This consistency also improved the overall user experience, as users were able to interact with a familiar and intuitive interface across platforms.
Learnings
This project highlighted the importance of a well-structured design system in ensuring both design consistency and efficiency. By transitioning from Sketch to Figma, I learned how to manage large component libraries across multiple platforms and how to collaborate effectively with developers to ensure that the design system was technically feasible. This experience strengthened my ability to manage design systems in future projects, ensuring scalable and consistent user experiences.