Let There Be… Dark
Thomson Reuters Dark Theme Explorations
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.
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.
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
Neutral
Slate
Warm
We selected several different tones and created mockups using the brand’s primary color palette.
Cool
Neutral
Slate
Warm
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.
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.
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.
YOU MIGHT BE CURIOUS ABOUT THESE PROJECTS
Sound Transit
OneDrive SharePoint
Thomson Reuters
Microsoft AI Foundry
UW MHCI+D
Microsoft Teams
Microsoft Fluent
Ideation and Storytelling
Big Bold Health
twrk
VISION TO REALITY
Quicken Simplifi
Thomson Reuters
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
