Co-Branded Banking Products

Brief

One of the great strengths of Green Dot is their banking-as-a-service (BAAS) product line. They developed the infrastructure to white-label their prepaid cards as well as their neobank service and partnered with household names like Walmart, Amazon, Apple, Uber, and Intuit to provide these products to a broad base of users.

The approach Green Dot took to these co-branded products was to develop a consistent system that would allow these partnerships to be spun up as quickly as possible. By forgoing extensive one-off customizations, Green Dot could offer potential partners a very short time-to-market.

Process

For the pre-login portion of each of the partner websites – after having initial discussions with the brand management and product management teams – we'd usually start with a rough sketch that would outline the major features and the basic information architecture of the site. We'd discuss that with internal stakeholders and then prepare a more cleaned up version for review by the external partners of the project.

Utilizing Green Dot's Flex design system as the base for all of these sites made it quite effortless to swap out the default design system branding for the branding of our partner, which allowed us to expedite approvals. The design system allowed us to quickly work directly in code which meant we could present these user-facing marketing sites as "clickable" prototypes complete with messaging and partner branding for review very early on. Once approved that partner branding could be easily carried over to the post-login portions of the experience.

Execution

When you compare the products of two different partners side-by-side it is quite easy to see that they incorporate brand elements from the respective partners, but are still based on the same design system.

The same is true for the post-login portions of the product. The experience is largely the same with some customized brand elements. This approach also made it easier to roll out improvements to the products across the board as opposed to having to deploy individual updates if each site was more customized.

The Flex design system had a wide range of image ratios/sizes and resolutions that may appear in the various block templates. It could be quite tedious to size and resize one-off images, especially when they had to be redone each time a block style or image was changed. I created this Sketch template which allowed our marketing team to quickly export all possible versions of an image whenever they added new images to a respective brand library. This meant that every image was already available in any size required before a page layout was even being started.

The co-branded experience also extended to the transactional and customer lifecycle emails that users would receive to help guide them through their use of the products.

We routinely A/B tested different imagery options and marketing messages for the sites using Adobe Target to improve usage and conversion rates.