Inspiration

What we learned from designing a personal finance tool

by

on

View all posts

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.

Finance tool design

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.

Finance tool design

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.”

“Investing” in the visuals

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

Finance tool design

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

Finance tool design

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.

Finance tool design

Onboarding animations.

Finance tool design Finance tool design

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.

Finance tool design

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.

Finance tool design

Friendly error messages, helpful empty states, and helpful hints throughout help de-mystify complex processes.

Finance tool design

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

Author

Tejas Bhatt
Tejas was working away as a business analyst at one of the top 4 banks in the US. That's when he had an epiphany that the things he was making could be better and beautiful. He taught himself to design and code. In 2013, he co-founded Uncommon to help companies connect better with humans.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.