Overview

Dark theme has been a requested feature for the BNZ customer base and it has been a part of a wider theming project for the BNZ design system. It allows the user to have the choice in which they would rather view their application in; light, dark or default which will be set to the device settings. As Material and iOS design are now making it an essential part of their UI, there is a need for native applications to also support this feature.

Dark mode helps general accessibility needs such as users with low vision or have photosensitive conditions as well as users who want to reduce their eye strain in low or no light environments. So while dark mode isn’t for everyone, it can benefit everyone so giving customers the option is important.

How might we improve accessibility by implementing dark mode for the BNZ native applications?

Users and audience

Dark mode theming is for any BNZ customer that is mobile active. While this feature may only be used by customers who prefer to view their application in a darker mode, it is available to all customers so therefore needs to have accessible standards for all to use.

Roles and responsibilities

This was very a collaborative project as it spans a wide area of the mobile apps. I was the main designer on this project overseen by both the Design Lead for the mobile team and the Design Lead for the design system team as this was a project that spanned both areas. I worked implementing this project with both the Android and iOS platform teams with touch points in the Design System team as they will work on implementing theming at a higher level. 

Scope and constraints

Scope for this particular project was only limited to the login flow, settings and contact screen. Login was the main driver of this piece of work as when the new login flow got released there was a lot of customer noise about it being too light when customers are looking at their banking in low light. Additionally, there was also concern for customers not wanting strangers to see their quick balances when out and about. While there is a want and need to transfer this theming to all the applications, there was not budget and time to do all screens at once.

Research

Dark mode is a low light user interface that uses a dark colour usually black or a shade of grey as the primary background colour. This is a reversal of the white user interface that designers have been using for the last decade. 

• Dark mode reduces eye strain especially in low light conditions or night-time, helping users to see content clearer.

• Less eye strain reduces headaches and provides a better work experience

• Dark mode uses more black pixels which force your device to use less energy

Explorations

To help understand how dark mode would flesh out into our design system, I did explorations with a range of our screens for both mobile and web. This was a good start to understanding the colour scheme.

Some considerations were:

• How can we make it still look like a BNZ environment?

• Are we passing visual impairments at AA?

• Working through some key screens to prove the system works

Semantic colours

A big part of this project for dark mode was how we could implement this feature across platforms without creating bespoke UI for every new screen we make and upgrade. This led me to learning more about semantic colours and how it aids with theming. Semantic colours convey a purpose rather than its appearance or colour values. For example, this would be the background colours, separator colours, labels and fill colours. Below are the proposed theming that came out of the explorations where I focused on making sure they were accessible from an AA standard which is stated in the mapping for designers and developers to reference.

Illustration work

I worked with another designer on how this would flow into our illustration style that will get added to our style-guide. Originally we attempted to find a pattern that would work for both light and dark modes but we quickly realised this wasn’t the best approach and having two sets was a better move. We went for one of our blue tints as we found this worked better with the dark blue background colour rather than a strong white contrast as this was competing with other elements on the screen such as typography.

Elevation

Material and iOS guidelines both use elevation colours in their dark mode theming. This is when a surface becomes lighter with the application of a semi-transparent white overlay. Dark mode is dynamic and the background automatically changes from base to elevated when an interface is in the foreground, such as a popover or modal sheet. This is so that the system has a visual separation between elements and helps guide a user for contrast and depth. 

While this feature aids dark mode, it wasn’t implemented as part of this work due to it having a bigger effect on the design system as our light mode work doesn’t use multiple background colours. This will hopefully be looked at and implemented as more of our screens get utilised in dark mode. 

Strategy

The strategy for the output was very much a process of iteration. Since colour has a large impact on hierarchy, contrast and how users interact with elements there was constant tweaking of the colours to ensure that the login flows worked together as a light and dark set. This was through feedback and lots of testing on devices in different light conditions. We ended up going with a dark version of our bnz blue colour so that it wasn’t pure black yet still looked like it was part of the BNZ brand. 

Outcomes and results

Coming soon…

This work is currently in Beta so I am looking forward to getting feedback and validation before the final release. 

Software

Sketch, Invision