Staq Whitelabel – Creating a Modular Banking App for Growth
2024 · Lead Product Designer · Whilst at Grotesk
If you'd like to know more please get in contact
Context
Staq wanted to offer their clients a mobile banking app, responding to growing interest and seeing a chance to create a fresh revenue stream. The idea was to build a whitelabel product that could be easily customised and rolled out to other clients if the first launches were a success.
Context
Staq wanted to offer their clients a mobile banking app, responding to growing interest and seeing a chance to create a fresh revenue stream. The idea was to build a whitelabel product that could be easily customised and rolled out to other clients if the first launches were a success.
The problem
The main challenge was to design a platform flexible enough to handle different branding and feature requests from multiple clients, all while keeping things maintainable and scalable.
The problem
The main challenge was to design a platform flexible enough to handle different branding and feature requests from multiple clients, all while keeping things maintainable and scalable.
The solution
We started by creating prototypes for a couple of key features—like the main card screen (with actions such as adding money and freezing a card) and the accounts view—to quickly get buy-in from early clients. At the same time, I built out a robust design system with tokens and slot-based components, so theming and feature swaps would be fast and future-proof.
The solution
We started by creating prototypes for a couple of key features—like the main card screen (with actions such as adding money and freezing a card) and the accounts view—to quickly get buy-in from early clients. At the same time, I built out a robust design system with tokens and slot-based components, so theming and feature swaps would be fast and future-proof.
The main challenge was to design a platform flexible enough to handle different branding and feature requests from multiple clients, all while keeping things maintainable and scalable. We started by listing features needed exploring what competitors had done and establishing best practises, from there we then mapped out flows for those features and saigned them off with the client.
The main challenge was to design a platform flexible enough to handle different branding and feature requests from multiple clients, all while keeping things maintainable and scalable. We started by listing features needed exploring what competitors had done and establishing best practises, from there we then mapped out flows for those features and saigned them off with the client.
Alot of work went into discovering a solution for each feature so that each feature could work independantly and together as a whole depending on the needs of any customer
Alot of work went into discovering a solution for each feature so that each feature could work independantly and together as a whole depending on the needs of any customer
Show screenshot of flows
Show one or two flows
Show screenshot of flows
Show one or two flows
To get buy-in from those first key clients (and prove the idea would actually fly), we started by prototyping one or two core features.
To get buy-in from those first key clients (and prove the idea would actually fly), we started by prototyping one or two core features.
An example of the working prototype for showcase to clients
An example of the working prototype for showcase to clients
Into the detail
It was estential to keep the build of any element withint the design system consistant. To help establish the base of the design system to theme we started by using Staq's branding and any established UI colours and standards already in place. Early on it was agreed we would us Staq's brand and/or UI elemenets already designed by Staq.
Into the detail
It was estential to keep the build of any element withint the design system consistant. To help establish the base of the design system to theme we started by using Staq's branding and any established UI colours and standards already in place. Early on it was agreed we would us Staq's brand and/or UI elemenets already designed by Staq.
Into the detail
It was estential to keep the build of any element withint the design system consistant. To help establish the base of the design system to theme we started by using Staq's branding and any established UI colours and standards already in place. Early on it was agreed we would us Staq's brand and/or UI elemenets already designed by Staq.
Image caption
Image caption
Image caption
With the file structure inplace I then moved on to set a frameowrk to build design tokens as using them would help theme the app easily and quickly.
With the file structure inplace I then moved on to set a frameowrk to build design tokens as using them would help theme the app easily and quickly.
With the file structure inplace I then moved on to set a frameowrk to build design tokens as using them would help theme the app easily and quickly.
Color token setup
Color token setup
Typer token setup
Typer token setup
A big part of this was the surface card component, which acted as a flexible container for all sorts of content. Using slot components, we could easily build out features and keep consistency for visuals as needed. The card itself could be themed in just a few clicks—change the color palette, adjust the surface shape (rounded, pill, square, inset, or even go cardless), and everything would stay consistent.
A big part of this was the surface card component, which acted as a flexible container for all sorts of content. Using slot components, we could easily build out features and keep consistency for visuals as needed. The card itself could be themed in just a few clicks—change the color palette, adjust the surface shape (rounded, pill, square, inset, or even go cardless), and everything would stay consistent.
A big part of this was the surface card component, which acted as a flexible container for all sorts of content. Using slot components, we could easily build out features and keep consistency for visuals as needed. The card itself could be themed in just a few clicks—change the color palette, adjust the surface shape (rounded, pill, square, inset, or even go cardless), and everything would stay consistent.
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
In some cases some of the UI was set solid until feedback would arrive from either the client or their customers for the need of a change. This thinking was set for the display of bank card information, but to help give banks a real feel of customisation the cards where built using the slot system so that the look of the card could be changed endlessly
In some cases some of the UI was set solid until feedback would arrive from either the client or their customers for the need of a change. This thinking was set for the display of bank card information, but to help give banks a real feel of customisation the cards where built using the slot system so that the look of the card could be changed endlessly
In some cases some of the UI was set solid until feedback would arrive from either the client or their customers for the need of a change. This thinking was set for the display of bank card information, but to help give banks a real feel of customisation the cards where built using the slot system so that the look of the card could be changed endlessly
background
image slot
details
freeze
highlight
background
image slot
details
freeze
highlight
background
image slot
details
freeze
highlight
The card is built up of five layers, the background is interchangeble with a swatch, and for more customisation the slot can be turned on and an image placed in place.
The card is built up of five layers, the background is interchangeble with a swatch, and for more customisation the slot can be turned on and an image placed in place.
The card is built up of five layers, the background is interchangeble with a swatch, and for more customisation the slot can be turned on and an image placed in place.
Some designs made for the bank card, the options are completely endless.
Some designs made for the bank card, the options are completely endless.
Some designs made for the bank card, the options are completely endless.
For icons, we used the Huge Icons set, and I set up a simple toggle in the variables panel so we could instantly switch between standard, fully rounded, or sharp icon styles.
For icons, we used the Huge Icons set, and I set up a simple toggle in the variables panel so we could instantly switch between standard, fully rounded, or sharp icon styles.
For icons, we used the Huge Icons set, and I set up a simple toggle in the variables panel so we could instantly switch between standard, fully rounded, or sharp icon styles.
We used the “outline.standard” variant as the default icon style, while the Duo tone was brought in for larger cases or as imagery in UI cards. The Duo tone effect relied on a single color with a 25% opacity, which kept customisation simple and streamlined the workload.
We used the “outline.standard” variant as the default icon style, while the Duo tone was brought in for larger cases or as imagery in UI cards. The Duo tone effect relied on a single color with a 25% opacity, which kept customisation simple and streamlined the workload.
We used the “outline.standard” variant as the default icon style, while the Duo tone was brought in for larger cases or as imagery in UI cards. The Duo tone effect relied on a single color with a 25% opacity, which kept customisation simple and streamlined the workload.
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
Surface card with slots, slots changing to lists then add phone and other compoents above and below, then shape changing
Before I wrapped up, I also started building out some micro-animations, all set up to work with the same slot-based approach—making it super easy to add a little delight wherever we wanted.
Before I wrapped up, I also started building out some micro-animations, all set up to work with the same slot-based approach—making it super easy to add a little delight wherever we wanted.
Before I wrapped up, I also started building out some micro-animations, all set up to work with the same slot-based approach—making it super easy to add a little delight wherever we wanted.
Visual of these animations
Image caption
Visual of these animations
Image caption
Visual of these animations
Image caption
Impact
The prototypes were well received: Staq signed up enough clients to move the product into full build, and the design system means they can keep adding new clients without reinventing the wheel.
Impact
The prototypes were well received: Staq signed up enough clients to move the product into full build, and the design system means they can keep adding new clients without reinventing the wheel.
Impact
The prototypes were well received: Staq signed up enough clients to move the product into full build, and the design system means they can keep adding new clients without reinventing the wheel.
We had tested building out files for new customers which worked well, I forsaw a few small teething problems with simplifying some of the colour tokens but overall the speed to create the file for a new client was as low as we had orginally hoped.
We had tested building out files for new customers which worked well, I forsaw a few small teething problems with simplifying some of the colour tokens but overall the speed to create the file for a new client was as low as we had orginally hoped.
We had tested building out files for new customers which worked well, I forsaw a few small teething problems with simplifying some of the colour tokens but overall the speed to create the file for a new client was as low as we had orginally hoped.