RapidResponse Dark Mode

Visual Design, Theming

During my time as a visual design intern, my manager tasked me with designing a dark theme for our product: RapidResponse. More specifically, for the web client (aka: The New Planning Experience). I needed to explore how other products approach theming, so that I could apply it to the New Planning Experience. The final designs are concepts that are being considered for future roadmaps.

Why Dark Mode?

Dark themes are beneficial because they help reduce eyestrain. They facilitate screen use in darker environments, and help conserve battery power.

It offers more than what suits us

Having a dark theme gives users a choice in how to interact with the New Planning Experience. Giving people a choice in how to interact with the product is basic & should be obvious. Ultimately, a dark theme gives customers the power to make choices that suit them.

“Giving people the choice in how they interact with your company is as basic and should be as obvious as offering them a choice of models. Combining traditional channels with mobile and social ones and optimizing all of them to give control to the consumer is in and of itself an extremely strong message which states that you are giving your customers the power to make the choices which suit them and not just offering what suits you.”

- Orest

Research & Discovery

I based most of my research on Material Design’s dark mode guidelines. This was because most of RapidResponse’s UI components are inspired by Material Design. I also consulted a fellow designer who has worked with dark theming before. He gave me some insights that proved helpful to my design process.

Principles

Here are some key design principles outlined by Material Design:

Properties

Elements that make up Material Design's Dark Mode

Surface Colour

Dark mode surface colours should be dark gray instead of black. This is because dark gray surfaces express wider range of colour, elevation & depth than black.

Elevation

Higher surface elevations become lighter. This is done with placing semi-transparent (white) overlays on the surface colour. Transparent colour overlays ensure consistency on different surface elevations.

Colours

Desaturated colours avoid eye-strain & are better for legibility. Using tonal colour palettes can help meet accessibility standards. However, brand colours should use full saturation, for the sake of brand consistency. (ex: Brand Logos).

Typography and Icons

Material Design uses “On Surface” colours for typography & iconography. On Surface colours:

  • Are typically white and black.
  • Are white on dark backgrounds, and black on light backgrounds.
  • Are applied to text, icons and strokes.
  • Are placed on top of key surfaces that use primary, secondary, error colours etc.

Emphasis for Text

Material Design uses light text and opacity levels for typographic hierarchy. Using opacity levels for type keeps the type system consistent.

Accessibility

Dark theme surfaces should be dark enough to display white text properly. They should have a contrast level of at least 15.8:1. This ensures that body text passes WCAG’s AA standard of at least 4.5:1 when applied to lightest elevation surfaces.

Inspirations

I took a look at existing dark themed products/UI for some design inspiration. I needed to see what trends they were using, as well as how their colours interact with their UI components. Some popular products I took a look at were: Spotify, Microsoft Teams & Twitter.

Colours & Themes

The research I have done on Material Design gave me an in depth understating on how dark themes are designed. It was finally time for me to start translating RapidResponse’s Colours to a unique Dark Theme. This stage took the most work, because I had to test how the colours interacted with the rest of the UI.

I created colour usage guidelines after designing the new colour palette. I listed each of the theme's colours as well as their usages throughout the UI.

I also had to specify colour usage for typography. This is to ensure the typographic hierarchy stays consistent throughout the dark mode.

UI Components

Finalizing the colour palette allowed me to start translating UI Components to the Dark Mode Theme. Overall, the components translated well. I received some feedback from the UX team, and made some revisions to the designs. Below are the finalized dark mode UI components:

Elevation

The next step was to determine the lightness of overlapping surfaces. I created a table which organized the UI components/surfaces and elevation levels. This was an iterative process — I had to test each UI surface at each elevation level.

Figuring out elevation levels for the UI was challenging, since the RapidResponse product is a lot larger and more complex than a regular mobile app. Many components were decided to have multiple elevation levels depending on specific use cases.

Product Mockups

I was able to bring everything together and create high-fidelity product mockups. Unfortunately, there are some that I couldn't show due to confidential reasons. I made sure to design mockups that show a variety of UI components/elevation levels working cohesively.

Reflection & Next Steps

This project taught me a lot about theming. Material Design’s guidelines made me realize how important colour accessibility is in UI design. Learning about elevation levels for dark themes was also a big part of initial research. I realize that theming is more than just swapping out colours — and that there’s a reason behind every decision. After all, dark themes are designed to satisfy the user.

I presented my concepts and research to both the UX and front-end development teams. My designs were positively received, and the dark theme is now being considered for the 2021 product roadmap! Future steps for the dark theme include visualization & charting colours. I will work with the development team to implement dark mode to the Parcel Design System.