In mid 2022, a new strategic direction was ratified, Flint would target commercial customers with an off the shelf “white label” solution, built on the foundation of the Flint Wealth app. This would enable the organisation to move from a pure B2C offering for retail clients, to also offering a B2B2C solution that other businesses could use to sell managed funds to their customers.
This posed a challenge to the app as it existed: there was very little standardisation of the UI, and the Flint brand was baked into the experience in such a way that overlaying a new brand would look confused. We needed to define a new design system for Flint that would improve the existing experience and allow it to grow, as well as supporting interoperability with other brands.
Business needs
Allow the Flint app to be rebranded easily and repeatably for new white label customers.
Standardise and simplify the UX and UI of the existing app.
Ensure high accessibility standards throughout the app.
Reduce development time when building new components.
Design System needs
Simplify the way colours are used throughout the app so that new primary and secondary colours can be swapped in for each new customer.
Formalise the grid system and navigation the app used so the experience is consistent flexible across a broad range of devices.
Ensure contrast ratios, text sizes and formatting meet or exceed WCAG 2.1 AA rating.
Create a pattern library developers can reference to accelerate development of new components.
Suisse Int’l
A singular typeface with familiar bones, Suisse Int’l combines classic style with cutting edge design quality. Chosen for its legibility across sizes and relaxed yet professional demeanor, Suisse works as the sole typeface across the entire design system and is nimble enough for each white label.
Typescale
The Flint brand deliberately leans into a Swiss style of type heavy, unadorned layout and therefore the typescale does a lot of the heavy lifting. There are variants of headings for desktop and mobile, and the basic copy is the same across every device size.
Spacing
Spacing is based on multiples of 4 / 0.25 REM. A restricted set of values to separate and group components throughout the design system gives consistent rhythm and pace to the UI. On mobile screens where real estate is limited and users are viewing from closer distances, margins are smaller.
Grids
The grid throughout the app is based on a standard 12 column grid for desktop resolutions, moving to a 3 column arrangement for smaller screen sizes. Margins and gutters are all 16px / 1 rem in keeping with the Swiss influenced, formal style of the layout. The maximum content width is 1024px to allow for all screen sizes while keeping visual complexity manageable.
Primary colour
The main colour used throughout the app. Normal usage is Mid. Presented in large areas to define and used as a highlight on pages where static information needs to be easily findable. Able to be interchanged with the primary colour of new white label brands and cascaded throughout the app.
Secondary colour
A secondary colour used when distinction from the primary is needed. Normal usage is Light. This is the colour of the Flint Assistant, the in app help tool. Able to be interchanged with a secondary colour of new white label brands and cascaded throughout the app.
Highlight colour
Used sparingly as a highlight to indicate actions. This colour directs users to the most high value elements on a page while providing subtle brand presence throughout. Able to be interchanged with a highlight colour of new white label brands and cascaded throughout the app.
Neutrals
With a dark theme throughout the app, the use of multiple dark tones is essential to convey depth and define components. Careful tuning of the darkest and lightest colours ensure high legibility without the “corona” effect that can occur when using pure black or white.
Cards
The Flint app uses a mixture of cards for complex items, and components floating in space. Cards modulate their brightness to convey how close they are to the user, and therefore how important. Blue card highlight important information that isn’t a primary action.
Icons
Icons are simple and designed to harmonise with the restrained typeface and uncomplicated button style. Consistent shape language and single colours ensure legibility across all screen sizes. With all
Primary Button
Used for the main action on each page (things that progress a users journey or make significant changes) and associated secondary actions. Wherever possible there should only be one primary action button per page.
Toggle Button
Used for secondary navigation, sorting, toggling and places where there may be a bank of buttons. Intended to be secondary to the rest of the content around the button.
Form buttons
Large enough for touch interfaces, these are pretty straightforward checkboxes and radio buttons. Number buttons are used through the signup process to show progress and enable quick navigation.
Forms and fields
As a web based platform there are going to be forms and fields. They come in many variations. Important for accessibility is that forms in an error state do not rely solely on colour to communicate.
Widgets
Portfolio information, the Flint Assistant, charts, progress indicators and other repeated components.
