top of page

Adding a feature

Personal Finance Management

My role

UX / UI Designer

Duration

1.5 month

Tools

Figma

Rectangle (4).png
kioi.png

Project overview

  • Aiyl Bank (ab.kg) is seeking to add personal finance management feature to their existing mobile app. 

  • The feature should enable users to manage their money easily from their mobile.

  • The primary target group is Millennials. The target user location is Kyrgyzstan.

​Turning a problem into an opportunity

Problem

  • Design a personal finance management feature for an existing Aiyl Bank app.

  • The design must harmoniously embed within the  brand and the operating system of Android.

Opportunity

  • Helping Millennials to better manage their personal finances by: 

    • Enabling them to set financial goals and motivating towards accomplishing them; 

research

Research

Research goal - to understand the human side of the story by exploring:

  • The challenges Millenials face in managing personal money; 

  • The context in which users operate;

  • Potential design solutions which would fit the context and the type of users;

Personal finance management app
App brainstorming
App design solution

I interviewed Millennials and used secondary research findings.

Interview findings

User interviews

  • I interviewed 5 Millennials (women and men) aged from 27 to 36;

  • Economically active and living in Kyrgyzstan; 

  • With different money management habits;

Synthesizing the interview findings helped to discover the NEEDS which guided me to narrow down the design solution.

Design constraints

  • Most affordable local shops and services accept payments in cash only;

  • The local culture of overspending for the family events which often cause budget shortage;

  • 4 out of 5 participants stopped using the apps which require inputting transactions manually;

User long-term goals

  • Buying a house;

  • Marriage (if single);

  • Raising kids (if married);

  • Investment in stocks;

  • Investment into own business;

  • Retirement savings;

User frustrations

  • Feeling they are not doing enough to accomplish long-term goals;

  • Exceeding expense limits due to unforeseen costs;

  • Not having enough knowledge about safe and effective ways of investment;

  • Having to input every expense manually;

User needs

  • A help with setting financial goals and staying motivated towards accomplishing them;

  • Being able to set monthly expense limits;

  • Saving as much as possible; 

  • Being better prepared for the expense increase when they start or enlarge their family;

Interview findings

Millennials top financial concerns 

Secondary research

In order to support the qualitative data driven from the interview, I also looked at the existing publications about Milllennial financial behaviors.

The findings supported my conclusions from the interview. They also helped to understand which financial challenges have more weight for Millennials.
 

Group 2171.png

Source: PwC’s annual Employee Financial Wellness Survey, 2019

Millennial top financial goals

Long-term

64%   Emergency fund

42%   Retirement savings

37%   House​

Short-term

37%   Vacation

29%   New car

29%   New tech device​

Secondary research

Key takeaways

  • Millenials are frustrated about overspending and as a results not saving enough for accomplishing their life goals; 

CHALLENGES

Instead of tracking every expense, the feature should rather focus on helping Millennials to set specific financial goals and keeping them motivated to accomplish them. So the key functionalities should enable users to:

  • set financial goals

  • keep accomplishment track

  • set monthly expense limit

  • 4 out of 5 users stopped using finance apps which required mannual input of expenses; 

SOLUTION

User persona

Aida is 35, who is married and has 2 kids. She manages her young family’s finances and makes sure that their priorities are being taken care of.

She needs an app, which will help her to keep a track of financial goals and to see a progress towards accomplishing them.

Understanding the user

Using the interview and secondary research findings, I summarised the main challenges and needs within one User Persona.

I focused on Millenials in their 30s and 40s who have more clear financial priorities for the near future.  

User persona
User persona
Empathy map

Empthasising with the user

Defining the user helped to research the context deeper by: 

  • Looking at the problem through users' eyes, what they think, feel and experience; 

  • Considering the factors which affect users' decisions; 

​

I kept the Empathy Map in mind when making design decisions related to functionality, information hierarchy and the overall feel.  

​

Empathy map

Ideation

Figuring out the key journey in completing the task.

User's journey through the task

  • I analyzed the navigation system within the existing app to understand how and where to locate the new feature;

  • Next i continued user flow by creating the map of keys actions within the feature;​

Task flow

Keeping a track of the financial goals and accomplishment;​

Adding new goals;

Adding transactions;

Adding money to the goals (added later after testing, to make the action easier to take);

ideation
task flow

Sketching

Exploring, defining and communicating ideas through a quick sketch of solutions;

After identifying the key actions in the task flow, I drew out the journey through visualizing the app screens;

Sketch

A goal creation path;

Wireframes

Ensuring consistency in the overall journey;

Sketching iteration based on the test findings;

Wireframes
Wireframes
sketches

Designing

Hi fi wireframes

Goal categories

Each category as a separate page;

Goals summary

Each page contains: goals summary and list of goals.

Goals within Savings

  • Goals progress indications;

  • Each goal can be edited, deleted and marked as complete;

  • FUTURE: to enable opening each goal as a separate page to see full details and the related materials.

One button for all actions

  • Floating action button;

  • Allows to choose from the list of possible actions;

  • Accessable from any page;

FinTech wireframes
Hi fi wireframes

Making a transaction​

  • A form for adding a transaction;

  • Added transaction appears in the EXPENSE page:

Balance update

Monthly expense limit

With an updated sum of how much is spent already

Documentation of actions

Categorized transactions list for a quick review

Creating a goal

  • Goals can be created under each category; 

  • Wireframes were later iterated to enable automatic payments;

Hi fi wireframes
Hi fi wireframes
Hi fi wireframes
Hi fi wireframes
design and testing
wireframes

Usability testing

CHALLENGE 1

  • My key challenge was to divide goals between categories without creating confusion.

  • The first testing showed that users were confused. 

SOLUTION

  • The categories were separated as individual pages;

  • Also that way, the goals within each page recieved better attention;

CHALLENGE 2

  • It was challenging to understand which information plays a greater role when user is managing money;

  • Also how to locate that information for a quick scan through?

SOLUTION

  • During the testing i asked users to make a transaction and observed the behaviors;

  • Users needed to see their balance update and the latest summary report about their goals;

Before

All the goal categories were listed out in one page;

Usability testing

Iteration 

Goal categories were separated as pages;

Usability testing

Final version

UI improved and made more intuitive; 

Usability testing

Before

The comparative chart was found unnecessary;

Usability testing

Iteration 

A progress summary was helpful to keep users motivated;

Usability testing

Final version

The UI was improved for scanning through quickly;

Usability testing

Before

Users were hesitant to spend money before checking balance;

Usability testing

Iteration 

The balance update was moved to the top in the hierarchy;

Usability testing

Final version

The UI was improved: consistent color labeling and icons;

Usability testing

Before

The goal cards were not easy for a quick scan through;

Usability testing

Iteration

Cleaning from clutter and options icon replacement;

Usability testing

Final version

Improving the UI and adding CTA encouraging to save;

Usability testing

Before

The action button and the charts competed for attention;

Usability testing

Iteration 

Differentiating colors helped to solve the problem;

Usability testing

Final version

Assigning different buttons for each action;

Usability testing

Before

Users expect OPTIONS to pop up when they "touch & hold";

Usability testing

Iteration 

Options pop up needed a better way of design also;

Usability testing

Final version

Ensuring consistency in the way how information pops up;

Usability testing

Before

Forms did not include all the necessary elements;

Usability testing

Iteration 

Adding more elements based on testing results;

Usability testing

Final version

UI improvement and adding auto-pay feature;

Usability testing
testing

Final design

final design
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe
Hi hi wireframe

See the final prototype here: 

Final thoughts

Challenge accepted

It was my first time designing anything close to fin tech, so the project was a big challenge. I spend more time analysising other existing apps and talking to Millenials about their money managemnet tips and challenges. Being a Millenial myself who was never serious about managing money, I ended up designing something which I myself would use also.

Testing as soon as possibe

The project taught me to test as much as possible in order to validate an idea before investing time further on the hi-fi version. 

User perspective

The project taught me taking into consideration the user demographic and the context in which users interact with the product;

Observations during testing

It was very helpful observing what users expected while interacting with a digital product. For example, my initial design did not allow OPTIONS to pop up when "press & hold". Later, when testing, I observed that 4 out of 5 users "pressed & hold" in order to edit a goal. As a result, I relied on observations and interacting closely with users to understand intuitive design solutions.

Fina thoughts

More projects

I am open to meeting new people to chat inspiring or new possibilities to work together! Shoot me an email or get to know me at LinkedIn

Bishkek, Kyrgyzstan 

bottom of page