Vis
Work
About
Resume
Vis
Work
About
Resume
Vis
Work
About
Resume

Building a Design system for 6+ million Users in Zoho WorkDrive

This is a case study of how I led the design team to achieve a brand new design system. A redesign was needed to update the old UI to keep ourselves as the top player. A modern look was the ask + we also identified the gaps in the experience + we developed this design system for consistency across teams and products.

What's Zoho Workdrive

Zoho WorkDrive is a comprehensive file storage and collaboration platform that provides secure file management, seamless collaboration features, integration capabilities, and customisation options, all aimed at enhancing productivity and efficiency within teams and organisations.
Team
4 Designers 5 Product Leads 60 Developers 30 support Engineer
Work
Design System, Research, UI/UX, Inclusive design
Timeline
2022
Tools Used
Figma, Html & CSS
Team
4 Designers 5 Product Leads 60 Developers 30 support Engineer
Work
Design System, Research, UI/UX, Inclusive design
Timeline
2022
Tools Used
Figma, Html & CSS

My Role

I led the design team to achieve a brand new design system, user testing and development of this project from end to end. I collaborated with 2 product and designer managers, 3 Front-end & 5 client developers and product designers.

Responsibilities

Building and managing the design team Setting up a new design system to maintain consistency across the products Closely working with the product team to define the road map and plan and execute design Research and design Drive ideation workshops and design showcases Manage design scope Monitor design delivery

🤯 The problem Context

How can we create a standardised, accessible and enhanced user experience design system?

Goals

1. Revamp all components including colors, font sizes, padding, icons, and illustrations. 2. Improve accessibility by creating clear accessibility rules. 3. Introduce a dark mode for Workdrive. 4. Communicate with developers how to use this design system efficiently

Solution

create a design system that improves the usability and accessibility of the product while reducing the time for design and development through the use of components and established patterns.

🏆 Outcomes

Improved user experience and visual appeal of Zoho Workdrive.

+50%

Reduced dev time

+35%

Reduced design time

-60%

Reduced UI Issues

🏆 Outcomes

Improved user experience and visual appeal of Zoho Workdrive.

+50%

Reduced dev time

+35%

Reduced design time

-60%

Reduced UI Issues

Impact on UI issues

UI, Responsive & Integration issues reduced grastically

-50%

UI issues in product

-96%

UI issues in integrations

-40%

UI issues in Responsive

Impact on UI issues

UI, Responsive & Integration issues reduced grastically

-50%

UI issues in product

-96%

UI issues in integrations

-40%

UI issues in Responsive

Impact for developers

💪Saved 30mins for everyday for 60 developers in workdrive, After removing 30 theme folders, It reduced build time by 6 mins and now the build comes under 10 mins.

-20%

Reduced dev time

-96%

Runs Moe daily developer builds

-40%

UI issues in Responsive

Impact for developers

💪Saved 30mins for everyday for 60 developers in workdrive, After removing 30 theme folders, It reduced build time by 6 mins and now the build comes under 10 mins.

-20%

Reduced dev time

-96%

Runs Moe daily developer builds

-40%

UI issues in Responsive

Impact for Teams

Working on our design system has been very challenging, but it has brought about many positive benefits for the company on different levels.

Designers

Having a ready-to-use library of components made creating high-fidelity interfaces a straightforward task by bringing designing interfaces from days to a couple of hours.

Developers

This simplified the life of developers. Speaking one language with the design team when discussing implementations. Focus on the feature not the low-level UI primitives (color & space values, small components, interactions, states, etc).

Experimentation

The design system allowed us to quickly build prototypes, test more ideas than before, quickly evaluate our hypotheses, and even create more variations to A/B test.

Our Apporach

🤔 Understand the problem

How does one go about creating a Design System for a complex and growing web application? I didn’t know the answer so we started this project with some heavy research.

Why we need one?

Why do we need one? Won't it slow down the entire design process? Why are we building this? What is the problem we want to solve? What does success look like? (for our customers, the business, etc…) Who is this for?What is the scope of this project?

Audit Existing Design system

Understanding the current landscape by auditing the existing tool and mapping out the gaps and challenges 

🔍 Research

How does one go about creating a Design System for a complex and growing web application? I didn’t know the answer so we started this project with some heavy research. We read medium articles, studied the guidelines laid out by Google, Facebook, Apple, Airbnb, and Atlassian, and searched for other designers who faced a similar challenge.

🔍 Design

We followed about Atomic Design methodology and figured it will work well as the foundation of our system. To learn the proper approach for the definition of the structure and guidelines of our components, Our high-level objective was to have a set of elements that could coherently co-exist within a larger system. 


Design System + Figma Transition

I led team's transition from Sketch to Figma. This included developing new workflows, helping to educate the team about working in Figma, as well as rebuilding most of our design system from scratch. While we had an existing design system,I also partnered with another designer, alongside some developers, to help translate this new work into code.

Introduced Dark Mode

I led team's transition from Sketch to Figma. This included developing new workflows, helping to educate the team about working in Figma, as well as rebuilding most of our design system from scratch. While we had an existing design system,I also partnered with another designer, alongside some developers, to help translate this new work into code.

Responsive view in workdrive

I led team's transition from Sketch to Figma. This included developing new workflows, helping to educate the team about working in Figma, as well as rebuilding most of our design system from scratch. While we had an existing design system,I also partnered with another designer, alongside some developers, to help translate this new work into code.

Accessibility

For a product that’s used by millions, we need to accommodate our different types of users, including the ones with visual, auditory, and motor impairments to create inclusive experiences.

Testing

We stress tested 40+ components for different situations in dark & light Mode, responsive view, Multiple integration UI

. We constantly updating the new changes in our design libary and improving it everyday.

Handoff

We stress tested 40+ components for different situations in dark & light Mode, responsive view, Multiple integration UI

.

Development

In workdrive I also worked on Frontend , I converged the new colors, font-family, icons, illustrations, multiple components to live.

Accomplishments in Development

1. Introduced dark Mode in workdrive. 2. Replace less variables to CSS variables in more than 120 files.

 3. Removed more than 25 theme folders for integration's. 4. Removed all unwanted css override codes.

Learnings & Takeaways

Creating and managing design system at scale

Learned about a creating a design system, its elements, creating customisable components, distributing the library, assist and train people in using the design system.

Very challenging

This was the first time I got an opportunity to build a design system using my knowledge of atomic design from the ground up. I enjoyed the overall process, which gave me many lessons.

Leading Design system

I understood the ROI of a design system and the downstream impact it brings for both designers and developers. The stress testing gave me insights into how components are built for scale in Figma. I also learnt that the success of any design system lies behind the collaboration between design and developers.

Receiving feedback and iterating

Constantly engaging with the team and stakeholders to receive feedback on the constraints, limitations or requirements to iterate or revise the components to build the design system.

Future steps

Completley rewamp the overall UI of the product that every interaction can be controlled by user requirments.

Let's Connect.