Rebecca
BASNIGHT

Bank for Good

Research, Usability Testing, UX, Branding, Design

Bank for Good

Adobe XD, Invision, WordPress
http://bankforgood.org

Introduction

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.

View Case Study Presentation

Discovery

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.

intersection image

As a result of focus groups, interviews, and online qualitative boards, we narrowed our target demographics down to three key audience groups.

Gen Z

Value-Driven Generation Z:

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.

Millenials

Value-Driven Millennials:

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.

Gen X

Value-Driven Generation X:

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.

chart

Overall, we wanted to strike a tone of “Unapologetic Revolutionary.” Individuals who are persistent in pushing the banking industry forward and demanding change.

Branding

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.

Poster Design
Poster Design

Color Palette
Color Palette

Typefaces
Typefaces


User Experience

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:

  1. Whether or not users understand the overall purpose of the tool.
  2. How well or not users can use the various tools (bad bank search, simple “mad libs” search, advanced filters, etc).
  3. How much or how little users engaged with the content on the site (e.g. did they understand the terminology used? Were they interested in the additional readings and campaigns?).

Below is a sampling of wireframes that were tested.

Homepage - Old.png

Search Results + Fossil Free Banks - Old.png

Simple Search - Choose Your State - Old.png

Simple Search - Physical Location - Old.png

Simple Search - ZIP - Old.png

About - Why Bank for Good.png

Good Bank Detail Page.png


Usability testing resulted in several key takeaways, all of which we incorporated into the final round of wire-framing:

  • Users were confused as to whether or not Bank for Good was a bank itself.
  • We needed to get rid of the Bad Bank search entirely and instead focus on helping the user find a Good Bank. Our goal should not be to shame users previous choices and Bad Banks, but instead to encourage the switch.
  • The primary and only call to action on the site should be to "Find a Good Bank."
  • In general, users felt that there was too many calls to action and confusing forms.
  • At times, banking industry terminology was confusing for users. Definitions should be provided throughout the experience to include additional context.


Website Design

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.

Moodboard 1
Moodboard 1

Moodboard 1‍


- 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.

Moodboard 2
Moodboard 2

Moodboard 2

- 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.

Sample of High-Fidelity Design
A sampling of high-fidelity designs

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.

Prototype Link

Go to Live Site


next
Project