design system for ott platform

Crafting a scalable Design System for multi-platform use

COMPANY

ZEE

ROLE

Associate Product Designer

EXPERTISE

UX/UI Design

YEAR

2023-24

Project description

To create an efficient design system that is simple, easy to use and scalable, while bridging the gap between designers and developers.

About

ZEE5 is a top Indian OTT platform delivering diverse entertainment content, including movies, TV shows, and originals, accessible on mobile, web, and connected TV.

Background

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.

Roles & Responsibilities

• 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.

• 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.

• 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.

Goals

• 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.

• 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.

• 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.

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.

Tokenisation

Simple component

Button

Container

color.background.-

primary.default

Text

color.text.default

textstyle.small

Icon

color.icon.default

icon.small

Border Radii

cornerRadii.default

Padding

padding.horizontal.-

small

padding.vertical.small

gap.horizontal

Complex component

Tag tokens

ds.mobile.android.tag.

Button tokens

ds.mobile.android.button.

Pagination

tokens

ds.mobile.android.

pagination.

+ Carousel

specific

tokens

ds.mobile.android.-

bannerCarousel.

Patterns

All constituent component tokens.

Icons

Label

Toggle

Input

+91

Input 10-digit number

Helper text

+91

93485 23840

Helper text

+91

93485 23840

Helper text

+91

93485 23840

Helper text

+91

93485 23840

Helper text

+91

93485 23840

Singapore (+91)

Snackbar

Text goes here

Action

Text goes here

Action

Text goes here

Action

Text goes here

Action

Colors

Navigation

BUY PLAN

Title

BUY PLAN

Center Title

Home

Hot & New

For You

Hipi Shorts

Songs

Banner Carousel

1M+

Kung Fu Panda 4

Rating

Tag

BUY PLAN

Banner Carousel - Web

View count

Kung Fu Panda 4

Rating

Movie

Year

Genre

Language

View count

Kung Fu Panda 4

Rating

Movie

Year

Genre

Language

Motion

Standard

Bezier values

Standard

Bezier values

0.55

0.45

0.55 / 0.45

55% / 45%

Acceleration / Deceleration

Custom bezier value

0.55, 0, 0.45, 1

Custom bezier value

0.55, 0, 0.45, 1

Illustrations

UX Writing guidelines

Write in sentence case

We write in sentence case. In sentence case, we capitalise only the first letter of a sentence.

We also capitalise proper nouns.

Copy written in sentence case is easier to read compared to other types of cases:
This is sentence case
This Title Case
this lower case

Examples :

Example on a button

Watch 'Kisi Ki Bhai Kisi Ki Jaan' on ZEE5

Watch 'Kisi ki bhai kisi ki jaan' on ZEE5

Example when using proper nouns

Use British English

We write in British English.

Examples :

Correct : Colour, humour, neighbour

Incorrect: Color, humor, neighbor

Correct : Authorise, personalise

Incorrect: authorize, personalize

Correct : Analyse

Incorrect: analyze

Correct : Licence, offence

Incorrect: license, offense

Correct : Catalogue, dialogue

Incorrect: catalog, dialog

Correct : Centre, theatre

Incorrect: center, theater

Correct : Cancelled, travelled

Incorrect: canceled, traveled

Writing about one-time passwords (OTPs)

Verification of mobile numbers or an account happens with the help of an OTP. The OTP is not the item that needs to be verified.

Examples :

Verify with OTP

Verify OTP

Example on a primary CTA

Verifying...

Verifying OTP...

Example of a CTA in disabled state

Write in 3 words or less

Try to write CTA copy for primary and secondary buttons in 3 words or less. Remove prepositions or articles where you can.

Examples :

Verify with SMS

Verify with outbound SMS

Haven't received OTP?

Haven't received the OTP yet?

Get now

Get it now

More examples

Using verbs

Try to start CTAs with the more important and relevant verb where possible.

Examples :

Activate with missed call

Give missed call to activate

Verify with SMS

Send SMS to verify

More examples

Using Login and Log in

Examples :

Example on system

setting headline

Example on a bottomsheet

where user needs to fill in details

Some word/phrase choices

Opt for these words when writing flows for uniformity

Examples :

Okay

more examples

Word combinations that cannot be used together

These words cannot be used together in a sentence or in conjunction with each other in CTAs.

Examples :

Retry with OTP

Retry with OTP again

Remove device

Not now

Remove device

Cancel

Delete

Not now

Delete

Cancel

Writing about ZEE5 plans

Use the word 'plan' for users who haven't bought a subscription

Use the name of the plan if the user has already subscribed to us

Use the word 'subscriber' when referring to the user. Not member.

Refer to plans as plans. Not packs.

These options can be used to write similar copy

Options :

BUY PLAN

Buy Premium HD

Explore Premium

Upgrade plan

Upgrade my ZEE5 plan

more examples

Leverage design to shorten CTA copy

Pair copy with intuitive design so that you can reduce the amount of text you write on the button.

For examples click here.

Speak in first person in CTAs

Use a first-person narrative. This gives the user ownership of their actions.

For examples click here.

Keeping things uniform in a flow

Using similar words can reduce cognitive load on the user

End a multi-information flow with Done

End a single-information flow with OK

For examples click here.

Choose simple words

Options for CTAs are more often than not synonymous. Choose the simplest option.

For examples click here.

Tokenisation

Simple component

Button

Container

color.background.-

primary.default

Text

color.text.default

textstyle.small

Icon

color.icon.default

icon.small

Border Radii

cornerRadii.default

Padding

padding.horizontal.-

small

padding.vertical.small

gap.horizontal

Complex component

Tag tokens

ds.mobile.android.tag.

Button tokens

ds.mobile.android.button.

Pagination

tokens

ds.mobile.android.

pagination.

+ Carousel

specific

tokens

ds.mobile.android.-

bannerCarousel.

Patterns

All constituent component tokens.

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.

Design & 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.

Connect with me on other channels

Instagram

Behance

Navigation

Projects

Connect with me on other channels

Instagram

Behance

Navigation

Projects

Connect with me on other channels

Instagram

Behance

Navigation

Projects