User Interface Design For Expense Tracker App

We have designed an expense tracker app that functions as a simple money tracker for users to monitor, maintain and stay on top of their budget and expenses.

Our Roles

Research, User Flows, Information Architecture, Sketching, Wireframing, Redesign user interface & Prototyping.


3 Weeks

feature image of app expense tracker app

The Challenge in Expense Tracker Apps

Motivate and change user behavior

Insights from business

Most people are not investing enough time on any money tracker app to consciously manage their expenses

Our Client’s Goals
  1.  Habit-building
  2.  Intuitive user interface
  3.  Explore useful features

Analysis of Users

We began with user research and interviewed a total of 4 existing users. The goal was to target users who had just begun their financial journeys in order to understand their motivations and openness towards managing their personal finances digitally. 

Few questions that were asked during user interview:

Q1. How do you manage your expenses?

Q2. Are you facing any challenge while using the app?

Q3. Which feature would you like to add to a money tracker app?

Q4. Do you have any feedback or suggestions?

Q5. Application Usage Frequency

Empathy Map

In order to gain a deep understanding of the user behaviour, we created an empathy map to visualize the factors that influence their thought processes. This mapping helped us prioritize users’ subconscious needs and align the findings for meaningful innovation and an engaging interface.

diagram of empathy map of expense tracker app
Key Takeaways for Expense Tracker App:
  • Notify user to add expenses
  • Add gamification to motivate user to add expenses

Information Architecture

After mapping the existing app architecture, we identify the usability issues  such as unclear navigation, UI and poor error messages. To address these and improvise, we also added features like reminders to add expenses and geo-location based prompts to make for an interactive interface.

information architecture of the expense tracker app

Sketch & Wireframe

We put to pen and paper the low fidelity wireframes for the money tracker app’s primary features, which is to track and manage expenses, and decidedly kept it at the most prominent position on the home page.

rough sketch of the expense tracker app
digital wireframe

UI Kit

We explored our competitors and designed a UI kit around our competitive advantages while maintaining readability and legibility for all users. We chose an appropriate color scheme and set up the style guide to effectively position the brand’s presence.

ui kit design by Southtech ux/ui team

Prototype of Expense Tracker App

It’s necessary to produce higher-fidelity prototypes to test and learn. Our designs were refined by multiple phases of feedback (from both users and clients) to make them perfectly tailored to our target audience.

prototype screens of the money tracker app

Final Thoughts

Finally, our new user interface was tested with users for feedback on what they liked about the new design and what may frustrate them. In this project, we were able to find out usability issues and explore how the users of the expense tracker app interact with the interface and navigate through, including what they find clear and easy to use and where further improvisations can be made.

Interested to Explore More Of Our UX/UI Design Solutions?​

Then why wait? We are here to help!

Requesting demo

Ascend Financials logo