The birth of the Dark Mode: a journey into Nubank’s app evolution

Written by Carla Demarchi, Eduardo Roder, Enzo Zuccolotto and Marina Brustello

In the ever-evolving world of digital applications, the Dark Mode feature has emerged as a game-changer, enhancing user experience across various platforms. One company that has successfully harnessed the power of this feature is Nubank, a leading player in the fintech sector. 

This article takes you on an insightful journey, exploring how Nubank has innovatively integrated Dark Mode into its app, responding to user demands and setting new standards in the industry. From the genesis of the idea to the development process, overcoming challenges, and user reactions, we delve into every aspect of this fascinating journey. 

Whether you’re a tech enthusiast, a Nubank user, or someone interested in user-centric design, this deep dive into Nubank’s Dark Mode innovation offers valuable insights. So, get ready to illuminate your understanding of Dark Mode and discover how Nubank is redefining user experience in the fintech world.

The decision to introduce the Dark Mode into Nubank’s app was far from arbitrary. It was a calculated maneuver, propelled by a fusion of customer requests and the prevailing digital trends. Intriguingly, despite not being a financial product, the clamor for this feature was remarkably high among Nubank’s clientele. This demand, in tandem with the rising popularity of Dark Mode in the digital sphere, spurred Nubank to embark on the adventure of crafting this feature for its app.

The crafting of the Dark Mode was an intricate process involving multiple stages and teams. The voyage commenced with the design team, who envisioned the aesthetics of the Dark Mode. The utilization of design system tokens was instrumental in this phase, empowering the team to delineate colors, typography, and spacing that would harmonize with both light and dark themes.

A design token, for those who don’t know, is a single value that represents a specific visual or functional attribute used in design systems to ensure consistent and efficient design implementation across different platforms and devices.

Simultaneously, the engineering team was working to transmute these designs into a functional feature. A key strategy employed during this phase was the “fallback” approach, which is used when a given screen isn’t updated on the latest version of the Nu Design System (i.e. the tokens aren’t available for the current version, therefore the screen “wouldn’t know” how to change colors for Dark Mode. 

With this approach, instead of having to upgrade more than 3 thousand screens one by one and delaying the feature’s launch, we were able to deliver it faster.

The journey was not devoid of obstacles. The primary challenge was the sheer magnitude of the task: adapting all 3000 screens of the Nubank app to Dark Mode. This necessitated a meticulous approach and a robust testing mechanism to ensure consistency and functionality across all screens.

The principal benefit of design system tokens lies in their capacity to produce consistent, reliable user experiences. These tokens, by bringing uniformity to design choices, lower the cognitive burden on the user, paving the way for a more instinctive and pleasant user interface. In addition to this, they expedite design and development, enabling teams to prioritize novel ideas and enhancements in the user’s journey, instead of wrestling with the irregularities and repetitions that can occur during the design process.

Another significant hurdle was the technical complexity involved in implementing Dark Mode. This necessitated the team to develop a fallback mechanism that would allow the app to switch to Dark Mode, ensuring uninterrupted service to the users.

Once the Dark Mode was crafted, it underwent rigorous internal testing. The functionality of the feature was scrutinized, and any glitches were identified and rectified. Feedback was also collected from Nubankers and NuCommunity members, providing invaluable insights that helped refine the Dark Mode further.

The feedback received played a pivotal role in the iterative process of enhancing the Dark Mode. Based on the feedback, significant modifications were made to the design and functionality of the feature. For instance, the appearance of the app’s tabs in Dark Mode was adjusted to enhance visibility and user-friendliness.

The unveiling of Dark Mode was met with anticipation and excitement. The success of the feature was evaluated based on user feedback and usage data. The positive response from users was a clear indicator of the feature’s success.

The user feedback post-launch was overwhelmingly positive, with many users appreciating the new, visually appealing interface. The most gratifying aspect of the development process was witnessing the positive impact of Dark Mode on user experience. The project also underscored the importance of user-centric design and the value of iterative development based on user feedback.

Balancing aesthetics and functionality in Dark Mode

The pursuit of balance permeated the entire project of designing the Dark Mode. A prime example was the decision to adopt pure black as the background color. The intention was to make the experience of our app as native as possible, matching popular operating systems like iOS and Android. Moreover, devices with OLED screens turn off the light for pure black pixels, which can aid in battery conservation.

Another instance was when we opted for a palette of neutral grays, when we could have chosen cool or warm grays. This was a decision we had made earlier, with the revision of our Color foundation, even in Light Mode. With the Dark Mode, we reinforced the decision with the intention of maintaining a blank canvas so that the experiences of the products stand out, without a chromatic interference in the neutrals, as they appear very frequently in the interface.

Overcoming design challenges in Dark Mode

In the initial iterations of the Dark Mode, the color inversion made surfaces using Nubank’s characteristic purple become light (light purple), with black text. We understood that this combination distanced itself from our brand, so we worked to maintain the visual aspect of Light Mode in some contexts. We darkened the purple just enough, reduced the saturation a bit, and kept the white texts on top of these surfaces, like on the buttons.

Another related challenge was the purple of the PJ account, which is darker than the traditional one. We also darkened this purple for Dark Mode, but in this case, we needed to solve a contrast problem, as this color did not always appear enough in combination with the dark gray tones of the interface. To solve this, we made some iterations testing different contrast rates until we reached a balance between these needs.

Ensuring a better visual experience in low light environments

We worked to ensure that even with the reduction of brightness, the Dark Mode still meets the minimum contrast rates, which were adjusted to ensure a good experience. In addition, we adjusted the colors of the texts, so that they remain lighter on the black background, avoiding an exaggerated contrast, as well as the reduction of the saturation of the colors, so that they do not shine too much in the dark context and create discomfort for the eyes.

Eye strain and accessibility considerations

Although Dark Mode is not a solution focused on accessibility, there is a considerable improvement in relation to the use of the mode by people with visual impairment, such as low vision and photophobia. The reduction of luminance emitted by the device screens aids in visual ergonomics by reducing eye strain, adjusting the brightness to the lighting conditions of the moment and facilitating the use of the screen in darker environments.

Aligning Dark Mode with Nubank’s design principles

Smart efficiency was one of the pillars throughout the entire project, looking for simple and scalable solutions as a starting point. An example is that our goal for the initial launch was to make the same illustrations work well in both Light and Dark modes, avoiding the complexity of having a dark version for each illustration at first.

For this, we adjusted some details in the system so that the illustrations also worked in Dark Mode. As in the case of shadows projected on the ground, which purposefully disappear in the dark context. Or very light grays, which became darker to gain more contrast between them.

The journey of developing Dark Mode has been a testament to Nubank’s commitment to user-centric innovation. The feature has had a significant impact on user experience, providing a visually appealing and comfortable interface for users. The development process, from the initial decision to introduce Dark Mode to its final implementation, has been marked by a commitment to continuous improvement based on user feedback. We encourage all users to explore and use the Dark Mode feature in Nubank’s app, and we look forward to continuing to enhance this feature based on your feedback.