B2B
SaaS
Shipped
In early 2023, we launched a comprehensive redesign of Zoho Show for Apple platforms, enhancing the experience for over 1 million users. The project overhauled the design system, introduced new visual assets and features, and established a fixed developer handoff workflow, improving usability and visual consistency across the app.
Team
Duration
2 years
Jan 2021 - Jan 2023
Tools
Figma
Photoshop
Zoho Nila
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.
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 lacked a unified design system and relied on custom-built components, leading to compatibility issues across different OS versions and inconsistent user experiences.
Slow Performance
Custom components caused slow performance, impacting responsiveness. The lack of native optimization led to laggy interactions and higher load times.
To address this, I spoke with designers and developers to understand how designs were created and implemented. I analyzed their workflow and communication process to identify gaps and challenges in execution.
1.
No design guidelines, leading to inconsistent UI across the app.
2.
No common platform for sharing work, creating misalignment between teams.
To address these issues, I analyzed Apple’s Design System and proposed building a structured system for Zoho Show. This involved replacing ad-hoc elements like labels placed within rectangles with native system components such as buttons, improving platform compatibility and ensuring a consistent user experience across devices.
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.
Developer Integration
We built a design system with tokens and reusable classes, making it easier for developers to implement designs accurately.
Standardized Workflow
I defined a clear process that all designers could follow, ensuring consistency across the team.
Design
Craft layouts, flows, and UI elements
Tokenize
Define design tokens for components
Documentation
Add specs, behavior notes, and API References.
Handoff
Share the documentation with developers
By following the defined process, we built a design system with components that felt native to each platform. For example, iOS, iPadOS, tvOS, and macOS share the same core APIs, but the components were customized with brand elements to deliver a consistent yet platform-appropriate experience.
Enhancing Brand Identity and User Engagement
This approach ensures that the design is user-friendly and aligns with Zoho's broader brand identity.
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.
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:
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.
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.
Designed several web pages to highlight the diverse features and solutions of Zoho Show.
Utilized responsive design principles to ensure accessibility across various devices.
Replacing ad-hoc elements with design system components helped improve the product's performance by 55%.
Conducted education and testing sessions for the designers to use the design system.