Banking in the dark

Leveraging Figma's powerful variable collections feature to create a banking app with an WCAG compliant dark mode

demo it!

Overview

The summer of 2023 belonged to Figma. Although the news of "no-path forward" to their impending buy-out by Adobe probably grabbed more headlines, it was a the slew of new features that dominanted the product landscape.

One of those features are variable collections, which I was able to use in creating a banking app with both a lightmode & darkmode.

Challenge

The primary challenge was using BankOnit's existing brand guidelines to create a darkmode palette that meets WCAG accessibility standards.

Call it a challenge or an opportunity, I would also be using Figma's new variable collections feature. As with all tools there is something of a learning curve to get the most out of the variable collections feature. It was of the utmost importance that its used with a keen grasp of atomic design principles in mind.

Design Process

With an existing brand identity, content hierarchies & established design patterns, my role in this project was prescribed to creating high a fidelity prototype & with both light & dark* modes across all screens.
_{(*with the exception of the screen loading animation & login).}

I first created a "dark mode" palette using the brand color guidelines & and applying standards derived from Google's Material Design. Once these standards were in place, I began wireframing. One challenge I encountered was just how granular the naming conventions can get, when setting up a design system using variable collections.  

Results

I created these screens based on the goals that were laid out. Below are wireframe examples of the work that I did on the project.