Invesnity Dark Mode

Overview

Challenges

• Needed to restructure Design Tokens to align with Figma Variables while minimizing impact, as the Design System was actively in use by other designers.

• Ensured effective onboarding for the team to adopt and maintain the updated Design System.

Solutions

• Conducted testing on duplicated files to explore the best solution with minimal disruption.

• Organized step-by-step onboarding sessions and collaborated with the team to create a comprehensive manual as a long-term reference for maintaining the Design System.

Impact

• The team successfully integrated the updated Design System into their workflow.

• All designers are now capable of understanding, using, and modifying the Design System independently.

Tools:

• Figma

• Token Studio for figma

• Figma Variable

The Process

1. Research and Experiment

• Researched best practices and selected Material Design Guidelines as the foundation for developing a Dark Mode Design System, with a strong focus on accessibility, usability, and consistency.

• Duplicated the main Design System file to experiment with solutions and restructure both Design Tokens and Figma Variables without affecting the live system.

2. Get started

• Modified the Design Token structure using the Theme feature in the Token Studio plugin to support Dark Mode scalability.

 

• Selected primary, secondary, tertiary, and general color for Dark Mode, based on Material Design standards.

 

• Adjusted component colors one by one, ensuring all illustrations and visual elements maintain visibility and clarity in Dark Mode.

3. Launch

• Tested the stability of the updated Design System to ensure performance and consistency, then launched it and provided onboarding sessions for the design team.

• Exported the new token set and handed it over to developers for implementation.

The Process - Ends user touchpoint

1. Secondary Research

• Observed existing digital products and analyzed user flows for switching between light and dark themes.

2. Consultation

• After our research, we finalized the user flow with the design team and collaborated with the development team to validate technical feasibility before proceeding to the next step.

 

3. Usability testing

• Conducted usability research focusing on user behavior related to Dark Mode, including when and why users activate it, their preferences in different environments, and specific use cases such as viewing dashboards or graphs. The research combined usability testing with both qualitative and quantitative surveys to gather in-depth insights.