Dark Mode: Investing in a new light
We’ve finally flipped the (light) switch on this delightful feature, now available in our app.
In the beginning, our vision was bright: make it easy and simple to start investing. Now, with the brightness turned down, we made investing easy on the eyes, too. Introducing Betterment in dark mode.
In today's all-mobile, all-the-time world, we know how important it is to continue making our app experience a premium one. We place a high value on active listening and responding to our customers' needs. And this is one particular request that customers have been hoping we’d bump to the top of our list. We heard you. And as many of us on the design team are avid dark mode users ourselves—we agree! Dark mode reduces eye strain, saves battery life, and also is just kind of cool and mysterious. Close to 80% of people use their devices in dark mode and between 91% to 95% of all device users say they prefer dark mode over light mode.* But hey, if you don’t agree, light mode isn’t going anywhere, either!
So what did we do?
Defining Design Tokens
The first step was working with our engineering team to define design tokens for every element of the user interface (UI). Design tokens are named elements that store design attributes such as color. This allows design and engineering to have a shared language over how color is used and each token can have an assigned value for both light and dark themes.
Expanding Our Color Palette
We also expanded our color palette to a broader range of values for each of our color primitives. This helped us when choosing colors, as we could pull from the opposite side of the scale to ensure that our UI would have the proper contrast, and remain accessible in both light and dark themes.
Mapping Colors to Design Elements
With our expanded color palette and design tokens in place, we then mapped every design element to a color for both light and dark themes. This mapping process ensured that when the theme switched between light and dark, each element on the screen automatically adapts to the appropriate color.
Adjusting Icons and Illustrations
The final step was adjusting our icons and illustrations to work in both modes. We carefully evaluated each icon and illustration, making necessary adjustments to ensure they were clearly visible and maintained their visual appeal in both light and dark modes.
We think that the introduction of dark mode is about more than visual adjustments; it's a step towards creating more accessible and user-friendly digital products. We hope that sharing our journey will inspire other teams to embrace the challenge of building for dark mode. So thank you for being patient with us as we finally flip the (light) switch on this delightful feature. We love being able to listen to our customers and deliver upon their requests, any way we can. Especially when it makes your experience more personalized and user-friendly. So turn the brightness down, the ease and simplicity up, and enjoy investing in a whole new light (which is no light at all.)