How we designed BigFundr's Investment App

A UX Challenge: Redesign BigFundr's Investment App - Part 1

BigFundr is one of our retainer engagement client since 2021. We have developed their first version of the website and mobile responsive web app, while their system was running on ODOO. In 2023, when their customer base has increased by 200%, they realised that ODOO will not be able to support and it's a time consuming process of creating new web pages and web app pages.

We proposed to them to separate their website and web app to use Webflow and Outsystems.

One of the key things that convinced them to switch to Webflow for their website design is the ease of use and and no longer reliant on web developers to create a simple landing page for marketing purposes. The next step was to redesign their mobile responsive web app.

For this, we actually decided on using a mobile-first approach and translate the design later to a desktop version. Our analysis of the current investment app usage was that 85% of their users are using their platform on mobile.

Onboarding with BigFundr

While most users are easily adaptable at using new apps, we have decided to add this feature as part of their marketing campaign to let users know who is BigFundr and what they stand for. Now, creating these pages is not a one-off thing. Its main purpose was to aid in their marketing campaigns for new products that BigFundr has in their pipeline. And these pages can easily be turned off when there is no need for them.

Giving them examples on how to use these pages was the key main feature in our UX solution for them.

New Dashboard Design - With Better Navigation

Their old mobile responsive design is well, mobile responsive.

Creating this involves lots of time and research. Unlike traditional investment dashboard design which is full of graphs, pie charts, we've decided to make it simple and something that their users understand and able to know where their money is at a glance. Mind you, that this part of the design took us the longest. It definitely wasn't easy. We need to talk to as many users as we could to come up with this final design.

Let's get on with the new dashboard design.

1. Multi Currency Selection

BigFundr deals most of their investments in Australian Dollars. So they needed to set up a multi currency selection which allows users to make investments in their preferred choice of currency.

2. Easy Access to Information

While most dashboards have graphs and pie charts, they have made it clear that how the information is being shown needs to be easily understandable by users. Even though most of their users are seasoned investors, they still find that old-fashioned numbers are the way to go.

So what we did was to colour code the numbers that coincide with the investment status of the Deals. This gives them enough information as to how their money is being processed.

Another main issue that was found in their previous app design was that the deposit button was hidden at the hamburger menu. We just made it simpler for users to find the deposit button in the app.

3. Bottom Bar Menu

Previously said that their menu was hidden in the hamburger button at the top right of the screen. We aimed to change that and proposed that a bottom navigation feels more appropriate and giving the users easier access to pages that are commonly used. When this change happened, 90% of their users find that this menu is more useful than the previous design.

Checkout Page

Designing a checkout page has got to be one of the most challenging for any investment platform. Trying to fit in the information whilst keeping the design sleek and sexy. Not for the faint hearted. Anyway we break down the page into 3 bite size chunks so that users are able to scan through the information with ease.

We kind of learned this from UX best practices for checkout pages. Something that Apple and Grab would approve of!

1. Product Information

First thing to note is that we don't use standard headings such as "Product Information". We want to let the users know what they are investing into and how much they are investing in.

2. Investment Summary

This is pretty much where the calculation goes into. Most users know that when they are making a purchase, they would much want to see what will they be paying for; to see if there are any other charges incurred, any discounts that they can get and other information that a summary would hold. We had to keep the section small therefore we added a link "View Details" where a small popup from the bottom will appear to show the rest of the information.

3. Payment Details

How will they make the payment?

One thing to note though. Not all payment methods are the same. BigFundr has a strict rule of ensuring that users have enough balance first before making their first investment.

Initial Checkout Flow

So did we make a mistake? Yes we did. In the next image, we thought that a user is able to make direct payment and their investments will be secured. But luckily, we did test this out with users and they were actually more confused as to how this new payment method works.

We were trying to link too many flows together that it seems forever for a user to finally make an investment.

We went back to the sketch board and figure out what are the major pain points in this design that we proposed.

1. Deposit Popup

Initially, we assumed that most users who had used investment apps before would be able to make the same transaction while choosing the payment method they want. Ultimately, these payment methods once approved, will be sent directly to their balance and then they are able to make the purchase. What we didn't realise was that, the process of this payment method has to be first approved by their Finance Team and these takes time for users to see the balance topups.

The lesson here is that can UX designers make mistakes? A definite yes. We are only human and we sometimes design based on assumptions if there are not enough data to support us.

Revised Checkout Flow

Well, having the support of the BigFundr stakeholders and getting the users involved to ensure that we are able to design a better checkout flow, helped a lot. Like a lot.

1. Keeping it simple

If the users do not have enough cash in their balance, we would just redirect them to deposit some cash first before making an investment. Removing all the other fluffy things that don't matter seems like a burden off the users' shoulders.

Lesson learnt: If the flow isn't broken, don't change it.

In Summary

It was definitely an eye opening UX design project for us of this scale. We may have made a few mistakes here and there but this is the beauty of it. Test and iterate each step of the way to ensure that we get the best possible design out for their users. Constant communication with the stakeholders is important as this will fasten the design process. Getting the full support from them is also a big plus point.

Anyway, there is more to this app. We will share about it in Part 2.

{{ad-campaign-2="/directory"}}