Objectives
The main objective of this project was to create a night mode of an existing navigation application on the market.
Current situation
The application not only lacked a dark mode but also had no consistent color or style system within the codebase. Nearly every element used its own unique values, which led to several issues. The team lacked clear specifications and guidelines when designing new elements, and even minor changes proved to be time-consuming.
Inventory
The first step was to identify all the main screens and components to understand what was needed and establish a solid starting point. I then created a color scheme for the light mode, removing any unnecessary values along the way. We defined the naming system and assigned tokens, also developing the corresponding dark mode equivalents for every value. Once every element in the design system was linked to a token, we proceeded to assign the appropriate values for night mode.
Tests
We conducted the initial tests under “combat conditions,” i.e., in a parked car inside a garage, with the lights turned off. However, this setup proved insufficient. Reflections, high contrast levels, and even the phone’s automatic settings affected readability. It wasn’t until we conducted on-the-road tests that the actual visibility issues became apparent.
Beta tests
Before releasing the app to production, we gathered feedback from our beta testers, which revealed several areas with insufficient contrast.
Conclusion
If I were to approach this project again, I would make several key improvements.
First, we should have created a comprehensive snapshot of all the screens within the application. Given the app’s complexity, we focused only on a few key screens. While capturing the entire interface would have required significantly more time, it would have also provided us with a more robust foundation for the design process.
Second, we should have conducted mock-up testing at the very beginning of the project. This would have helped us mitigate readability and contrast issues, in particular given the unique context of use, which presents a notable design challenge.
