Tegus: Dark mode | Melinda You

Overview

During my summer internship at Tegus, a side project I worked on was designing a dark mode theme for the flagship product, a specialized investment research platform providing comprehensive insights to professionals in the finance and investment industry.

My Role: Product Design Intern

I collaborated with 1 designer and 2 engineers on this project.

Duration

July 2023

3 weeks

Technology & Tools

Figma

Impact

THIS FEATURE WAS RELEASED IN Q3 2023

During the first week of the new dark mode theme’s launch to production, 6,000+ users logged into the Tegus product and 18% switched their theme to dark mode.

🏆 This is Tegus's fastest adopted feature ever that requires an explicit user action

Background

Tegus recognized the significance of introducing a dark mode theme to enhance user comfort, particularly for those who engage with the platform in low-light settings. As the nature of the platform is text heavy, this feature was important to reduce eye strain and glare.

THE PROBLEM

Initially, the dark mode theme applied in staging (test environment), was implemented simply by inverting colors from the design system's light mode palette.

However, as the original design system was not created with considerations for dark mode, many UI components deviated from the established design principles that were tailored for light mode, posing challenges for the current dark mode implementation.

Initial Dark Mode Implementation

I collaborated closely with software engineers to enable a seamless integration of a new, user-friendly dark mode. My goal was to craft a visually pleasing and accessible dark mode, with an emphasis on scalability for future enhancements.

Contextualization

Conducting an Audit

To gain insight into the current dark mode implementation, I began this project by undertaking a design assessment of the entire platform.

This allowed me to pinpoint aspects where the initial dark mode implementation fell short.

Primary Issues

The audit revealed several problems, chief among them were:

OUTDATE COMPONENTS

POOR CONTRAST

LACK OF DEPTH

Design Process

Updating the Design System

While engaging in discussions with engineers, it was evident that creating logic statements for dark mode that catered to individual instances and components would be highly inefficient. Instead, I aimed to establish a pattern for all components to easily translate from light to dark mode.

KEY DECISION

I proposed we revamp the dark mode color palette in the design system so that it would handle the universal mapping from light to dark mode, effectively reducing the heavy lift of the development team.

BEFORE

AFTER

A Roadbloack

In applying the modified dark mode palette, a unique instance was discovered in which a component failed to operate properly under depth patterns established for dark mode.

The background of the table was too light, leading to a lack of depth for components sitting on top of it.

With my knowledge of the technical capabilities of the system, I expressed my hope to avoid the need for any customized code to handle this exceptional use case.

SOLUTION

I recommended to both the design and engineering teams that a new color "name" be assigned to an existing color in both light and dark palettes that could address this use case.

A darker shade for any component sitting directly on top of the bottom-most surface color led to better perception of depth

This resulted in only one light-dark mapping to be updated by developers and further ensured scalability as this fix could apply to any current or future components with similar "stacking".