Brees: Personal Finance App Design

Type
Brand and app concept
Brand
Brees
Industry
Personal finance app
Year
2022

Brees is a personal finance app design for people who want to see and control their spending. It includes 54 mobile screens across eight flows: sign up and verification, log in, password recovery, account set up, home, budgets, insights and settings, all in one confident blue.

Brees personal finance app showcase: a fan of five phone screens, with the home dashboard in front, on a deep blue gradient.

The brief

A personal finance app design that makes budgeting feel easy

Money apps ask people to trust them with their accounts, so the first minutes matter. Brees answers with a calm, saturated blue, plain language and one clear action per screen. It is a personal finance app design where identity and interface are drawn together, from the first welcome to the last settings toggle.

The design treats the phone as the place a budget actually gets kept. Every flow is planned so a person always knows where they stand: what is left to spend, what just came in, and what to do next.

What we built

How the Brees mobile app UI is built

The journey starts with a bold sign up form, a get started checklist for verifying an email and connecting a bank account, and an email verification prompt with matching inbox and confirmation screens. Log in and password recovery have their own short flows, including the reset email, a new password form and a success state.

The home flow is a blue dashboard showing the available balance, linked accounts, a card to sort transactions and a budgets summary, with a tab bar below. Around it sit an account list, a single account view, swipe-to-categorise cards, a notification centre, searchable transaction lists, transaction details and a filter sheet.

The budget flow walks through naming a budget, choosing a weekly or monthly cycle, picking a start date, setting an amount and previewing the result before it is created, then shows live budgets with progress bars and recent transactions. Insights arrive as full colour story cards in red, green and purple, and the profile area covers account details, password, notifications and a help centre.

Outcome

A 54 screen budgeting app UI across eight flows

A team that adopts Brees starts with a complete mobile app UI design: 54 screens, a reusable component set, and a colour, type and illustration system defined once and applied everywhere. It is ready to take your own brand, copy and data.

54 screens across eight finance flows

  • 54 mobile app screens in eight flows
  • Sign up and verification: 7 screens, with a get started checklist and email verification
  • Log in and forgot password: 7 screens, from reset email to success state
  • Account set up: 2 screens for linking a bank account
  • Home: 13 screens, with a balance dashboard, accounts, notifications, transactions and filters
  • Budget: 12 screens, from creating a budget cycle to live progress and recent transactions
  • Insights: 6 screens of full colour spending and income story cards
  • Profile and settings: 7 screens, with account details, password, notifications and a help centre

All 54 Brees screens

54 screens across 8 flows, swipe or use the arrows to move through each one.

Sign up and verification 7

  • Brees personal finance app sign up and verification screen 1 of 7.
  • Brees personal finance app sign up and verification screen 2 of 7.
  • Brees personal finance app sign up and verification screen 3 of 7.
  • Brees personal finance app sign up and verification screen 4 of 7.
  • Brees personal finance app sign up and verification screen 5 of 7.
  • Brees personal finance app sign up and verification screen 6 of 7.
  • Brees personal finance app sign up and verification screen 7 of 7.

Log in 1

  • Brees personal finance app log in screen 1 of 1.

Forgot password 6

  • Brees personal finance app forgot password screen 1 of 6.
  • Brees personal finance app forgot password screen 2 of 6.
  • Brees personal finance app forgot password screen 3 of 6.
  • Brees personal finance app forgot password screen 4 of 6.
  • Brees personal finance app forgot password screen 5 of 6.
  • Brees personal finance app forgot password screen 6 of 6.

Account set up 2

  • Brees personal finance app account set up screen 1 of 2.
  • Brees personal finance app account set up screen 2 of 2.

Home 13

  • Brees personal finance app home screen 1 of 13.
  • Brees personal finance app home screen 2 of 13.
  • Brees personal finance app home screen 3 of 13.
  • Brees personal finance app home screen 4 of 13.
  • Brees personal finance app home screen 5 of 13.
  • Brees personal finance app home screen 6 of 13.
  • Brees personal finance app home screen 7 of 13.
  • Brees personal finance app home screen 8 of 13.
  • Brees personal finance app home screen 9 of 13.
  • Brees personal finance app home screen 10 of 13.
  • Brees personal finance app home screen 11 of 13.
  • Brees personal finance app home screen 12 of 13.
  • Brees personal finance app home screen 13 of 13.

Budget 12

  • Brees personal finance app budget screen 1 of 12.
  • Brees personal finance app budget screen 2 of 12.
  • Brees personal finance app budget screen 3 of 12.
  • Brees personal finance app budget screen 4 of 12.
  • Brees personal finance app budget screen 5 of 12.
  • Brees personal finance app budget screen 6 of 12.
  • Brees personal finance app budget screen 7 of 12.
  • Brees personal finance app budget screen 8 of 12.
  • Brees personal finance app budget screen 9 of 12.
  • Brees personal finance app budget screen 10 of 12.
  • Brees personal finance app budget screen 11 of 12.
  • Brees personal finance app budget screen 12 of 12.

Insights 6

  • Brees personal finance app insights screen 1 of 6.
  • Brees personal finance app insights screen 2 of 6.
  • Brees personal finance app insights screen 3 of 6.
  • Brees personal finance app insights screen 4 of 6.
  • Brees personal finance app insights screen 5 of 6.
  • Brees personal finance app insights screen 6 of 6.

Profile and settings 7

  • Brees personal finance app profile and settings screen 1 of 7.
  • Brees personal finance app profile and settings screen 2 of 7.
  • Brees personal finance app profile and settings screen 3 of 7.
  • Brees personal finance app profile and settings screen 4 of 7.
  • Brees personal finance app profile and settings screen 5 of 7.
  • Brees personal finance app profile and settings screen 6 of 7.
  • Brees personal finance app profile and settings screen 7 of 7.

Want an app like this?

Tell us what you are building and we will come back with a written scope.
Get a Quote

Questions about Brees, Personal Finance App

  • Brees includes 54 mobile screens in eight flows: sign up and verification, log in, forgot password, account set up, home, budget, insights, and profile and settings. Each flow shows its main screens plus the confirmation and empty states between them.
  • It suits fintech teams, banks and startups building a spending, saving or budgeting app. The flows cover the full path from account creation to everyday money tracking, so a product team can start from a complete structure instead of a blank canvas.
  • Brees can be adapted to your brand, copy and product. Colour, type, logo, illustrations and the screen list are all adjustable, and flows can be added or removed.
Next projectDevnest, CrimsonDevnest

Let's put this in writing.

Tell us what you need. A reply comes within one business day, the written scope with dates follows the call within one business day, and you own every file, login and domain from the day it ships.