UI/UX Case study: A step-by-step guide to the process of designing a Personal Financial Management app


Sanjay Tarani

Aug 27 · 6 min read

case study_banner.png
Benjamin Franklin once said: “Beware of little expenses; a small leak will sink a great ship.

Discover & share this Money GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.

Money is an exciting thing. The more you try to escape it, the more unavoidable it becomes. The more you confront it and control it, the less it controls you. It’s a beautiful servant, but a terrible master.

Managing your money is crucial, but how should we do it? I can only think of a few ways to achieve this:

  • By creating an excel sheet and making a note of every transaction😣

  • Create a budget for the month and plan for a short/long term goal 🤔

So, I started finding solutions about how to achieve these goals. I ended up downloading 4–5 money management applications, but there was always something that I felt was missing in them. Some apps had features that I liked, but at the same time, the experience of the app was horrible

Finally, I decided to create an app that can address all these problems and provide a better solution.

Introduction

Ezifin provides mortgage, loans, and banking services to everyone by nurturing customers’ finance using PFM based finance and goal tracking with automation and accuracy.

Understanding the Challenge

Financial platforms are full of information which is scattered everywhere. Sometimes, users face many problems trying to find the info but end up contacting the customer support to get a resolution.

How can we help millennials and younger adults save money for their dream home without overwhelming them or making things too analytical?

The journey of the app was created keeping these following points in mind:

  1. The interface has to break rules of conventional banking applications

  2. Reduce the amount of friction on pages wherever necessary

  3. Easy navigation between Transactions, accounts and other vital aspects

  4. It has to be unique; also it has to solve the UX problems we are facing in today’s world

Research Methods

Personas

I surveyed ten users at my workplace; fortunately, three of them had a financial background and were already using an application to manage their finances, this helped me understand what they like and don’t like about the current application in use. The accumulation of different insights and typical patterns from users helped me create three personas, which are a manifestation of that data in character. Two of my personas were based on the specific needs of some participants. Hence, I focused more on the common persona.

1.png

User Persona

Information Architecture

Up until now, I had a rough idea how I want my application to function but mapping the basic flow of the app forced me to understand each step on the path the users will take during the journey, I first sketched it on the whiteboard and then converted into a digital format.

Information Architecture.png

Comparison Insights

When working towards creating sketches, I researched a bit more on what are the current PFM tools and what do they possess and what I can improve in the financial management tool of 2020.

Untitled_Artwork 5.jpg

Traditional PFM vs PFM tools of 2020

Many platforms were displaying so many graphs on each page that were consuming space on the screen. I organised a small user test here and found out 3/5 users weren’t even looking at those graphs. I stopped here for a bit and asked myself when people don’t understand graphs why even have them in the first place. I replaced the graph with a card showing numbers and progress bars to make it easier for users to grasp the information displayed.

Initial Sketches

The first step towards the UI design to help me outline the application and visually imagine it.

cards.png

Card designs

Untitled_Artwork.jpg

More cards….

Wireframes

The idea of wireframes was to put elements on the screen and focus more on the functionality than the aesthetics. Moreover, the simplicity of wireframes allowed me to rapidly test ideas without providing more details, which I can achieve in the next stage.

Wireframes.png
 

Visual Design

Inspiration Board

This is something that I always do before starting any design work be it UI design or any graphics, something to be inspired from and see how other people have done it.

The goal is to learn about the visual language used by other existing financial applications.

research.png

Inspiration board

Branding

The blue colour is thought to induce calm and convey serenity and peace. It also instils confidence and inspires feelings of trust, responsibility and integrity. Hence, the blue colour palette is the best fit for a finance app that promotes saving money. Additionally, I used shades of grey and blue and also included a great deal of white to give a clean appearance.

Branding Guide - Colour.png

Design Iterations

I came across different design possibilities, and I kept on experimenting till I felt that the information presented on the screen is super useful, I created a set of tasks for five users and tested the prototype using Marvel user testing feature and turns out all the five users were able to achieve the assigned tasks.

Iteration.png
 

Conclusion

This is my second financial app project, and I must say that it has been a challenging and exciting experience. As there are a variety of Finance management applications available in the market, the primary challenge is to get people to try the new app, which has a lot to offer. To understand the finance world on a deeper level, I installed three applications such as Pocketbook, Frollo and Money brilliant, and I kept using them to understand the user experience and what those apps had to offer.

Empathy is at the heart of design. Without an understanding of what others see, feel, and experience, the design is a pointless task
— Tim Brown, CEO of the innovation and design firm IDEO

Next Steps

  • Roll out the beta release of the platform

  • Improve user flow

  • More usability testing with a larger audience and improvements

Planned enhancements

Add functionalities such as Bill reminders, uploading receipts and loan application integration.

gymmate.png

Gymate

Fitness application to help you reach your goals