Power Bi Mobile | Microsoft
Dark mode iOS
BI Mobile is an app that empowers people inside an organization to consume and monitor important data and get insights trough beautiful reports & dashboards
Our users use the app mostly as it’s easier to consume data on the go, doing tasks such as viewing and analyzing reports, creating screenshots, sharing data with colleagues, or commenting
Our goals
● Supporting Dark mode OS part of the iOS 13 Compliance.
● Improving the experience by aligning our colors and elements in both Light/Dark design system.
● Remove unnecessary cognitive friction
● Support the accessibility features
● Increasing our visibility in the market
● Improving the experience by aligning our colors and elements in both Light/Dark design system.
● Remove unnecessary cognitive friction
● Support the accessibility features
● Increasing our visibility in the market
First things first: Digging trough legacy
In order to start the work on new dark colors, I had to understand what colors we use today, and yes, we have a design system, but as most of the product, we also have hidden hard coded colors from previous design legacies. Those had to be deprecated and aligned to our current design system, in order to do so, I created an audit of all the screens we have today all over the app (both iPhone & iPad, since some of the experiences, are different).
Accessibility constraints
The audit of the app screens, gave me a better perspective of the color usage today, which helped me to work with those colors and find his appropriate ‘twin’ in dark mode.
Since we use 3 different background colors (for example the main app screen get color 1, the card background on this main screen get color 2, the header and footer backgrounds of the app get background 3), I had to make sure that all of the text/icons/action link colors pass the WCAG accessibility bar, both on light and dark mode themes.
Since we use 3 different background colors (for example the main app screen get color 1, the card background on this main screen get color 2, the header and footer backgrounds of the app get background 3), I had to make sure that all of the text/icons/action link colors pass the WCAG accessibility bar, both on light and dark mode themes.
As part of this work, I created a guide to which color one should use when working with Primary / Secondary / Disable color cases to add to our design system
Thinking not only around technical standards but also users personalization
Screen brightness
Each person adjust its brightness colors different, which may cause to some colors look less vibrant or even disappear when the brightness is 0% or 100%
Day time
Our smart devices know how to detect our environment and adjust their color during the different times of the day, you might find your screen more blueish (at night) or yellowish (at day) using BlueLight
Color contrast
Contrasts are important, using the different brightness % and the environment (Blue light) will change that basic properties and create a personalized 'color' for each user. We need to make sure we pass those thresholds of contrasts
Color usage
The vast work I did on the accessibility helped me to create the logic for color usage and behavior for both modes, to decide which components will receive X color, which will receive Y background, and the most important is how those too work holistically together when switching between modes while keeping in mind that each user prefer different brightness, which may give the colors a slightly different ‘shade’ to the eye.
Adaption
As for today, we received very good feedback from the user. The adaption of the feature (both iPhone & Tablet) is around ±25% of iOS users.
The next steps are to create the Dark mode theme both for Android & Windows.
The next steps are to create the Dark mode theme both for Android & Windows.
Next steps
As for the next steps, myself and the team will work on the feature for other platforms: Android, Windows.
Contact me ;)
For work, commissions, inquiries etc. please get in touch
