Oink

Published on 22 April 2023
6 min read
UI Design
UX Design
Oink
If you want a bite-sized summary, check out this video

Context

Oink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… in the air, in a sense that you cannot really touch it; the money you have is just numbers on the screen.

It may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.

Overview and Background

Primary Research

After our initial research, we came to realize this problem from the two observations

  1. Financial experimenting during childhood is important
  2. The financial literacy in Korea is low (and I believe it can also be said for the most part of the world)
Claims supporting our two observations

Surveys & Interview

After we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.

Claims supporting our two observations

The result is them compiled and analyze into more digestible presentation.

Claims supporting our two observations

We found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of convenience (which, i know, is obvious but we like to make sure).

The interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.

Problem

The problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can see, reduced to just a numerical representation on a screen.

In order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.

Claims supporting our two observations

Another problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.

Claims supporting our two observations

And that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”

Target User

So, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be

  • Kids
    Alpha Generation
    The biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.

  • Parents
    MZ Generation
    Generation MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.

Claims supporting our two observations

Goals

We set some goals and objective for each goal so we have a common understanding among members and other stakeholders.

  1. create a seamless transition from physical to digital money
    to achieve this we need to
    • Help them understand the value of digital money
    • Visualize digital money
    • Simulate the physical manipulation of digital money
  2. Form good money management habits
    to encourage good habits we need to
    • Make savings appealing
    • Foster thoughtful spending and saving
  3. Encourage conversations about money between kids and parents
    • Provide talking topic and common place to talk

Ideation

Ok. Now we have our goals and objectives, let’s think about how to achieve them.

To better formulate and shape the solution, we tried to draw inspiration from the problems.

With the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:

  1. Earning
  2. Spending
  3. Savings
Claims supporting our two observations

Then we create an affinity diagram of the painpoints.

Claims supporting our two observations

The recurring theme found in the post-its are that digital money sometimes are too abstract. So, after some weeks of researching, we came upon a promising solution; “Tangible User Interface”.

Claims supporting our two observations

The initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)

Claims supporting our two observations Claims supporting our two observations
Claims supporting our two observations

Which is cute but it didn’t fully answers all of our goals. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.

What if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?

Design

With that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.

Claims supporting our two observations Claims supporting our two observations

Then we started to design and iterate through the interface. This is how one iteration looks like.

Claims supporting our two observations

After each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process

because we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.

Claims supporting our two observations

Final Product

And after a month of iterations discussion, out of our blood, sweat, and tears came

Oink!
:D

It might be better for your experience if you see this video before we dive into the product.

Home Page

Claims supporting our two observations

Wallet
Filled with draggable bills and coins representing the amount the child currently has in their bank account

Drop shadows on the bills and coins make use of the existing mental model that the objects are draggable

Claims supporting our two observations

Bottom Navigation
Swipe left or right to navigate between components and click to view details

Wallet

Interaction with Bills and Coins
Bills and coins in the wallet can be interacted with in several ways

Combining Bills or Coins
Long press and drag bills or coins together to combine into a larger bill or coin

Claims supporting our two observations

Dividing Bills or Coins
Long press a bill or coin to break it down into smaller bills

Claims supporting our two observations

Impacts

What I learned

What I wish were more explored