Unified Dark Mode: Reality Check
It’s time to reevaluate the unified dark mode we developed in the previous year, its performance and the challenges we had to overcome. As before, this article focuses on the idealo Shopping App, the mobile counterpart to Germany’s leading price comparison platform.
Recap
The idealo iOS and Android App had diverging approaches to dark mode development as we oriented ourselves towards OS standards. Our corporate design did not support dark mode colors at all. We chose to redesign both app dark modes to a single color system that also addressed existing accessibility contrast issues. Based on our original corporate design, we carefully changed colors until they passed APCA requirements. We also changed the color system to be semantic and less confusing for designers and developers alike. Dark mode stays remarkably popular among our users with around a 50% user share on iOS compared to roughly 33% on Android.
Implementation pains
We tested our new color scheme in an A/B test to check if any KPI might prove problematic, as we do with every major change. In this case the technical aspect was especially difficult. Introducing a new color system meant readapting the old colors to the new color system, as we still needed the control variant. We also had to remove hardcoded colors from interface builder and replace pre-colored assets with dynamically tinted ones.
Example color definition for our test
For each of the new semantic colors a fallback color needed to be created and referenced like this:
static var surfacePrimaryToSecondary: UIColor {
Self.shouldUseLegacyColors ?
UIColor(light: .white, dark: .legacyGray800) :
UIColor(light: .white, dark: .tint700)
}An exact copy of the old color scheme was only possible with hardcoded exceptions in some areas and even more thorough testing. Thankfully we had very patient frontend devs.
A sobering first test
When results came in, we were surprised — to say the least. Even though we expected minor fluctuations we certainly didn’t expect the overall worse performance:
Product page interaction decrease
On our product page/offer page cluster we had a significant decrease of price alerts and bookmarks created, both > -5%. Product variant selections were reduced by 2%. Strangely enough in light theme this was countered by about +3% more slider interaction on visually no difference. Even though our main earnings are driven by users comparing prices and converting in shops — called clickouts — were not affected, we felt we had to improve before rollout and started investigating.
Creating hypotheses
Looking at lots of before/after pictures helped a lot in understanding what was going on. If you compare old and new variant it might seem pretty obvious: The old variant had more contrast in its action buttons and this might be a reason to perform better. The problem is even larger due to the white background our product pictures unfortunately all have. It makes the new darker buttons drown even more.
One could argue due to maximalized contrast before we had an overperformance in dark mode compared to light mode. There were some indications in the data for this to happen but still we were not able to accept the decrease in interaction. However, reverting to the old pattern was not an option, in a dark mode friendly design system the previous maximum contrast approach would not fit in properly. So we had to get creative and develop new solutions to counter the effects on our KPI.
Solution ideas
Making a virtue of necessity was one approach we discussed, meaning increasing contrast by expanding the white background behind the buttons in the product picture.
We also tried bumping the button tint to be brighter, but realistically, nothing would even come close to the white-to-nearly-black contrast in control.
Another idea was emphasizing our action color blue and put it on all interactive elements.
This is what we were going with in the end, additionally we added faint outline to buttons in a C variant. Hopeful we went into the second test as we antipicated the blue to have a higher affordance across all views.
A ghastly second test
Disappointment settled in when the numbers for our second A/B test turned up. We were able to stabilize our bookmarks and even managed to raise price alert numbers by a few percent. However, we had an actual decrease in clickouts — our main KPI for users comparing prices. This was unacceptable and another round of ‘trying to understand what was happening’ set in.
The most challenging result was missing clickouts. As changes on the offer list were so minimal we suspected the culprit elsewhere. Looking at the data collected we found significant drops in the interaction with variants of a product which could have led to an overall decrease in successful price comparison, meaning less clickouts.
For the next iteration we decided on the following improvements:
1. Increasing general brightness of tints in general to make tiles stand out more against the background
2. Fix of missing contrast in delta filter tile
3. Increased contrast in unselected delta filter
4. Each of above fixes in a version with white icons vs one with blue icons for a standoff
The magic third test: Finally successful
Finally we had numbers we could settle with: No decrease in bookmarks nor overall price alerts set — as well as no difference in clickouts. Surprisingly, blue icons did not achieve the same impact as in the second test. According to our data analyst:
“The variant with the white icons shows a slightly smaller drop in variant slider interactions, and thus might work a bit better than the one with the blue icons”
Why blue did not have the same impact again — no idea honestly. But this made the decision for the less colorful white variant easy as from a design perspective it also reduces visual noise and sticks closer to the original concept and light theme.
Final thoughts
Introducing a common dark mode by revamping the color system turned out to be a rough journey that was not over with the first release. In general we were surprised by the impact even tiny nuances in appearance had on user behaviour and lots of the shifting numbers were difficult to trace back to a single color change. The complexity of tweaking a new system that impacted all views of our app has been a challenge. Two iterations were necessary to fix missing contrasts and visual miscues. Now the deed is done in iOS. Some time this year we will adapt Android and reap the fruits of our work: One common color system that complies with accessibility standards for both apps and an intuitive naming scheme.
