Strong UX has taken modern banking to the next level

Designing an ecosystem that can scale to deliver multiple connected products is really the ultimate UX/UI case study. Part of that skill-set is the new must-have that is dark mode.

Here is my take on this new visual aesthetic.

MYBANK* Europe – 3.8 million retail banking clients

This case study is based on MYBANK*. As part of a broader digital transformation, I led full-throttle Discovery sessions laying the UX foundations for this region’s third-largest banking group, with total assets at CHF 229 billion;

• 120-person strong team
• 1-2-1 Leapfrog Workshop
• A demanding 3rd party agency

Goals and How-to retool

The goal here is to give back to the design community a mindset for transitioning handcrafted light-mode UI, to the dark side. As this mode has become the new black, UX / UI designers need to re-tool themselves with the skills to set effective palettes, to design in context and to know the rules or at least know how to break them.

Using dark mode as default

Designing with a predominantly dark palette, swapping out light backgrounds, lightning text and icons has more recently become a non-negotiable design requirement with today’s clients. For mobile I get it, all apps should have both light and dark UI — or day and night themes that switch automatically. But what happens when your users are purposely choosing dark mode – all the time?

How dark mode has crept up on us

Early computer systems were always in dark-mode as characters were inverted. The Mac brought WYSIWYG and what we now know as light mode, or ‘printed paper’ mode. This became the default, with designers rarely even thinking about other colour palettes.

Although prevalent in certain digital environments, ‘dials-and-lights’ interfaces (car dashboards spring to mind) have always been dark, controls and readouts follow established dark patterns.

An app with a dark palette consumes as much as 90% less energy, especially with AMOLED screens. For battery saving reasons there is enough justification for your clients to build in design capacity for this mode. Be mindful of your users’ environment, a bright rectangle glaring at them in a dim room is not good.

Most streaming-video services default to dark mode as users do much of their viewing at night. This is why TV have dark bezels – right? Dark backgrounds reduce the overall brightness of the display, so can be used in any lighting condition. A typical dark-mode page is five times less bright than exactly the same content in light mode.

Defining a dark colour palette 

Designers have been reducing contrast in light-mode for years.

Note the emphasis is on contrast. The term colour contrast is misleading. To give context, let’s map out a mini deep-dive on colour theory.

Quick recap on colour theory

• Hue—The spectrum on which a colour appears.
• Saturation—How intense a hue appears.
• Brightness—The amount of black or white that is added to a colour.

To most designers, developers, and product managers—the term colour means the hue part only. Red or green, for example. Contrast implies that contrast relates to hue, but it does not. Contrast indicates the difference in brightness levels of two elements. 

Small differences equal low contrast, large differences high contrast – so contrast is a comparison.

Contrast in Dark Mode

When dark-mode palettes are implemented properly, their low overall output should provide extremely high contrast, without anyone on a project team worrying that the display is too harsh.

But you still need to keep the contrast as high as possible, which trips up a lot of designers. Dark-mode design suggestions, guidelines and inspiration sites too often throw away everything we know about colour theory, especially; 

• Contrast
• Visibility
• Readability
• Universal design

Even Google suggests very dark, highly saturated accent colours, but with lots of very low-contrast, grey backgrounds. Discarding simple lines around card edges and replacing them with dark-grey backgrounds doesn’t solve the contrast argument. Of course, this is just one opinion (albeit the worlds’ largest search company) – white key-lines can work as well.

Grey is not the only fruit!

Hollow icons for available tabs and solid icons for the selected tabs, while not a colour theory issue, is an effective way to differentiate them. Using simple text for tabs, in grey or red is an issue for the colourblind, not acclimated to night or glare.

Bad contrast impairs readability and users become confused when part of the page scrolls, but other parts do not. Contrast and differentiation is not just text and icons but the entire experience.

Conclusions on dark mode UX

Enable iteration by employing a high-impact Design System with global reach

Personalising a gold-standard, multi faceted, flexible Design System, empowering over 220 global organisations, employing a 6 sections, over 500+ components, catering for 3 industry-standard digital platform

From foundational elements like typography, to light and dark colour mode across all tokens, icons and logo, a rich library of icons to container, cover and sheets, to selectors components, drop downs, empty states, models, navigational and informational elements.

Modern UX designers should champion dark mode as the default option for mobile apps. Embracing this trend not only aligns with user preferences but also enhances the app’s visual appeal and overall user experience;

Not just about style

Design choices such as a colour palette have enormous implications around usability and perception.

Design basics

Size, spacing, and contrast in dark-mode are still critical.

Test, test and test again

Don’t forget to test your solution in a real-world environment (i.e a dark room). Try to understand how people would use your product, and make sure you’re designing for their context and their needs.

Pique’d your interest?

This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact me fur­ther to dis­cuss how your brand can ben­e­fit from the new channel: info@russellwebbdesign.co.uk

If something has peaked your interest. Please leave a comment below.