Bean Web App

As part of the 3-week client project at General Assembly, my team and I worked with Bean, a personal finance management tool that provides awareness and actionable insight for recurring payments.

We were tasked with improving the existing Bean platform for the target demographic, increasing their engagement and helping them to optimise their spending. To achieve these, we worked on three main areas for improvement:

– Designing a secure and trustworthy experience

– Presenting recurring payment data that is useful to the user

– Presenting actionable insights to help users save money

Our client was happy with the outcome and is now integrating a significant amount of our work into their platform.

A little bit about Bean

Bean is a personal finance management tool that helps users to keep track of their recurring payments such as energy bills, insurance contracts or even the small stuff like magazine subscriptions.

By connecting to users’ bank accounts, Bean finds all the recurring payments, lets users know if they are overspending on any contracts and helps them to cancel contracts that they no longer want.

Brief

Our team was tasked to improve the existing platform for mature users with complicated finances so that users can have a better understanding as to where they will stand financially in the near future and take actions such as leaving or changing an existing contract that’ll result in an improvement to their finances.

My Role

Throughout this 3-week sprint all team members involved in every step of the project. However, I mainly focused on synthesising user research data, the design layout, mid to high fidelity prototypes as well as checking the design for accessibility.

Competitor Analysis

We looked at three direct competitors in the UK and four indirect competitors mainly from the US. In the UK market, many apps help users track their spend through categorisation. While these apps can identify recurring payments, neither of them focus on pointing out the overall impact of these regular payments create nor do they help to negotiate or cancel contracts.

User Research

To gather information about users’ behaviours such as what they valued, what motivated them to take action, we conducted user interviews. We reached out to eleven users, some of whom were existing Bean users. In the meantime, we conducted some user testing for the current platform. These tests gave us the insight on what worked and what caused frustration for the users.

We created empathy maps to synthesise what we gathered from the user interviews and tests. These maps allowed us to identify main areas to focus on and helped us to create personas that represent primary user groups.

Key Findings

1. Aggregation is necessary to gain understanding.

In our research, we found that even financially savvy users do not have a thorough awareness of recurring payments. We recognised there is great value in providing this awareness. We found that users value being able to see all of their recurring payments in one place and a summary of monthly spending trends in a clear and easy format.

In our research, we discovered that providing personal bank information and then being taken to a third party site without any warning felt very insecure to the user. We recognised there is tremendous value in transparency, especially within the fin-tech space. If users are aware of what’s coming next, they’re more likely to continue using the product and trust the services that are being offered.

3. Prompts will result in action if they feel genuine.

Useful reminders motivate users. Users only review their recurring payments when they receive a notification or if they somehow realise that they are being charged higher than the usual. To help users to review their recurring payments and act on them, it is crucial that the message from Bean feels genuine to them and that they can perceive the value of it for their finances.

Personas

Based on our empathy map, we drafted two proto-personas. This was an essential step for defining different user types, their habits and expectations. These helped us to keep the ideation process relevant to user needs.

Our first persona is Jonathan who is 38 years old, married and father of two young boys. He has recently moved into a bigger house with his family and is now paying a mortgage. Jonathan wants to make sure that he is managing his contracts and bills efficiently so that he can save money.

Samantha, on the other hand, is a bit younger and more frivolous with her spending. She loves the latest trends and ends up signing up for subscriptions and losing track of them. Samantha usually ends up with less money in her account than her expectation.

We decided to move forward with Jonathan as our primary persona since he closely aligned with the user focus group provided by Bean (28–50 years old with a significant life event, i.e. new home, kid, job etc.)

Design Principles

We set our aim as to simplify complex payments into their essential meaning and create a delightful experience for the user. We believed building trust by communicating genuine insights to the users would help them to save money and create smart habits.

Design Studio

We met with Bean a second time in their offices to present our research and conduct a design studio workshop to start the ideation process. Together we sketched out ideas for two scenarios on paper. We then discussed and selected the best ideas that we could consider using in the prototype.

After the client meeting, as a team, we conducted another design studio session for a third scenario. After reviewing and refining our ideas, we moved on to sketching.

Scenario for the third design studio session:Jonathan has recently moved his family into a new house. He wants to follow up on his recurrent payments and see if there are any saving opportunities.

Prototype & Testings

Based on the ideas from the design studio sessions we started sketching the user and wire flows on the whiteboard. We then moved on to paper, fleshed out our first prototype and started testings with the users. We focused on three main themes.

Usability testings (low-fi on the left, hi-fi on the right)

1. Improve the current login to build trust.

Throughout our user research and testings, trust was a prominent issue that kept appearing. Users said they feel more secure when a financial app has an affiliation or recognition from a reputable organisation or when they know that people around them use the product.

Bean is part of Barclays Accelerator programme powered by TechStars. However, on their existing marketing web page and platform, there was no mention of this affiliation. We asked Bean if it was possible to show this association and fortunately it was. So we started with a simple yet effective step of adding this piece of information. To consolidate the security further, we also included a two-step verification.

We added a progress bar indicating each step the user needs to complete before arriving at the dashboard to inform them the best way about the duration of the sign-up process.

2. Enhance the existing dashboard to give users added value.

We identified that by the time a payment hits your bank account, it is too late for a user to take action. Taking this into consideration, we introduced two new features to the dashboard.

The first one was displaying upcoming payments, letting users know how many payments are expected by the end of the month. The second was a pie chart showing the distribution of bills (essential spending) and subscriptions (non-essential spending). The chart was informative, however, in our usability tests, users said that it doesn’t provide them with anything actionable. On the other hand, users were intrigued by seeing the payments that were due. They had a better understanding as to where they would stand at the end of the month and take necessary actions if need be. So we decided to leave out the chart, keeping only the practical information that could help users.

3. Communicate saving opportunities to users in a genuine way that motivates them to take action.

In our research, we found that users disengaged with the platform if they felt they’re being sold to. Through testing and iteration, we tried to communicate the saving opportunities from Bean’s third-party partners in a way that motivated users to take action. Test results showed that restructuring these opportunities and providing more information about them on the dashboard created more trust and engagement. This was important as it will save users money and simultaneously fulfil the business goals.

Currently, Bean shows a saving opportunity on a contract by highlighting it with a relevant message on the dashboard. However, the initial test results showed that this message was perceived as to be “sales-y” by our users. Also to learn about an opportunity, say if there’s a better deal, the user first needed to click on the contract and then click on comparing providers on the contract detail page. So it took two steps to get to the information which was inconvenient for the user.

To iterate on this in small steps, we changed the placement of this saving opportunity right under the relevant contract with a minor tweak in the copy and included a button that prompts users to see more information. If users clicked to see more, they would be taken to contract detail page where they could see the payment details and also a modal further explaining how they can save. But even before getting to that stage, still, users were hesitant to click to see more information on the dashboard page. One of the feedbacks we mostly heard from the users was “I feel like Bean is trying to sell me something.” We iterated on the copy a couple of more times (“did you know you can save”, “compare prices”) but none of these options performed well.

First iteration. Dashboard on the left, contract detail page on the right.

Work in progress

On the final iterations, we carried the modal that was on the contract detail page onto the dashboard page and extended it to cover any saving opportunity or tips that Bean might want to offer. “Actionable insights” was a powerful phrase that Bean was using in their marketing, and we thought it would be appropriate to call this section of opportunities with this name. Displaying this information on the dashboard page received positive feedback from the users. This way the information wasn’t hidden in subpages and users could see any tips that were available in a compact and clear way. On the contract detail pages, we also included a disclaimer information about Bean’s third-party partners, which made the experience more transparent and trustworthy for the users.

Prototype

We built our prototypes on InVision. Click here to see the output! (You can move with the arrows or just click through it.)

Results

The user testing results showed that we managed to provide the users with a genuine experience which made them more confident using the platform. It was essential to gain the trust of the users to increase engagement. Displaying actionable information such as upcoming payments was extremely well received by the users.

Our client was happy with the outcome, primarily that it was designed with the consideration of their current platform, allowing it be feasible for implementation. Now they are in the process of integrating a significant amount of our work into the Bean platform.