Bright Funds is a for-profit, for-good enterprise product that companies use to run their giving and volunteering benefits.
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.
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.
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.
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.
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:
People want their giving to make a difference, but it’s not clear to them how to do this.
It’s hard to discover the best places to give, so people end up falling back on the places they already know.
People often don’t have a time when they think or reflect on how they’d like to give.
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.
Once the path was decided on, I mapped out the user flows and screen components.
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.
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.
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.
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.
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.
I designed a new view that houses all of the Foundation Funds. This is where users can jump off to a specific cause.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Spreading awareness and increasing engagement of Bright Funds within the workplace.
Developing a living styleguide for a consistent UI