Savvy PERSONAL BUDGET TRACKER

Savvy case study

Duration of the project: 3 month, November - January 2021

Roles: UI & UX design

Overview

Savvy is a personal budget tracker for those who need to quickly and effectively control their money. Add Expenses, Income, checkout your balance and saving goals.

Purpose and Context

We believe that anyone can save money! It can be too late to start saving for a house on an island, comfortable retirement, or that special event where you want to celebrate life with your beloved ones; But it is never too early!

Who will use Savvy?

Everyone who owns a smartphone including teenagers, and those who don't have bank accouns to link credit card with the app. Early financial literacy teaches us to be more careful with money. We outlined users from a Story from the provided brief.

You don't need to be a financial expert to use our app.
Anyone can save money!
Money saving is Fun and Easy.

Objective

The main focus is on recording Income, Expenses, and Savings. We aimed to help people to analyze their own Financial state by visualizing comprehensive data. Financial awareness will help customers to reach the saving goals.

“As a money-saver, I need to be able to input information on the money I am receiving and spending (and on what), so that I can see an overview of my finances”. 


Savvy case study

UX Methods

  1. Interviews
  2. Benchmarking
  3. Usability testing
Savvy case study

User Flow Diagram

Initial diagram before the user test.

Savvy case study

Style Guide

Logo

The logo has several connotations. It can be associated with a chain, bricks, a union, a part of a hall, and a US dollar. 

We used the color phycology to determine the brand colors. Yellow-orange - cold, welth; Warm Green - life, prosperity.

  • For the dark and light background we use contrast type
  • In case of a busy background we put logo with an overlay
Savvy case study
Savvy case study
Savvy case study

Colors

Savvy case study

Typography 

Savvy case study

Low-fi Wireframes

We have created several rounds of paper Low-fidelity wireframes to reach the optimal layouts. After we reached the optimal results we created mid-fidelity wireframes and tested them on users to make sure our flow works as expected.

Savvy case study

Mid-Fi Wireframes & User Testing

We conducted 3 rounds of user testing to find and solve usability issues. Critical problems were solved after each participant including flow improvement and refining the content labels. Smaller issues were resolved after accomplishing the tests. 

User testing materials are here

Savvy case study

Final Designs

To facilitate user engagement we feature Savvy with the scan. According to the preference of the user he can choose to scan a bill or to add the desired amount manually. 

Savvy case study
Savvy case study

The privacy of every person is important to us. We ask permission to access the Camera.

If there are several numbers on a billing customer can use a Marker to show the app which amount he wants to add.

Savvy case study

After adding the desired amount, a customer can choose the Category of expenses. Such precision would help to see on what category of expenses to pay particular attention to.

Savvy case study

Savvy allows seeing Expenses within a certain period, check details on the date of the activity and the amount.

The app would analyze the spending and show it with priority from highest to lowest.

The research showed that users with concrete Goals are more dedicated to its accomplishment. That's why the app is featured with a progress bar that has the percentage of accomplishment, the amount, and the period of contribution.
Savvy case study

The personal budget is a touchy subject. An additional password will protect our users from ineligible views even in case the phone will be in someone else hands than the owner.

Path for the Future iterations

According to the results of interviews, people presume they are more efficient when they have a concrete goal in mind. The project would benefit if we develop a flow for creating and accomplishing the Financial goal. 

Savvy case study
Savvy case study

Three takeaways

  1. Check accessibility. ALWAYS.
  2. Don't spend too much time on the initial user flow. After the user testing it will be changed anyway.
  3. Be able to articulate your design decisions. People from outside do not know all the constraints that you have met.

* * *


Thank you for reading !