Ideas42 hired nclud as a group of partners to design and build an interactive website, brand and campaign to help consumers find pro-climate institutions and make the switch to what we coined as a Bank for Good.
The Bank for Good campaign focused on building a movement by creating a groundswell of racially and environmentally conscious individuals who divest from misaligned banks and switch to values-aligned banks, for a better future for BIPOC lives and for our environment.
This campaign presented the opportunity to draw connections between racial, climate, and economic justice. It will test messages and experiment with alternative methods: utilizing banks themselves as messengers, building coalitions across issue spaces, and testing consumer-first messaging alongside environmental messaging.
Our guiding theory of change for this initiative was that if we can call on racially conscious, environmentally aware, value-aligned individuals to switch from a dirty bank to a clean bank, we can send a message to dirty banks that investing in fossil fuels is not acceptable to their consumer base.
This issue existed at the intersection of racial, climate, and economic justice. A core belief of the campaign was that sustainable, ethical banking is a racial justice issue.
As a result of focus groups, interviews, and online qualitative boards, we narrowed our target demographics down to three key audience groups.
This group is our youngest segment, these young adults move at the speed of the internet, savvy in most forms of new media and aware of its ability to spread messages and values they support.
These individuals are true digital natives. This segment was born into a world just before the internet fully took over, and now live in a world with values shaped by the information age, willing to act quickly in support of movements they care about.
Our oldest segment. They have more experience and resources, they recognize the power they have to create the world they desire through their financial decisions. They are tech-savvy, even privacy/tech-wary, while still being a clear bridge to the pre-internet era.
Overall, we wanted to strike a tone of “Unapologetic Revolutionary.” Individuals who are persistent in pushing the banking industry forward and demanding change.
Informed by our initial user research, we put together a brand that was bold and energetic.
That’s how the brand of Bank for Good was born. We worked with ideas42 to determine strong typefaces and a broad color palette that represents the individuals who make up this movement, while also making sure that any color pairings we used across print and digital elements were accessible.
All of these elements came together to represent the Bank for Good brand.
Another key element of this project was wireframing the user flow. Initially, we thought the experience would go as follows: we’d start with a search that would indicate whether or not they were investing in a “Bad Bank” - or banks on RAN’s list of the worst fossil fuel funders. Then, the user is prompted to find a good bank based on their location and preference for an online account or now.
After our first round of wireframes were created, 10 usability tests were conducted with users to determine:
Below is a sampling of wireframes that were tested.
Usability testing resulted in several key takeaways, all of which we incorporated into the final round of wire-framing:
When it came to designing the online tool, we created two moodboards specifically focusing on elements like forms, button states, image treatments, and color pairings to hone in on the more detailed elements of the brand.
- Focus on primary colors pairings from the palette. Usage of secondary colors throughout other marketing materials. Helps drive the emphasis on the tool.
- Outlined form fields.
- Overlapping imagery with + / = symbols used as flourishes.
- Rectangular buttons with high color contrast.
- Color fill hover states.
- Nimbus Sans Bold for H2’s and H3’s.
- Using color combinations from the full color palette.
- Line-driven calls to action and forms.
- Quarto + subtle arrows for buttons.
- + / = usage similar to poster examples.
- Underlined text / outlined card hover states.
- Hand-drawn accents using sparingly with calls to action.
- Nimbus Sans Extended Bold Sentence Case for H2’s and H3’s.
For the final website design, we incorporated the bold color palette by color blocking elements throughout. We used the hand-drawn circles and underlines to highlight meaningful calls to action. We drew on bold imagery that focused on one individual at a time -- someone who actively represents the movement.
The site was received by both our clients and users. The partnership with ideas42 continued after the site went live, conducting A/B Testing and making edits to the overall bank search experience.