Introduction

Billy's prototype is presented as the first iteration of an expense tracker tool that helps users manage their expenses and income, it shows an example of how an existing user would add a new expense. The application's functionality would offer users an easy-to-read overview of all the information related to their personal finances in one place. Billy is targeted at people who are new to expense tracking and budgeting.

App Conception

The idea came because I found the most popular expense tracker websites and apps are too complicated and have a lot of information that can be overwhelming and difficult to understand for new users. The proposed interface was conceived with a minimalistic approach, with a simple navigation pattern that offers easy-to-read information and an intuitive design.

Project Scope and Research

Once I'd decided on the basic functionality for the app, I did some research on other apps that already exist with similar functionality and features.

The best-rated applications were too robust since they offered a more aggressive approach to keeping their users' expenses in check with their budget, sending alerts when expenses were going over budget or making use of the envelope budgeting system. In these cases, I found their interface suffered because they fit a lot of information in one place, which reflects in a very cluttered interface with a lot of numbers associated with a single expense.

Sketching

When I sketched out the first layout for Billy, I thought of people who might be new to expense tracking and budgeting, and what would be the most important and valuable information to include for them, to aid their financial decisions.

The three main sections: Transactions, Accounts & Budgets were added as elements for the main navigation. For the Transactions Section, I decided to include a Graph View and a List View, so people can choose the best way for them to read the information.

Wireframes

Once I had a rough idea of how I wanted the app to look, I brought my sketches to Figma. I started to build wireframes referencing my sketches and adjusting as elements were falling into place. I built wireframes for the top-level navigation screens using different shades of black, to depict the hierarchy of the key information that should be highlighted, like call-to-action buttons.

Colour Palette

To start building the high-fidelity mock-ups for the app I needed to find a suitable colour palette that would help me make design decisions to ensure the interface would have sufficient contrast and white space.

The app's colour palette consists of green and violet that create a complementary colour scheme. Hue variations help with hierarchy and offer visual variety while remaining consistent. Since Billy is an app that's closely related to the concept of money, I decided to use green as the base colour. Aside from the reference to bills and money, green is also tending to have a soothing effect, which is a feeling we want to evoke when people are dealing with their finances, so they don't experience it as a stressful situation.

I chose the violet as a compliment because it offers a good contrast with the green elements, it's used mainly on buttons and call-to-action sections. Violet is often related to spirituality, and the way I intended to use it here is to awaken awareness into an important topic of life, which is personal finances.

Beyond offering a way to manage and track expenses and budgets, having a healthy financial life offers the ability to make mindful decisions and can help to lead a more enjoyable life.

Branding

For Billy's logo, I decided to use a piggy bank illustration, to emphasize the importance of savings and planning when it comes to personal finances. The application is making use of the font Raleway, in different weights and sizes to help with hierarchy and make the pages easy to scan. A sans-serif font was chosen to help with web readability on the user's device.

Mockups

Once the basic elements were in place, I started building components on Figma for the elements that are used more than once across the app's interface. The main navigation panel came together to offer a top-level hierarchy pattern.

The elements on the interface were conceived under the 8 points rule to create a harmonious balance. This can be found on paddings, font sizes and line heights, widths and heights of icons, buttons, and containers.

Since Billy is intended to be used as an application, (instead of a traditional website), the navigation menu is occupying a fixed space to the left-hand side of the layout, for the remaining area, where all the content is being presented, I'm using a nine-column grid to keep all elements aligned and promote consistency across pages.

Prototype

Billy's app prototype offers an overview of the app for an existing user and mocks the ability to add a new expense. The prototype offers the user the ability to navigate the three main sections, and to change the view for the Transactions section from Chart to List.

Final Thoughts

As a next step, I would like to test this version of the app on its target audience. Individuals between 18 to 30 years old who might be joining the workforce or are in their first years as employees or freelancers that receive some sort of income.

Users' feedback would provide valuable information and how much Billy is solving their pain points. How could the budgeting section be more useful? How important is their bank account integration to plan and make better financial decisions? These would be the kind of questions I'd ask during user testing and interviews.

Learn more

• Figma Prototype