Home

Zoho Show

Home

Zoho Show

Zoho Corporation

2023

Zoho Show

Zoho Corporation

2023

Zoho Show

Zoho Corporation

2023

Early 2023, we launched a comprehensive redesign of Zoho Show for Apple platforms, enhancing the experience for over 2+ million users. The project involved a complete overhaul of the design system, the creation of new visual assets, and designing intuitive interfaces for brand-new features, significantly improving usability and visual consistency across the app.

Team

Sriram Hemanth Kumar

UI Designer

Sriram Hemanth Kumar

UI Designer

Sriram Hemanth Kumar

UI Designer

Rangarajan

UI Manager

Rangarajan

UI Manager

Rangarajan

UI Manager

Damodharan Sundarajan

Design Architect

Damodharan Sundarajan

Design Architect

Damodharan Sundarajan

Design Architect

Duration

2 years

Jan 2021 - Jan 2023

Tools

Figma

Photoshop

Zoho Nila

Some details are withheld under NDA to protect company information. Shared content is disclosed with the company’s permission.

What is Zoho Show?

Zoho Show is a cloud-based presentation tool for creating, editing, and collaborating on slides. It offers real-time collaboration, templates, animations, and multimedia support, integrating seamlessly with Zoho apps and third-party tools.

Problem

Zoho Show for iOS faced visual inconsistency due to a fragmented design system, leading to an uneven user experience across screens. The lack of standardized UI components resulted in misalignment and usability issues.

Inconsistent Components

Zoho Show initially relied on custom components, which limited its ability to expand efficiently across various devices. To address this challenge, we transitioned to using system components, enabling the design system to be more scalable, efficient, and durable. This shift allowed Zoho Show to maintain consistency and improve user experience across different platforms, making the design process more streamlined and adaptable to future updates.

Inconsistent Components

Slow Performance

Custom components caused slow performance, impacting responsiveness. The lack of native optimization led to laggy interactions and higher load times. A shift to native components was needed for better speed and efficiency.

Slow Performance

Research

To understand the design-development workflow, I analyzed how designs were created and implemented. I explored the communication process between designers and developers and spoke with them to identify gaps and challenges in execution.

1.

Custom components caused slow performance and laggy interactions.

1.

Custom components caused slow performance and laggy interactions.

1.

Custom components caused slow performance and laggy interactions.

2.

No design guidelines, leading to inconsistent UI across the app.

2.

No design guidelines, leading to inconsistent UI across the app.

2.

No design guidelines, leading to inconsistent UI across the app.

3.

No common platform for sharing work, creating misalignment between teams.

3.

No common platform for sharing work, creating misalignment between teams.

3.

No common platform for sharing work, creating misalignment between teams.

Solution

To fix these issues, I evaluated Apple’s Design System and pitched the idea of creating a structured design system for Zoho Show.

Research & Transition

I studied Apple’s Human Interface Guidelines and internal documentation to determine how to transition existing designs into system components without compromising brand identity.

Research & Transition

I studied Apple’s Human Interface Guidelines and internal documentation to determine how to transition existing designs into system components without compromising brand identity.

Research & Transition

I studied Apple’s Human Interface Guidelines and internal documentation to determine how to transition existing designs into system components without compromising brand identity.

Standardized Workflow

I defined a clear process that all designers could follow, ensuring consistency across the team.

Standardized Workflow

I defined a clear process that all designers could follow, ensuring consistency across the team.

Standardized Workflow

I defined a clear process that all designers could follow, ensuring consistency across the team.

Developer Integration

We built a design system with tokens and reusable classes, making it easier for developers to implement designs accurately.

Developer Integration

We built a design system with tokens and reusable classes, making it easier for developers to implement designs accurately.

Developer Integration

We built a design system with tokens and reusable classes, making it easier for developers to implement designs accurately.

A Scalable Design System

My primary objective is to build a unified visual language and modular components, ensuring consistency and efficiency in user experience and interface design across all Apple platforms.

Enhancing Brand Identity and User Engagement

The Zoho Show design system focuses on clarity and engaging the user, necessitating a balanced integration of Zoho's visual aesthetics with features specific to presentations. This approach ensures that the design is user-friendly and aligns with Zoho's broader brand identity.

How can I make this helpful for designers and developers?

I realized that the needs of the developers were going to be just as important. I got a front-end designer to collaborate with me on the design system. With their help, I included tokens, CSS class, and code snippets directly to the Figma file. This was a quick way for both of us to get educated on how we think and communicate.

An example of how I have added token and classes to the design system

Colors

Design Components

Dev Sheet

Enabling Faster Feature Scaling Across Platforms

Following the redesign, the improved design system enabled the team to efficiently roll out new features across macOS, iOS, and iPadOS. With a unified component library and standardized interaction patterns, features could be seamlessly adapted across platforms.

Some of the key enhancements introduced after the redesign include:

iOS

Mobile-First Design

After the web, usage shifted significantly towards mobile phones, so we decided to focus on mobile.

Gesture Integration

Leveraged iOS's rich gesture vocabulary, allowing users to navigate, edit, and present with intuitive swipes, pinches, and taps.

iPadOS

While iPadOS shares the same DNA as iOS, the iPad offers expanded capabilities such as multitasking, Split View, and Apple Pencil support and larger canvas.

We crafted an immersive, device-native experience rather than a scaled-up iPhone interface.

Optimized for the larger screen, supports multitouch, and integrates with iPad-specific functionalities like Apple Pencil and advanced multitasking.

This approach provides an immersive, iPad-centric user experience, rather than just a scaled-up version.

macOS

The evolution of our project required extending this design system to macOS, a platform with distinct user interactions and larger screens, while retaining the DNA of its iOS and iPadOS origins.

These improvements leverage the Touch Bar's unique capabilities to streamline workflow and offer intuitive controls for a more efficient and engaging presentation design process.

The evolution of our project required extending this design system to macOS, a platform with distinct user interactions, larger screens, and a different usage context, while retaining the core DNA of its iOS and iPadOS origins.

These improvements leverage the Touch Bar's unique capabilities to streamline workflow and offer intuitive controls for a more efficient and engaging presentation design process.

tvOS

Onboarding Experience for Apple TV

Streamlined the onboarding process to enhance user engagement on Apple TV.

Simplified Navigation

Recognizing the remote-driven interaction of Apple TV, I designed a streamlined interface that's easy to navigate from the couch.

Slide Controls Design

Developed intuitive slide controls to improve user interaction within the app.

Webpages

Designed several web pages to highlight the diverse features and solutions of Zoho Show.
Utilized responsive design principles to ensure accessibility across various devices.

Startup

iOS/iPadOS

Apple TV

SharePlay

Accomplishments

Provided components to the major elements of the product to ship it to developers as a library.

The design system helped improve the performance of the product by 55%.

Conducted education and testing sessions for the designers to use the design system.