What we learned from designing a personal finance tool

4 min read
Tejas Bhatt
  •  Mar 23, 2017
Link copied to clipboard

Financial tools aren’t exactly the most exciting things to use—and often the user experience feels corporate, cold, and intimidating.

Fisdom, a fintech startup based in Bangalore, aims to make investing easy and fun. They reverse the investment process—instead of starting by explaining the various financial products on offer, users start by setting a goal and then saving towards that amount in monthly steps.

In early 2016, Fisdom asked us at Uncommon to streamline their mobile apps. During the discovery phase, we realized that they had their major use cases and flows nailed down, but the combination of colors, icons, and the existing aesthetic didn’t translate into a fun and enjoyable experience.

Related: 3 ways to strengthen your discovery phase

1. Show them the money ? ?

The investment process requires the investors to fill up a one-time know-your-customer (KYC) form. The form runs into 5 screens and requires a lot of information. In the original version of the app, this KYC was a pre-requisite to any investment users wanted to make.

We discussed this issue with the Fisdom team and decided that KYC shouldn’t block someone from exploring investment options. So, we moved the registration process to after the investor had selected all investment options and made the decision to invest. The users could invest, their money would be put in a buffer, and they’d have 3 days to complete the KYC.

2. Design for data

There was no escaping the regulatory requirements just because Fisdom is a mobile app. One of the key problems that we looked at solving was how to make the gathering of information as painless as possible.

We designed an alternative system where the user only had to scan (or take a photo of) their tax permanent account number card, or enter the number and the system would pre-fill all the KYC data. Additionally, we created smarter defaults. As a result, the user only had to review and edit some information as needed, instead of filling out screen after screen of tedious paperwork.

Related: Getting started with data-driven design

The app breaks the process of gathering all your essential information into bite-sized, distinct steps—making the system smooth and simple. We reordered, edited, and, in some cases, removed a number of the stages to try and craft a hassle-free KYC flow.

3. Financial tools don’t have to be boring

We did a survey of other apps in the fintech space and realized all of them had bland color palettes and uninviting experiences.

When learning anything new, being bombarded with information can be overwhelming, making most people drop out before they start. So we made a conscious effort to keep things simple. We also took the design in a direction that was completely different than other fintech tool designs.

“Respect your user’s level of expertise.”

Twitter Logo

“Investing” in the visuals

We created a palette that sported bright hues to support the light and playful concept of the application.

Vivid graphics enhance the experience and make the dry subject matter more exciting.

Super-talented Ayesha Rana created some of the illustrations, and some are from Freepik.

Research, analytics, wireframes, and user flows are only half-done if the final screens aren’t packaged into visuals that convey the information you intended them to. Though Fisdom was mostly a visual redesign project, we changed the complete experience of the app by doing so.

From the get-go, it was important to set a playful tone—colorful sign-up screens convey distinct personality and small transition animations help increase engagement. Since our deliverables included detailed animations, it became easier for Fisdom’s technology team to create these.

Onboarding animations.

Investments become daunting because of all the details required. To help with this, we added visual associations to all goals and numbers, making the process of choosing from a list of options less tiresome. This left people free to spend time understanding the various plans and helped them make better decisions about how to invest their money.

4. Respect your user’s level of expertise ✊

Fisdom targets a younger user base—folks who may not have much experience with the investment process. For many users, this could be their first ever investment. We designed the app and added small features keeping in mind this particular set of users.

We broke down the resources section into categories for various lifestyles and expertise levels. Then we used the same segmentation to allow users to filter content most relevant to them.

Users can filter content based on their lifestyle or level of expertise.

Blank states, language, message

There are playful blank states with clear calls to action. We added tooltips, overlays, and info bubbles at each stage so the user doesn’t feel lost at any point in the app.

Friendly error messages, helpful empty states, and helpful hints throughout help de-mystify complex processes.
Some of the redesigned screens within the Fisdom app.

At the end of our 5-week engagement, we had a bright, beautiful app that actually makes investing fun.

And it wouldn’t have been possible without taking some risks while we were designing.

Go behind the scenes of more design projects

Collaborate in real time on a digital whiteboard