Daiverse Design System (WIP)

DAI is a global development organization dedicated to creating a more livable world by addressing social and economic challenges through innovative solutions. Since 1970, they have worked with diverse clients in over 150 countries.

Currently, DAI is modernizing its applications and corporate infrastructure to deliver complex global development projects. The teams at DAI use around 10-13 different applications (e.g., SharePoint, Tammis, Oracle) for documentation and collaboration. They need a simple, user-friendly system that provides key project information in a single dashboard, eliminating the need to search multiple systems.

RCG Consulting has the opportunity to assist DAI in developing a new unified application for global team management. The project began in June 2023 and is expected to continue for over two years. At the early stage, we are focused on developing MVP1, with an emphasis on desktop design, as over 90% of DAI users work primarily on desktops and laptops. We call the application ‘Daiverse’.

I am in charge of defining the brand identity for the application, refining the UI design, creating a component library, and developing the Daiverse design system. This project is a Work-In-Progress with a 2-year timeline.

Link to the UX Research process here.

DATE

September 2023 -
Present

MY ROLE

UI/UX Designer, Design system designer

TEAM

UX Designers
UX Researcher
Product managers
SMEs
Engineering & Data team

DELIVERABLES

Personas, Journey maps, Application prototypes, Design system

*A part of Daiverse design system – Widget components in the Component library*

How have I developed a new design system for the Daiverse Application (WIP):

1.Define the brand identity

The application's look and feel must reflect DAI’s brand identity. I began by using DAI's brand guidelines (the tone of voice, color schemes, font family, and charts and graphs styles) to create the foundational elements for the Daiverse application.

COLORS

I created an extensive palette of tints and shades for the application based on DAI’s main color schemes.
I used the number range from 50 to 900 (lighter to darker shades or darker to lighter tints) to code the different tints and shades. This is the foundation of the Primitive color tokens.
I called these new tints and shades ‘Daiverse primitive colors’.

TYPOGRAPHY

Following DAI's guidelines on font family styles for specific use cases (see attached image), I used the Proxima Nova font family for the application.
I created a comprehensive typography style guide for the Daiverse application using the T-shirt sizing system, ranging from XXS to 6XL. This system provides flexibility and effectively highlights the design hierarchy.

2.Create variable (Tokens) collections

Design tokens represent the small, repeated design decisions that make up a design system's visual style. Tokens replace static values, such as HEX codes for color, with self-explanatory names. I defined 2 Variable collections for the Daiverse application: Primitive Tokens & Semantic Tokens.

Primitive tokens are the raw value tokens.
Semantic tokens are Primitive tokens in specific use cases

VARIABLE COLLECTION 1 – PRIMITIVE TOKENS

The Primitive Tokens collection is the foundation styles for Daiverse’s Semantic Tokens collection.

VARIABLE COLLECTION 2 – SEMANTIC TOKENS

Based on the Primitive Tokens, I created a Semantic Tokens collection to apply to all the product components. These tokens were added and adjusted over time as we designed, prototyped, and tested the application.

3.Create other foundation styles

GRID

I used the Column grid type with a 4pt grid system to apply to Daiverse application’s Grid styles.

SPACING

I used the 4-point grid system to guide and apply to all the space and sizing as we built the application, including: line heights, padding, margins, and gutters.

ELEVATION

4.Create COMPONENT LIBRARY AND DOCUMENTATION

Before building the library, I conducted thorough research into DAI’s existing interface inventory. Unfortunately, DAI had no digital products other than their outdated website. I integrated the most frequently used patterns and modules from their brand into the new components for the application.

Our team’s approach to building the library focused on creating frequently used components, avoiding a ‘graveyard full of components no one really needs.’ We only created new components after finalizing the UI for different pages and features of the application.

As Dan Mall stated in Design That Scales: ‘It’s significantly easier to fill your design system with components you actually need and will use when you have real content and real use cases’.

In this stage of the project, we started with the Light mode. The Dark mode will be developed in the next stages using Figma variables.

5.DOCUMENT THE DESIGN SYSTEM ON ZEROHEIGHT

I began documenting the tokens and components in the Description section on Figma as soon as they were created.

Our team chose ZeroHeight to organize, document, and collaborate with developers. ZeroHeight is intuitive and user-friendly, making it an ideal hub for our design system. I worked closely with the devs team to translate the components into code, then transferred the code snippets to ZeroHeight, ensuring it serves as our single source of truth

6.NEXT STEPS

Since the project is ongoing, there is still much work to complete our design system. Here are my plans for the next phases:

Create new components to support the application's evolving needs.
Continue to add, organize, and document components on Zeroheight.
Develop new modes for the application: Dark mode, and Mobile mode (At the early stage, we are focused on developing MVP1, with an emphasis on desktop design, as over 90% of DAI users work primarily on desktops and laptops.)
Discuss the implementation of Storybook with the devs team.
Research Figma’s upcoming new feature for Designers-Devs collaboration, ‘Code Connect’.