#design system #visual design #motion design #interaction design
ZEE5 Design System
A token-based design system unifying ZEE5's OTT experience across mobile, web, and CTV.
This project focuses on developing a token-based design system for the ZEE5 OTT platform, streamlining components across mobile, web, and CTV to ensure consistency, scalability, and seamless cross-platform adaptability. It involved creating a modular component library and reusable design tokens to enhance collaboration and maintain brand identity.
Chaos in design
ZEE's digital interfaces lacked cohesion. Buttons, typography, and layouts varied across products. This inconsistency led to confusion, slowed down development, and diluted the brand's identity. Every project felt like starting from scratch, with little room for stability.
A unified design language
We envisioned a design system that wasn't just a set of components but a toolkit powered by principles of clarity, consistency, and scalability.
Connected yet unique
Ensure every product feels connected yet unique.
Faster delivery
Optimise design and development time with reusable components.
User-first
Create a user-first experience aligned with ZEE's brand values.
I was an advocate for the design system within the design team and cross-functionally, and streamlined the process of migrating from the old system to the new one.
- Created advanced components, tokens, and other essential elements for mobile, web, and CTV platforms.
- Streamlined the design-to-developer handover process.
- Conducted workshops to streamline the design process across the team.
Building the system that connects everything
Consistency
Buttons, modals, and cards now look, feel, and behave the same across platforms.
Optimal usability
Every component was built with purpose — spacing, typography, and interaction cues crafted for better readability and accessibility.
Scalability
A token-based approach enabled seamless integration of new features and device compatibility without major redesigns.
Efficiency boost
Reusable components and tokens reduced production time by about 40%, enabling faster feature rollouts.
Cross-platform consistency
Unified the design language across Android, iOS, web, and CTV for a seamless, intuitive experience.
Collaborative framework
Comprehensive documentation and clear guidelines fostered better collaboration between designers and developers.
Fluid transitions across every screen
ZEE's components were designed with responsiveness in mind. From widescreen desktops to compact mobile devices, the system ensures usability without compromising aesthetics — card layouts adapt fluidly, maintaining clarity and hierarchy across screen sizes.
For native Android & iOS, we tailored platform-specific gestures, typography, and transitions, ensuring brand consistency with the distinct ZEE look and feel.
Beyond functionality
Illustration system: a consistent style for illustrations used in onboarding flows, error messages, custom profiles, and information screens.
Motion design system: a cohesive approach for animations across interactions and transitions.
Flexibility at the core of design
We made ZEE's design system responsive and adaptable to different screens and modes. Responsive variables, linked to semantic variables, ensure consistent behaviour across the system.
Dynamic components like buttons adjust their size, padding, and typography automatically. Responsive tokens cover breakpoints, spacing, size, and typography — so everything from layouts to text stays consistent and visually appealing, no matter the screen size.
Speed without compromise
With the design system in place, all components are now unified within both the designers' library and the development team's toolkit, streamlining collaboration and making handoffs hassle-free.
For instance, ILT20 Season 1 took four months to complete, with nearly two months lost in reviews and feedback loops. With the new design system, ILT20 Season 2 shipped new features and capabilities in just one month — from initial concept to end-user deployment.
Streamlined communication
Design tokens and guidelines are clear and accessible — no more lengthy explanations to developers.
Efficient UI reviews
Pre-defined spacing, colours, and typography eliminate time spent checking minor issues.
Faster onboarding
New designers can quickly adapt with intuitive, standardised components.
Creative freedom
Designers focus on solving user problems instead of repetitive, mundane tasks.
Designing for everyone, everywhere
We designed ZEE with accessibility at its core. Colour contrast adheres to WCAG standards — buttons use a blue with a 4.5:1 contrast ratio to stand out clearly on light or dark backgrounds. We tested the system for red-green and blue-yellow colour blindness, and ensured components like dropdowns and modals are fully operable with keyboards and assistive technologies.
We also introduced an XL mode, where the size of buttons, typography, and other UI elements increases significantly — designed for older adults and vision-impaired users to focus easily on key actions, especially on TV interfaces.
Reflections on my time at ZEE
My first full-time role at ZEE was a transformative chapter. Collaborating with a talented and passionate design team gave me invaluable insights into teamwork, creativity, and problem-solving at scale.
I learned the value of consistency and scalability in large-scale design systems, gained hands-on experience bridging design and development through clear communication, and developed a deeper appreciation for how shared goals fuel innovation. This experience laid a strong foundation for my career in product design.