A monitor showing the Thomson Reuters website Thomson Reuters
Let There Be... Dark
Thomson Reuters Dark Theme Explorations
Thomson Reuters
Let There Be... Dark
Thomson Reuters Dark Theme Explorations
A monitor showing the Thomson Reuters website

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 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.

A screen showing a web form with hex values assigned to colors
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 logo, Allovus logo

You Might be Curious About These Projects

SimplifiSimplifi
My WellnessMy Wellness
Thomson Reuters Site DesignThomson Reuters Site Design
Thomson Reuters Data DisplayThomson Reuters Data Display
Microsoft Global HealthMicrosoft Global Health

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

Connect

Allovus

8811 N. Harborview Dr.  |  Suite C  |  Gig Harbor, WA 98332

Get in touch

info@allovus.com

Call us

425.255.6887