Lennox International Dark Mode

Lennox International
HVAC Technician Dark Mode

My Roles

  • UX Designer & Research
  • UI Design

Project Background

A leading HVAC manufacturer identified an opportunity with its field techs when it was discovered that the techs encounter problems reading the screens of their mobile phones and tablets due to excessively bright light (sunshine when outside), low ambient lighting (attics and crawl spaces), and especially the adjustments necessary in going back and forth between the two environments.  Dark mode (also known as theater mode) is a color arrangement used in web design where the scheme introduces light on dark colors or graphical elements (rather than the normal dark on light) in order to produce a softer viewing experience, and allow for adjustment of the eyes to the more difficult viewing conditions. The result is enhanced viewing in bright sunshine and augmented visibility in low ambient light. Both of these outcomes assist the technician who must refer to a device repeatedly during a repair.

Task And Mission

  • Incorporate Dark Mode into Cirrus (Lennox International style Guide)
  • Create a certain charisma that could be associated with boldness, formality, sophistication, mystery, strength, and luxuriousness 
  • Aid in the viewing devices in bright sunshine or low ambient light 
  • Ensure accessibility and Section 508 compliance
  • Assist with ADD distractions
  • Highlight a specific type of content
  • Comply with material design specs and contrast checker 

 

DISCOVERY

Research Goals

  • Quantify the number of times per day a tech would have need for a Dark Mode setting
  • Ascertain the current frequency of use for Dark Mode in participants where available
  • Identify if participants toggle between normal and Dark Mode settings depending on the environment (dark vs light) or based on the time of day (night time vs daytime) 
  • Qualify how valuable would Dark Mode be in both direct sunlight or dim light settings 
  • Identify likelihood of techs using Dark Mode if it was available in their work application
  • Identify the efficiency created by a dark mode setting in completing a task 

Accessibility (Section 508 Compliance)

Certain procedures that need to be followed when designing a UI Dark Mode. The team was careful to comply with the best practice checklist created during their research process in order to ensure accommodating WCAG accessibility standards. Material design specs and contrast checker were utilized to still maintain the look and feel of the Lennox brand 

 

DEFINE 

Personas

For this project, two personas were developed in order to better understand the target audience. They represented a variety of backgrounds so that our Dark Mode theme  would reflect the needs of all users. Our personas ranged from ages 26-38, were mostly looking for a new approach to the Lennox Style guide , and would like to find more information on if the users could use Dark Mode . This allowed us to understand our user’s needs, and keep them in mind when designing. These two personas were born out of the research done in the previous phase. 

Root Cause Analysis

A root cause is defined as a factor that caused a nonconformance and should be permanently eliminated through process improvement. The root cause is the core issue—the highest-level cause—that sets in motion the entire cause-and-effect reaction that ultimately leads to the problem(s).

Root cause analysis (RCA) is defined as a collective term that describes a wide range of approaches, tools, and techniques used to uncover causes of problems. Some RCA approaches are geared more toward identifying true root causes than others, some are more general problem-solving techniques, and others simply offer support for the core activity of root cause analysis.  

Competitive Analysis

A competitive analysis was undertaken not quite so much as to evaluate the competition, but to evaluate different approaches others have taken with Dark Mode on mobile devices. Reviewing other approaches allows the spotting of trends, tactics and being on the cutting edge rather than reinventing the wheel. 

 

DESIGN 

Mood Board

Inspiration to drive the creation of concepts for consideration. Potential colors, fonts/typography, textures, are all candidates for exploration. Various other dentistry sites were reviewed and collaged in an attempt to identify what elements elicited the desired emotional response in users. Feedback was compiled to identify what compilation produced enhanced legibility and reduced visual strain. 

Recommendations & Best Practices

  • A dark theme doesn’t have to be pure white text on a pure black background 
    • In fact, that high contrast can be painful to look at
    • It’s safer to use dark gray as the primary surface color for components, rather than true black 
    • Dark gray surfaces reduce eye strain–light text on a dark gray surface has less contrast than light text on a black surface
    • Material Design recommends #121212 as dark theme surface color
  • Avoid using saturated colors on dark themes
    • Saturated colors which can look great on light surfaces, can visually vibrate on dark surfaces, making them harder to read
    • Desaturate primary colors in order to make the contrast enough against the dark surface 
    • Use lighter tones (colors in the 200–50 range) because they have better readability on dark theme surfaces
    • Lighter variants won’t make the UI less expensive, but they help maintain appropriate contrast without causing eye strain
  • Meet accessibility color contrast standards 
    • Ensure that your content remains comfortably legible in Dark Mode 
    • Dark theme surfaces must be dark enough to display white text
    • Google Material Design recommends using a contrast level of at least 15.8:1 between text and the background 
    • Use color contrast Tools / UXPRO for Testing color accessibility
  • Use “On” colors for text
    • “On” colors are colors that appear “on” top of components and key surfaces
    • They are typically used for text
    • The default “on” color for dark them is pure white (#FFFFFF)
    • But #FFFFFF is a bright color, and it would visually “vibrate” against a dark background
    • That’s why Google Material design recommends using a slightly darker White:
      • High-emphasis text should have an opacity of 87%
      • Medium emphasis text is applied at 60% 
      • Disabled text uses an opacity of 38% 
    • Quick tip: Light text on a dark background can appear more bold than dark on light 
    • Use lighter font weight for dark mode 
  • Consider the emotional aspect of your design
    • When it comes to designing a dark theme for an existing app, you probably want to communicate the same spectrum of emotions in dark mode. But it’s better not to do it. Why? Because colors are actually perceived differently depending on their background  
    • That means a dark theme just can’t communicate the same as the light theme
    • As a result, dark and light themes will always evoke different emotions
    • Instead of trying to fix that, it’s much better to take advantage of that for product’s identity
    • A dark mode does not(always) must be derived from the existing light theme
  • Communicate depth
    • Similar to light theme design, when it comes to creating dark theme UI it’s essential to create hierarchy and emphasize important elements in your layout 
    • Elevation is a tool we use to communicate the hierarchy of elements  
    • The higher surface gets, the wider a shadow it casts
    • The same approach wouldn’t work in a dark theme–it’s hard to see shadow against a dark background. It’s better to illuminate the surface of each level
    • In dark themes built with Material, elevated surfaces and components are color using overlays 
    • The higher a surface’s elevation, the lighter that surface becomes. Higher elevation, lighter surface
  • Allow users to switch from regular to the dark mode
    • It’s tempting to let the system decide when to turn on or off dark theme. However, this design decision can lead to bad UX
    • This takes control from the user, and lets the system decide 
    • It’s better not to use auto-enabling a dark theme 
    • Allow users to turn dark theme on (or off) using UI control
    • Users should be able to opt into a mode manually, based on their own needs 
    • You need to position and design the mode switch 
  • Test your design in both light and dark illumination 
    • Review your UI in both appearances, and adjust your designs as needed to accommodate each one
    • Consider testing your product after sundown, with incandescent lighting

High Fidelity Prototype

Once the color scheme was established, creating the high-fidelity wireframe/prototype inside of Adobe XD was the next progressive step. Here the UI starts to become evident,  and I was careful to stay within the parameters of the already established branding of the app.  
 

AB Testing (Contrast and Complementary Colors)

A/B testing is used to determine which of multiple different designs of a page performs better when shown to users. In this case the variants all surrounded color scheme. Given that layouts, text, and navigation were all constant, would the colors, hues, or pairings have a impact on user performance or preferences? Statistical analysis of the responses then determine which variations perform better for participate population. 

1Mockup
11Mockup
13Mockup