Pocket, mobile banking for children

Pocket, mobile banking for children

Client

Personal project

Team

Yvonne Chan

Role

Visual + UI

Research + UX

Prototyping

Tools

Figma

ProtoPie

Whimsical

Children want to save too

Even though most teens and pre-teens are now highly tech-savvy, the new mobile banking world often excludes them with age restrictions.

This leaves them with archaic ways of saving money – stashing wads of cash somewhere.

There has to be a better way.

A project revisited

Pocket was originally a project my classmate and I completed in 2018, during our first quarter at Seattle Central Creative Academy. It was my first time creating an app interface, so revisiting this project in 2020 allowed me to look at past mistakes and consciously design better solutions.

With the project refresh, I focused on improving the UI and tweaking some parts of the user flows, rather than rethinking research and UX strategies.

Past project with critique
My previous designs, with just a few of the points of critique I gave myself 😅

Learning about the users

To understand how children in our age range use money and how their parents interact with them in financial spaces, we conducted exploratory interviews with three parents and three children with ages ranging from 10 to 13. We also browsed parenting forums to find common pain points from parents.

Below are highlights of the learnings that informed our proposed solution.

Parent

Parents

  • Usually give their children cash rather than going through any form of banking.
  • Believe that children keeping money digitally will cause them to lose the sense of its growth and value.
  • Want ways for their children to set money goals.
Child

Children

  • Mostly just keep cash, saving money in a wallet.
  • When saving for something, they collect cash and recount what they’ve earned each time they add to the collection.
  • Want more financial autonomy.

So… what are pockets?

We knew our focus should be on teaching money management skills through encouraging children to save up money. But our research taught us that mobile banking can cause children to lose the physical aspect of saving up money. They can’t see a growing pile of cash anymore.

This led us to distill down to three main features for our MVP:

  1. Allowing users to save for multiple specific goals.
  2. Having progress visible with every goal so users can still visualize their savings.
  3. Giving moments of celebration to encourage users to keep saving.

From these features, we created the Pocket system: each Pocket is a specific savings goal the user creates. When a Pocket is in progress, it’s always accompanied a progress bar so that visualization is constant.

Task Flow: Adding a new Pocket

Adding a new Pocket is one of the first tasks a user will come across. Users have the option to include a deadline for their goal to have more specificity (SMART goals, anyone?)and to prioritize the new Pocket by making it the Main Pocket.

For each task flow, I brought the screens into ProtoPie, allowing me to think about another layer of the interaction.

Task Flow: Transferring money

Another crucial task is transferring money from the Spendings account into a Pocket.

As the user inputs the amount to transfer in, they see the progress bar expand, giving them a preview of how much closer they would get to their goal. Then once they complete their transfer, a celebratory modal pops up.

Both these interactions offer instant positive feedback loops for the user to motivate them to keep saving.

Onboarding

The target users are underage, so they would need their parents to sign up as well to connect a bank account and to access other features, like transferring money into their child’s account.

Because the onboarding process was a bit tricky, I zoomed out to picture how it would unfold before designing the screens.

Onboarding flow diagram
A diagram to showing what would happen if either the parent or child initiates the sign-up

Task flow: Sign up

Limiting the scope of this project, I continued to focus only on the children’s perspective of the app.

It was important to make this early interaction bright but approachable. I used casual language and took advantage of white space in less form-heavy screens to bring delight through illustrations.

I also added a gliding animation each time the user goes to the next screen to give a nice feeling of progression.

The design system

As I redesigned the app’s UI, I created an organized system of components in Figma. Deciding on the type ramp, color system, and UI patterns early on was so helpful in keeping everything consistent and streamlining the design process.

Pocket Design System Components
Snippets of the Pocket design system

I kept majority of the app stripped down to essentials to make one element shine: the Pocket card.

Pocket cards appear as lists, either in the “In Progress” tab or the “Achieved” tab. The user can tap on these cards to navigate into a Pocket’s detail page.

I used the cards as an opportunity for customization. Whether the user chooses one of the colorful illustrations the app provides or uploads their own image, the cover image gives additional specificity to the Pocket and allows the user to easily scan through the card list.

Pocket Design System Components

Takeaways

It allowed me to focus on higher level aspects as I designed the user flows.

I still kept my system flexible, tweaking a component when it wasn’t working in an interaction. Shoutout to the components in Figma for keeping everything connected!

Going through the flows on my phone like how a user would see it uncovered issues in the interaction that would have been less apparent if I was just looking through them by panning across Frames in Figma.

More projects