iOS app · Student money and university planning

BlueBubble

Student money, one clear answer a day.

Two hands holding an iPhone with the BlueBubble app: the home screen greets Avery and shows $354 left to spend in October, an On track label, a lilac chart of daily spending and two bank cards
All projects

BlueBubble helps university students run their money: what they can still spend this month, what is due next, and how university costs and financial aid add up. We designed the BlueBubble iOS app, from sign-up to budgets, accounts, university planning and sharing with family.

Our role
UI/UX design
Industry
Fintech, education
Platform
iOS app
Year
2019

01The challenge

Student money comes in pieces.

Most students manage their own money for the first time while studying. Income comes from a campus job, from parents and from financial aid, each on a different day. Spending happens every day. BlueBubble had to turn all of that into something a student can read in a few seconds.

  • Income arrives at odd times.

    A part-time job pays every two weeks, parents send help when they can, and aid lands once a term. Students need one number that says what is left for the month.

  • University costs feel far away.

    Tuition, housing and meals add up to a big yearly figure, partly covered by grants. Students need to see what is left to pay and when each payment is due.

  • Private, but not alone.

    Many students get help from family. They want to share part of their money picture without handing over every purchase.

02Our approach

One answer first, the details one tap away.

We designed every screen to answer a student's question before it shows the detail.

  1. What can I spend today?

    Home opens on what is left this month, a daily amount and an on-track check, then the next bills and tasks. Colours keep one meaning everywhere: green for on track, amber for due soon, red for over budget.

  2. University costs in the same picture.

    Tuition, housing and meals sit next to grants and work-study. What aid doesn't cover becomes monthly instalments, and the next one shows on Home with everything else that's due.

  3. Sharing on the student's terms.

    Students invite a parent with a PIN and choose what they can see: university costs, budget categories, balances or purchases, each with its own switch.

03The product in action

A month with BlueBubble.

THE DAILY CHECK-IN

One look at the month.

Home shows $354 left for October, $39 a day for the last nine days and what is due next. My budget splits the month into categories, and Analysis compares each week with the weekly budget.

Three BlueBubble screens: the home screen with $354 left to spend and a lilac daily chart, My budget with a $100 surplus and five categories, and Analysis with $846 spent and weekly bars against the budget
PLANNING THE YEAR

University costs, aid and choices.

The University tab adds up the year: $20,000 in costs, $5,000 in aid and $15,000 left, paid as $1,250 a month. Students can compare offers by net cost after aid and find plain answers about grants.

ACCOUNTS AND BILLS

Every account in one place.

Money brings the linked bank accounts, budget, analysis and tools together. Accounts shows each bank with its own balance, and each account opens on its latest transactions.

Three BlueBubble screens: the Money tab with $4,000 in two accounts and tiles for budget, analysis, accounts and tools, the Accounts screen with HSBC and Citizens cards, and the HSBC checking account with its latest transactions
BRINGING FAMILY IN

Help from home, on the student's terms.

From Profile, students add a parent as a connection. They set a PIN and choose, area by area, what that person can see. Connections can also send messages in the app.

Three BlueBubble screens: Avery's profile with tiles for tasks, connections, settings and help, the connections list with two parents and their messages, and the add connection form with a PIN and switches for what they can see

04Design language

Playful objects, calm screens.

BlueBubble keeps its playful side: a 3D object for each area and a mascot on the welcome screen. The screens around them stay calm, with white cards, an indigo brand colour, Nunito Sans and three status colours that always mean the same thing.

BlueBubble style tile: the welcome screen with the 3D mascot, colour swatches for indigo, lilac, green, amber and red, Nunito Sans type, a row of 3D objects and interface pieces such as status chips, a bank card and a list row

05The result

Designed around a student's month.

We designed the BlueBubble iOS app: sign-up, a home screen that answers what is left to spend, budgets and analysis, linked accounts, university costs and aid, and sharing with family.

Next projectNext! FitnessThe member app for an AI-powered gym.

06Contact

Building a finance app?

We design apps and platforms from first idea to next release.

  • No commitment, just a conversation
  • You talk directly with a designer
  • A reply with a clear next step
Prefer to talk? Book a call

Send us a message

Tell us a little about your product. We’ll get back to you soon.