App: Money Manager

Screenshots of a mobile budgeting app showing transactions, expense editing, financial reports, and budget summaries.

Challenge

Optimizing the App Money Manager in order to improve its usability and accessibility. Money Manager is an App, which lets users track, manage and plan their financial transactions.

Side Note: This projects purpose is to showcase my UX/UI Design skills. I do not work or have worked for Money Manager. The views presented are my own, and I do not have access to any user data or research that influenced the current design.

Company Background and Business Model

Money Manager, developed by the South Korean company Realbyte Inc, founded in 2012, has had 1.5 Mio App Downloads, according to their App Store pages.

The free version of the App contains ad placements in the standard banner format positioned at the bottom. The paid version (5,99€ one-time payment) removes the ads and gives the additional option to access it via Desktop.

User Research Learnings

My learnings from User Interviews are that the transaction input needs to be fast and easy, especially when entering more than one transaction at a time.
The current balance needs to be prominently in the viewport to make it easy to check if it matches the one in the banking app.

There has to be a prominent search option to locate transactions with accessible editing options.

User Stories

Three screens displaying user stories about financial management. The first reads, "As a User, I want to add my financial transactions; so I can obtain an overview of my income and expenses." The second states, "As a User, I want to see the relation of my income and expenses; so I can obtain an overview of my financial situation." The third says, "As a User, I want to know how much I can spend in a certain amount of time; so I can prevent overspending."

Structure and User Flows

Currently the primary destinations are Transactions, Adding a new Transaction and Reports. Secondary destinations are Accounts, Budgets, Search, Settings and Adding a new Account, Budget or Category.

Challenges and Goals

  • Improving the accessibility, especially with user input forms and lists

  • De-cluttering pages by removing or hiding functionalities

  • Designing a list view with clear information hierarchy and structure

  • Providing clear CTA’s

  • Re-organizing content and structure

  • Providing additional information that the users expect to find

Main Screen: Transactions

Main Screen: New Transaction

Main Screen: Reports

New Screen: Budgets

Updated Dark UI

Screenshots of a budgeting mobile app displaying reports, transactions, and budgets on three phones with dark mode interface and financial data.

UI Changes

Typography: I identified the current single-used font as Apple's SF Pro and re-worked the used styles based on the Human Interface Guidelines to increase readability and accessibility. I decided to keep SF Pro as the font due to its high legibility and clean branding.

A digital style guide table displaying font styles, sizes, weights, and colors, organized into sections for page title, body text, secondary text, labels, and tab bar, with specifications for each text style.

Icongraphy: To be consistent and convey the same brand, I use SF Symbols as the Icons. I switched a few symbols to make them easier to understand and added labels in the bottom navigation.

Mobile app menu with icons for Budgets, Reports, Transactions, Accounts, and Settings, with Transactions highlighted.

Colors: In the current App version, the colours are inconsistent. In some cases, color is the only indicator for states (list items), and text contrast is not high enough to ensure readability. The colors used are different variations of orange and blue.

I decided on blue as the primary UI color because it is more neutral properties, especially in finance. I updated the shade of blue to have a higher luminosity and saturation. I use a slight gradient for all colored strokes and coloured areas to highlight and emphasise actions and states.

Color palette including a white background, dark blue background, bright cyan primary UI color, orange secondary UI color, dark blue light UI text color, and light gray dark UI text color.

Final Prototype

I developed a fully clickable prototype with my final design in Figma. It includes my learnings from validating critical user flows by Usability Testing and matches my goals with solutions for the challenges I identified.


Do you want to check it out? Let’s meet!

REACH OUT