Tegus: Dark mode | Melinda You

MY ROLE

As a UX Designer I led a design audit, analyzed UI component accessibility, updated the design system and collaborated closely with design leadership and engineering teams.

TOOLS

Figma, FigJam, Storybook

TIMELINE

July 2023 (3 weeks)

BACKGROUND

Tegus is a B2B and B2C market intelligence platform that provides investment research insights. It connects subject matter experts with customers to help them research products, companies, and markets.

OVERVIEW

During my summer internship at Tegus, one project I worked on was designing a new dark mode theme, focusing on visual design, accessibility, and scalability while collaborating with engineers to release the feature.

IMPACT

🏆The fastest adopted feature in company history

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

CONTEXT

Dark mode enhances user comfort, reducing eye strain and glare in Tegus' text-heavy platform

An initial dark mode theme was applied in the test environment, implemented by inverting colors from the design system's light mode palette.

INITIAL VERSION OF DARK MODE

MY GOAL

I aimed to improve the initial version of dark mode under an accelerated timeline, enhancing its usability

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.

CONDUCTING AN AUDIT

Identifying key gaps in the initial dark mode version enabled targeted improvements

I began the project by undertaking a design assessment of the entire platform with the support of one other designer. I categorized and documented all major issues.

THE PROBLEM

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.

OUTDATE COMPONENTS

POOR CONTRAST

LACK OF DEPTH

USER ACTION

How will users switch between light and dark mode?

DESIGN CONSIDERATIONS

Ensure clear purpose by using labels, icons, and colors to indicate the available action.

Utilize existing components in the design system to streamline development.

Integrate placement into side menu for visibility and easy access.

Indicate status to show which mode, light or dark, is selected.

ITERATIONS

FINAL TOGGLE DESIGN

User control in context

DESIGN STRATEGY

Implementation catering to individual component instances is highly inefficient

While engaging in discussions with engineers, it was evident that developing logic statements that addressed individual issues that were discovered was not feasible. Instead, I aimed to establish a pattern for all components to easily translate from light to dark mode.

KEY DECISION

I proposed redefining the dark mode palettes in the design system

Creating universal mappings for light-to-dark mode effectively reduced the heavy lift of the development team.

Example: Neutrals Color Palette

INITIAL VERSION

PROPOSED VERSION

UI COMPONENTS

Below are a few specific examples of components of the Tegus design system that I used to explore mappings and establish the new dark mode color palettes.

LIGHT MODE

INITIAL VERSION

PROPOSED VERSION

The dark mode theme I proposed was implemented and deployed to the test environment by the engineering team. We then did another audit of the platform together to review the changes.

ISSUE DISCOVERY

A component failed to operate under visual hierarchy rules established for the new dark mode

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

CHALLENGE

While maintaining UX consistency and accessibility was crucial, making an exception for this one instance wasn’t simple for engineers, as it would compromise the system’s scalability and maintainability.

SOLUTION

Establish a new design system rule to address the visual hierarchy pattern

With my knowledge of the technical capabilities of the system, I recommended that we could make a systemic change to the design system by using an existing color for the table component background and create the rule for this pattern by simply assigning a new name to the color.

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-to-dark mapping to be updated by developers and further ensured scalability as this fix could apply to any current or future components with a similar visual hierarchy.

FEATURE RELEASE

Dark mode was released in Q3 of 2023 and became the fasted adopted feature in company history

It was incredibly rewarding to see this achievement during my time with Tegus. This UI-focused project allowed me to collaborate closely with developers under an accelerated timeline, strengthening my ability to balance design vision with technical feasibility.