Foundation Funds

Redesigning a key feature to help people give more effectively

Lead Designer / Team of 3

Company

Bright Funds is a for-profit, for-good enterprise product that companies use to run their giving and volunteering benefits.

Role

I lead design and worked alongside one developer who headed technical implementation. My role included gathering user insights, project planning and scope definition, experience design, UI design.

Process

  1. Aligning on the problem
  2. Research
  3. User Flows
  4. Sketches
  5. UI Design
  6. Prototype
The problem

Getting back to the roots

Bright Funds was founded to make giving effective, rewarding, and easy. It did this by offering Funds–think mutual funds for giving. The company transitioned from B2C to B2B2C and to handle the growth, many features were added. The team had learned from the previous iteration of Funds, but didn't have the bandwidth to act on these findings.

The challenge

Develop the next version of Funds that will help people give effectively and solidify Bright Fund's position as the philanthropic thought leader for workplace giving and corporate social responsibility products.

Introducing,
Foundation Funds

The expertise and knowledge that has traditionally only been available to high-net-worth donors will now be available to everyone. Each Fund is backed by a Foundation or expert who would find the best way to support that cause.

Shaping the idea

Researching the problem

First, I took scope of the problem in greater detail. I spoke with team members to gather internal knowledge, analyzed support conversations, and organized interviews with an inital group of users.

Based on this research, our team aligned on these three core insights:

Problem 1

People want their giving to make a difference, but it’s not clear to them how to do this.

Problem 2

It’s hard to discover the best places to give, so people end up falling back on the places they already know.

Problem 3

People often don’t have a time when they think or reflect on how they’d like to give.

Mapping out the project

Breadboarding

I took the lead in mapping how this project would fit into the product so that we could understand the scope of work.

At this stage, the goal was to gain an understanding of the scope of work and to explore ideas quickly without worrying about visual design. Even if the low-fi style of a wireframe is meant to prevent ideas from becoming precious, early layout and UI decisions can cement thinking as you go. At this point, there’s not yet a need to decide on UI.

I’ve taken to the process of breadboarding described by Ryan Singer. Breadboard product design sketch

Core user flow

Once the path was decided on, I mapped out the user flows and screen components.

Core user flow

Sketching views

I then sketched out the various views in higher fidelity. At this point, the UI is still rough, but we have an idea of what content belongs where and are preparing to jump to higher fidelity design. I used Miro to share the various screen sketches gather feedback from the team.

Product design sketch of explore page Product design sketch of Fund listing page Product design sketch of Fund listing page
Map of interaction flow
Design

Let’s break down the design of a few views, starting with the discovery experience.

Explore view

The explore page is the jumping off point in the product where people search for or discover places to give. The purpose of this page is to make the act of deciding where to give, easier. I added several elements to this page to encourage the discovery of Foundation Funds.

Product design mockup of explore page Product design mockup of explore page
  1. Callout for Foundation Funds

    First, I designed a callout for Foundation Funds that lived on the Explore page. Here, users could either click through to view all Funds or select one in particular. The purpose here was to lead users to learn more about one cause in specific or to explore all. I used a full-width, high quality image to make this section stand out visually from the other items on the page.

  2. Listing all Funds below the callout

    If someone has a specific cause they are drawn to, we wanted to provide a shortcut to that cause without needing to navigate to the index page. For that reason, we listed each Fund. This technique works because we launched with an initial test of 6. however, the UI would need to be modified once more Funds are added, as they would no longer fit in a single row.

  3. Subnav

    The content on the Explore page can change depending on whether there is featured content. We added a subnav for easy access to Foundation Funds without scrolling to the lower section or searching.

Listing all of the Foundation Funds

Index view

I designed a new view that houses all of the Foundation Funds. This is where users can jump off to a specific cause.

Product design mockup of Fund listing page Product design mockup of Fund listing page
  1. New index view

    I designed a new index view to house all of the Foundation Funds. This is where users can learn more about the product category and jump off to detail views for specific Funds. The page used the existing 12 column grid, but most components were designed from scratch.

  2. Sensory appeal

    People are more likely to support a cause when they are in an emotional mindset. For this reason, I am using a large image of a cause in the header before listing the individual Funds.

  3. Fast access to all Funds

    This project was launched with an initial test of 6 Funds. Because the test group was small, we did not need to implement search and filter functionality. Rather, I listed all of the Funds above the larger listings below so that users could skip to a specific Fund. I wanted to avoid only the top one or two Funds receiving all attention.

  4. Branding elements

    I designed small branding elements for Foundation Funds that could sit alongside the Funds. After introducing this new concept there were two types of Funds - the Funds that had already existed and this new version powered by foundations and experts. The icon helped users distinguish between the two.

Designing the details view for each Foundation Fund

Details view

I designed a new details view for each Foundation Fund. This is where users could learn more about the Fund and jump off to donate.

Product design mockup of Fund header Product design mockup of Fund page
  1. Power of the tribe

    One reason why people give is due to the ‘warm glow’ that they receive. Helping others feels good. There are also social reasons people give. People want others to think of them as the type of person who gives. Calling out the most recent donor to boosts the social reward. When someone donates, they know they will be featured for others to see.

  2. Visualizing progress

    When there is a clear, measurable goal it’s more likely that people will join in to accomplish it. For this reason, we included a tangible goal for each Fund. One problem with a goal is that at the beginning and middle stages, people can feel like their contribution is simply a drop in the bucket. To combat this, I broke the large goal into three smaller phases.

  3. Sensory appeal

    People are engaged on an emotional level by things that appeal to the senses. People are also more likely to relate to and support a cause when they are in an emotional mindset. For this reason, detail pages have a large header image that are animated in as an emotional lead.

Development

Building together

I partnered with one developer who led the technical implementation. I broke the project into the various scopes, features into smaller chunks, and helped with front-end development.

When work was deployed, I could pull the latest and push updates directly. For example, if a UI component needed work or copy needed wordsmithing I would do that in code.

Shipping

And moving forward...

To test this project, we launched six Foundation Funds. Each Fund was given a goal ranging from $20,000 to $30,000 to gauge interest.

  1. Several thousand people donate and most Funds reach their test goal within a few days.
  2. Foundation Funds became a key competitive differentiator and a resource for employees looking for advice on how to support a cause.

This project helped people give by letting them lean on others’ expertise. It reduced the burden of ‘where do I give?’. However, it didn’t address getting people in the door in the first place. This was a core focus for several future projects – and our largest learning. We could make it easier for people to give effectively, but they need to decide to give in the first place.

Case study 2 of 3

Awareness and Engagement

Spreading awareness and increasing engagement
of Bright Funds within the workplace.

Focus: Engagement
View project
Foundation Fund Product Design Case Study
Foundation Fund Product Design Case Study

Case study 3 of 3

Styleguide

Developing a living styleguide for a consistent UI

Focus: Styling
View project