ZEE5 Design System
Crafting a scalable Design System for multi-platform use
Introduction
To create an efficient design system that is simple, easy to use and scalable, while bridging the gap between designers and developers.Prior to the design system, Zee5's UI lacked consistency. Designing for different platforms like web, mobile, and smart TVs involved duplicating efforts and inconsistencies in visual appearance and user experience. This created difficulties for both designers and developers.
My Role
Goals
- Was advocate for the Design system within design team and cross function.
- Streamlined process of adapting to new Design system from old
- Created advanced components, tokens, and other essential elements for mobile, web, and CTV platforms.
- Streamlined the design developer handover process.
- Conducted workshops to streamline the design process across the team.
- Maintaining the consistency and brand language same across different devices and platforms
- Our goal was to minimize development effort by identifying reusable components. Changes made in one place should automatically update throughout the app, ensuring consistency and efficiency.
- We sought to streamline the process and enhance collaboration among designers without causing delays. Our objective was to provide a consistent user experience and ensure designers receive timely updates on changes or additions to the design system.
The Team
Timeline
3 designers, 1 design manager and 15+ engineers
July 2023 - Jan 2024
Process
This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases.
Collaboration
As a product designer, I facilitated seamless collaboration by connecting with visual designers, UX writers, motion designers, UX researchers, product managers, developers, and other product designers.
Research & Planning
We began by studying various public design systems to guide our initial structure, recognizing the need to tailor it to ZEE's unique requirements. Through key sources, user studies, and requirement analysis, we deepened our understanding of design systems, tokens, components, and relevant software.
Analyse
We analysed the existing design system and OTT platform requirements, Design Development process and issues to refine our approach to tailor the design system for ZEE's needs.
Define
We collaborated closely with developers to define fully tokenized system, ensuring every screen of the application could be deconstructed into tokens. Maintaining constant communication with both designers and developers, we incorporated diverse perspectives to craft the optimal solution.
Testing & Optimization
Conducted rigorous testing across various devices and platforms to ensure compatibility and performance. Gathered user feedback through beta testing and iteratively optimized the app based on usability metrics and user satisfaction.
Solution
We needed our platform to work well on mobile, web, and TV, so scalability was crucial for our big design team. We organized our design elements using simple principles, making it easy to adjust for different needs. Figma's features helped us adapt smoothly, while we also expanded our system to cover motion, writing, and illustrations, making sure every aspect was covered.
Design visualization
Our system enabled designers to see how their designs would look across different platforms, even if they were initially created for just one screen.
Responsive Design
Leveraging Figma variables, we ensured that our designs could adapt seamlessly to various devices, including mobile phones, tablets, and desktops.
Maintenance and adaptability
Through cross-team collaboration facilitated by Tokens Studio, we ensured continuous maintenance and easy adaptation of our design system.
Documentation
We provided comprehensive documentation to guide designers and developers in using the design system effectively.
Ease of use
Our system was designed with simplicity in mind, ensuring a smooth experience for both designers and developers alike.
Results
Here, the outcomes of the project are highlighted.
Increased Efficiency
Enhanced the design and development process efficiency by over 40%, speeding up project timelines.
Implementation
Updated the onboarding task flow with the new design system, achieving full adoption in less than 4 days for both design and development stages.
Dev Compatibility
Streamlined collaboration between design and development teams, ensuring smoother workflows.
Consistency
Maintained uniformity across different platforms, providing a cohesive user experience.
Scalability
Enabled easy scaling of designs for new features and platforms without compromising on quality.