21st Century Mr. Piggy

Image for post
Image for post
Image Source

“Ping, clank, ping” — the familiar clashing sounds of metal and ceramic echoes in a child’s room. If you listen carefully you’ll hear a swish as folded paper is pushed down a small 2 inch slit right before it makes a small “thud” sound as it hits the bottom of the ceramic object shaped like a plump pig. A curious child picks it up and shakes it with vigor — the result, a musical clash of ping, clank, ping and swish just before a loud thud and shattered pieces spread across the wooden floor — rest in pieces Mr. Pig.

During week 2 of my UX course, we were learning about design thinking and one of the exercises was to quickly prototype an ATM for children. To start this process I needed to understand a few things starting with what an ATM is…

A Short History

Image for post
Image for post
De La Rue machine used by Barclay that used checks or vouchers instead of cards

Before diving into my sketches and thought process, let’s talk about what an ATM is. Many of us recognize the 3 letter acronym as an fast and convenient way to make a financial transaction (i.e. withdraw/deposit money) without having to deal with a human teller. Plus it operates 24 hours — perfect for those late night outings. But did you know that the ATM paved a way for digital banking technology and marked the change for retail banking? During the time of its first introduction into society in the late 1960’s, the population was quickly adapting to the changing times and became comfortable with the idea of self-service. By the 1970’s, dozens of U.S. banks started to adopt these ATMs to their businesses — enhancing their customers’ experience. Though not as advanced as today’s ATMs where now you can access your banking account through cardless NFCs (near-field communication), ATMs at the time used paper vouchers printed with radioactive ink that could be read by machines. Needless to say, we came a long way since the 1960s and never stopped innovating.

Empathize

Growing up I loved going to the bank with my parents, for the free lollipops of course! But also because it was a very “grown up” thing to do. Whenever they used the ATM I was allowed to put their card into its special slot right and sometimes press the grey buttons on the side of the screen. As a child I was amazed by this magical machine that was able to spit out cash in a matter of seconds. To me it was a upgraded piggy bank that I couldn’t wait to use.

Who

For this project, we were asked to design an ATM for children. By definition, a child is any persons under the age of 18. However, based on the prompt and for the purpose of this exercise I am assuming that the target age group is between 5 to 12 years old as high schoolers are able to open a joint high school account with their parents (I did!).

How and why would a child use an ATM?

Children around the age of 5–12 years may have savings of their own from allowances, birthdays, and gifts tucked away in a piggy bank. Speaking from experience as a former child — it was difficult to remember how much money I saved in my piggy bank especially when I would put money in (deposit) or took money out (withdraw) for snacks and other little knick-knacks. So every time I would deposit or withdraw from my piggy bank, or if I wanted to know how much more I needed to save to get to X amount I would have to empty the bank and count. That was until I finally jot down the numbers on a piece of paper for every “transaction” I made with Mr. Piggy. Similar to the traditional piggy bank, an ATM for children would help them see the trend in their financial changes and teach them about financial responsibilities.

Image for post
Image for post
Image Source

What are the possibilities or features a child may need for using an ATM? Is there an educational aspect at play?

When designing an ATM for children, we must take into account of a few factors including: vocabulary of the program, visuals, and height of the physical machine.

  • ATM height must be adjustable and easily accessible to the child (either adjusting screen or addition of a stepping stool)
  • Colorful buttons and icons that mimic the action to be taken
  • Guided interaction through audio and on screen prompts
  • Simple interface (must keep in mind, a child’s attention span — if prompts are too long, they may give up and get frustrated)
  • View their balance and keep track of money saved/spent
  • NFC card attached to a lanyard (children may forget to take their card out of the slot after the transaction, with an NFC card they can just tap to access their account)
  • They can use their birthdate or birth year as a easy to remember pin number
  • Set a “goal” amount — create a reward system (determined by parent) when the child saved X amount (example: when $25 is saved, the parent can deposit $1 to account — aka “interest”)
  • Use easy to read words for children to understand (such as “take out money” for withdraw and “put money in” for deposit) while using common icons for intended action.

By including these features a child can learn to manage their own money, the importance of saving, setting goals, and the added bonus of mathematics and vocabulary.

Define

On a high level, how should it look? What functionalities should it include?

Having been around a lot of nieces and nephews around the ages of 5–12 years old, the biggest “draw factor” with them were items with big buttons, clear and colorful visuals, and a fun character (remember Clipit “Clippy” from Microsoft Word?).

For this project, my mascot will be Mr. Piggy with a top hat and a mustache — teaching children about banking, along with:

  • Adjustable touch screen with voice walkthrough and/or stepping stool
  • Simple UI — less is text, more graphics
  • NFC card as an alternative to inserting card into slot
  • 4 digit pin number
  • 10 keypad with back, enter, and cancel button
  • Cash and coin slot for deposits, cash slot for withdrawal

Ideate

Quickly drawing the Mr. Piggy ATM I came up with two versions. Both are fairly similar to each other, the key differences were the placements of the buttons, the slots, and availability of a stepping stool. I wanted the touch screen to be big enough for the child to see and navigate. After sketching the first version I decided to make the panel less cluttered by changing the location of the cash in and out slot. This change would allow the child to have easier access in making deposits or withdrawals.

Image for post
Image for post
Mr. Piggy ATM — version 1
Image for post
Image for post
Mr. Piggy ATM — version 2
Image for post
Image for post
Quick sketch of the flow of the interface

Prototype

Though I am okay with sketching, it was difficult to drag sketches around even on an iPad Pro and Procreate — so I was more than happy to open up Sketch and create a few artboards.

Image for post
Image for post
Prototype on Sketch

My goal for this prototyping was to keep the UI as simple as possible while making the banking process fun. I also wanted to familiarize the user with banking terms such as “deposit,” “withdraw,” and “balance,” as they will be using them in the long run. I decided to add two extra screens that were not initially on my sketches: one “You are taking out $X. What is it for?” and “You’ve reached X$ of your goal!” I decided on adding the first one to teach user to stop and think what they’re taking their money out for — and not to take out money for the sake of taking it out. The second screen — percentage goal met, was to encourage the user to keep saving up to meet their goals.

Overall, this was a fun process — especially to see how I ended up adding more features to my prototype that was not initially sketched out and some other features that I decided to opt out.

Testing

Ideally, the next phase would to test out my UI with children ranging from ages 5 to 12. Although I’ve tried to keep my UI as simple as possible — some parts may still be confusing to a child or some features may not be necessary.

Written by

I combine creativity, technology, and user-centric thinking to create impactful experiences for people. Portfolio: https://www.melissanguyen.design/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store