A monitor showing the Thomson Reuters website

Thomson Reuters

Let There Be… Dark
Thomson Reuters Dark Theme Explorations

PROJECT OVERVIEW

Thomson Reuters is the world’s leading source of news and information for professional markets. With a mission to “inform the way forward”, their custom reports and software solutions support Fortune 100 law firms, corporate legal departments, and governments, as well as tax compliance and accounting firms internationally.

The Thomson Reuters design team came to Allovus seeking help in creating UI and guidelines for a dark mode theme. Users had been requesting this functionality for some time, and with good reason: dark themes reduce eye strain and facilitate screen use in minimal lighting conditions. Additionally, customers used this mode to differentiate apps from one another when several windows were open at once.

For Thomson Reuters, many of these requests centered around the use of forms, as the dark text and outlined fields against a bright white background were proving stressful and fatiguing for users over time. Our team worked with our client to establish dark versions of key pages while maintaining the visual hierarchy of the originals.

GETTING STARTED

We began by auditing a variety of data entry and dashboard screens. Our goal was to assess how tonality played a part in the current hierarchy of information, as well as identify areas that did, or did not, currently meet WCAG 2.0 level AA contrast ratios for text. With regard to accessibility compliance, at the time of this project the Web Content Accessibility Guidelines (WCAG) version 2.0 AA was the most-used standard worldwide and included in the written guidelines adopted by the ADA.

Three screens with white input forms

Examples of the existing forms with white backgrounds. In the legal profession, teams of people spend hours a day entering data into forms like this, which can cause eyestrain and fatigue.

A screen showing a web form

Example of our review of text color values to meet WCAG 2.0 level AA contrast ratios.

WATCH YOUR TONE

Exploring the right tonality for the dark theme was vital. Dark themes are more than just black, white and gray values. They can be warm, cool, or neutral and affect the “feel” of the user experience—especially when shown with the brand’s primary color palette. Initial explorations produced four distinct palettes for consideration. Consultations with design leadership in other Thomson Reuters divisions helped identify the “neutral” scheme as preferred for the brand.

Cool

Example of color swatches against a cool colored background

Neutral

Example of color swatches against a neutral colored background

Slate

Example of color swatches against a slate colored background

Warm

Example of color swatches against a warm colored background

We selected several different tones and created mockups using the brand’s primary color palette.

Cool

Example of a menu list against a cool colored background

Neutral

Example of a menu list against a neutral colored background

Slate

Example of a menu list against a slate colored background

Warm

Example of a menu list against a warm colored background

Notice how these different tones of gray differ in their warmth, coolness, or neutrality, and how that changes the brighter colors seen against them.

REVIEWING COLOR OPTIONS IN CONTEXT

Tighter explorations helped us explore the right tonal values for backgrounds, form fields, navigational elements, fonts, and icons. Fonts and key elements were also reviewed to make sure minimum contrast ratios were met. Our goal was to create a rich experience for the user when in dark mode, as well as respect the visual hierarchy established in the white (normal) view.

Four screens showing a web form in varying tones.

Tighter explorations using layouts and form fields allowed us to explore the right tonal values for all of the elements of the user experience.

“DARK” SPECIFICATIONS

Once our client selected their preferred color scheme, our team provided thorough specifications for their designers and engineers.

Two screens with web forms and menus

AND THE DARK WAS GOOD

In some applications, dark themes seldom get explored by users. In Thomson Reuters’ case, legal professionals and their teams could spend hours a day—or night, for many support staff members–using these applications to input and review large amounts of data. Dark themes are known to be less fatiguing, and enhance the user’s experience. With this addition, Thomson Reuters was able to add value to its product by delivering one of the most requested features by customers.

We enjoyed collaborating with our Thomson Reuters partners a great deal, especially on a project that was so focused on accessibility and user-centered design.

Thomson Reuters Allovus

YOU MIGHT BE CURIOUS ABOUT THESE PROJECTS

Simplifi by Quicken
My Wellness Product Design
Sharepoint UX Design
Thompson Reuters User Experience Design
Microsoft Illustration
Thomson Reuters User Experience Design
Permission to Start Dreaming
Big Bold Health
Big Bold Health

How can we help you explore your dark side? Reach out to us to connect, and let’s get started!