Dark Mode was in N26 mind for quite some time. However, when we first started working on it we just didn’t have the needed framework to make it happen quickly. Both the Android and iOS apps had no reliable design framework which allowed us to have that flexibility. Since then, we have been taking small steps every week, building a powerful design system and spreading its adoption through the app. At the beginning of this year, we were finally in a good position. All we needed was a small stretch. And then Get Dark Mode Done Days (GDMDD) happened: 3 days where more than 50 persons joined forces to get Dark Mode ready to release.
MOBILE
On the tech front, the “Dark plan” was delivered through a joint effort of 24 Android and iOS engineers, as well as some other engineers from Backend and SRE. The work started a few weeks before the GDMDD — with people from all the teams estimating the work needed and noting potential issues we could face with some legacy flows. Then, during the GDMDD, we decided to split the technical tasks into several groups, so that each of them had enough freedom to work on their topics without clashing on each other. At the same time, we had a smaller group of persons just focused on unblocking others, guaranteeing alignment, fixing any bugs, or unpredicted requests that popped out during those 3 days. The final result? More than 120 Pull Requests related to the initiative, a ready-to-ship app, and a lot of fun and hard work by everyone!
DESIGN
Like the Engineering teams, the design team started a few weeks before. The first design mission was to check the status quo. To help us with that, our engineering teammates prepared a test build and we reviewed which screens are not design system compliant. This also meant that those screens were not dark mode ready. Non-compliant screens were one of our main focus during GDMDD, so we noted them down on a big Figma board, alongside with other observations.
At the same time, we created a few dark mode variations for most-used screens and tried to cover almost all components. The winning version was the one that felt the most aligned with the N26 brand (when the lights go out) and dark mode best practices. Since 50 people needed to propagate and implement the final design, very clear guidelines had to be made. Colors, icons, typography, graphics, button states, and other elements needed to have a dark mode preview, while Figma file organisation had to enable people to know where the source of truth is and what is their playing area.
Together with PM Alex, we’ve set the stage for 3 intensive days (almost like a festival). We used Figma as our main remote board alongside Confluence, Jira and Hangouts. The Figma file had a page for guidelines called “Ready for development” and for each main section of the app, we also prepared one page. The team was organised so that each person worked on the part of the app they know the best (or based on the skill they are the best, e.g. iconography).
The Design team organised one touchpoint the week before. In that meeting, we talked about file organisation, design guidelines, and what is our strategy for GDMDD. During these three days, we had Dark Mode — Design Room on Hangouts to be able to announce changes, ask questions, align on open topics, or to work together remotely. The key ingredients for success were a great team, motivation, good task delegation, file structure, and design system.
SOFTWARE QUALITY
During GDMDD we were all extremely active. As proof, you can see a clear peak in the chart below. At N26, we foster the quality culture in every team, thus in this project, we were all testing. We managed to raise all together 71 issues related to the Dark Mode, 43 of which were reported by the QE team volunteers.
The Dark Mode initiative was then one of the most successful bootstrap projects boosted by our GDMDD days. It was amazing to see how more than persons were able to quickly organise and move towards a shared goal, with a high-focus on just focusing on delivering user value.
