ZDS

ZDS is the ZAIDYN* Design System for all ZS software products and several custom client applications. Our system includes but not limited to design assets, guidelines, and multiple front-end component libraries supporting various technologies.

My contributions on the ZDS team:

  • Revamped our design system with updated documentation, aligning design and code libraries, creating a new Figma component library, and adapting it to ZS in-house products to achieve a unified look and feel.

  • Creating and maintaining component Figma libraries for desktop and iOS applications

  • Driving innovation with new and enhanced components

  • Debugging in Figma libraries and responding to inquiries

*ZAIDYN is an AI-powered and cloud-native platform provided by ZS.

 

  • Overview

    A revamp of the design system, which includes global styles (color, typography, shadows), a Figma component library, guidelines, and icon library.

  • Problem

    The earlier version of the design system lacked maturity and innovation. The Figma library had usability issues, and the components and other assets had poor accessibility. There was also not enough comprehensive documentation to guide internal product teams and achieve a consistent brand across the platform.

  • Goals

    Improve the user's workflow with resources for efficient designing.

    Maintain consistency and strengthen the ZAIDYN brand across all platform products with clear guidelines and documentation.

    To make ZDS a living and breathing system that is constantly innovating and growing.

  • Research

    I studied successful design systems that were well-known for achieving a unified and strong brand, easy-to-understand documentation, and accessible component designs.

    I was also very self-motivated in learning the best practices in building and maintaining a Figma library. Alongside my day-to-day responsibilities, I dedicated time for Figma tutorials and courses.

  • Target Users

    The main users are UX and UI designers on ZAIDYN product teams. UX/UI designers outside of ZAIDYN teams also refer to ZDS.

  • Process

    1. Define the problem and pain points

    2. Understand the target audience and platform

    3. Evaluate the existing design system's maturity and needs

    4. Rewrite component documentation and create/update Figma libraries

    5. Review changes with engineers and PM and apply feedback

    6. Publish Figma libraries and design system documentation

TLDR;

When I joined the ZDS team, the process of revamping the design system just started.

 
 

Global Styles

The ZDS global styles library houses color palettes, typography, and elevation/shadow styles. This library is for both iOS and Web ZAIDYN products, and these foundational assets that are used throughout the system. Here are some quick stats:

  • 40 colors each with 11-12 shades per color (includes both light and dark mode)

    • 20 colors each in both light and dark mode

    • Palette types: ZS brand, semantic, data visualization, opacity colors

  • 67 text styles in Open Sans typeface

  • 7 types of shadows with 4-5 variations for each

Please note that only a few of these styles are shown below.

Dark mode global color palette

Global Icon Library

The global icon library is also a resource for both iOS and Web, and most of the icons are from the Remix Design open-source icon library. The icons are organized in to groups according to their intended usage.

Some icons are created for product-specific needs, and they must follow the format…

 

Final Design

View final prototype
View final prototype

The final prototype follows the flow of a player that creates their own online lobby with friends. You will see Tina’s screen as she plays as the Igniter in the first round and a fanner in the second.