Cake

Context

• Challenge: design a budgeting app for kids.

• 3-day sprint

• Epicodus assignment, based on a Google Design Challenge

• Emphasis on UX process, NOT on polished finished product.

Process

I followed a 5-phase design process:

• Understand

• Define

• Ideate

• Prototype

• Test

1. Understand

To begin, I got curious about business goals.

These are the questions I drafted for stakeholders:

• What are the business (or other) goals for the app? Is this the company's main product? Is it a side product to promote the brand? Is profit paramount? Is it purely philanthropic?

• What is the business model? Are we selling the app in the app store? Is it a freemium model with paid add-ons or upgrades? Could it be subsidized with 3rd party promotions? Will the app include advertising?

• What is our target age group(s)? Other demographic specifications? Rich parents are more likely to teach their kids about budgeting (and maybe therefore more likely to buy or download the app) but maybe the point of this app is to level the playing field and teach less advantaged kids about financial responsibility?

• Does the company have any preference on what platform / screen size this app should be designed for?

• As a parent myself, I am pretty confident that any app that involves children and money is likely going to have high parent involvement. Is it okay to design with both types of user (parent and child) in mind?

  
  
  

Next, I drafted and disseminated a survey to gauge the relevant attitudes, habits, and technology usage of parents and their children.

While I waited for the data to come in, I devoured literature on the subject of designing for kids, most notably Gelman’s Design For Kids, and conducted a competitive review of the most robust, child-centric financial apps or websites I could find (ING Direct’s now-defunct Planet Orange game and themint.org) and two for grown-ups (Mint and YNAB).

2. Define

In the absence of a real client, I imagined some plausible constraints:

This app was commissioned by a financial institution that wants to bring added value to their customers who are parents. Additionally, they hope to develop brand loyalty among both parents and children, promoting future customer growth. The product does not need to be profitable on its own but the stakeholders are potentially open to partnering with consumer organizations, so long as it adds to and does not detract from the user experience.

Then, based on the collected survey data, I defined the target users broadly as 4-10 year olds and their middle-class parents, with primary focus on the 8-10 year old range. It ought to appeal to a 10 year old but be usable enough that a four year old can use it with parental help.

The survey also revealed that a majority of parents feel their own budgeting is inadequate, so they will likely need tips and support.

Because 8-10 year olds like to be experts, the original iteration will try using technical terms like ‘audit,’ ‘credit,’ and ‘debit,’ with supplementary explanations (like pop-up definitions). Similarly, the app will not be overly ‘dumbed down’ but the UI and UI text will be simpler for younger kids.

With target demographics loosely defined, I then created some tentative personas to infuse empathy into the Brainstorm and Iterate phases.

Since tablets were the device most commonly accessed by children, the first iterations will focus on that platform.

Lastly, success would be measured by how long users continue to use the app. As a modest, arbitrary target, I would hope that after one year: 20% of downloaders are still using the app and 10% of kids have reached a savings goal.

3. Ideate

The great thing about this design process, is that by the time you’ve gotten to the brainstorm phase, you’re already steeped in the constraints and possibilities. My creativity was ready to run! And one big idea was already emerging.

The Big Idea:

Kids are impatient and impulsive. 
Making a budget, keeping a budget, and saving money all require patience and self-control. 

Kids want instant gratification. 
Budgeting asks you to delay gratification.

What if there were a way to build your child’s restraint with money by giving them fun right now?
What if they could have their ¢ake and eat it, too?

How it works:

Every week your child will have a check-in to see how much money they have saved. (If they’ve connected a savings account, the audit will be automatic. If not, a parent will act as auditor.)

If a child has, say, $50, they’ll also be given 50 virtual dollars (called Sprinkles) to use in Cake’s virtual marketplace / game center. They get to spend what they save! Without actually spending any real money! Who says you can’t have your cake and eat it too?!

What’s in the Marketplace? All kinds of things. They can buy digital accessories to glam up their profile pic, or open up new levels in one of Cake’s many games. That’s right, Cake isn’t just a budgeting app. It’s a collection of puzzles and games that your child can play any time they want in between audits, using their sprinkles, which get refreshed (based on their balance) at each weekly audit.

4. Prototype

Because I went in depth into the early stages of the design process during this 3-day design sprint, I had to prioritize what to prototype. I chose to focus on the interaction I believe is absolutely critical to the success of the app: the ability of older children (8 - 10) to update their balance in the app. If this doesn’t work well, people won’t use the app (at least not for what it’s intended).

InVision Prototype

I focused on making the interactions very simple, but also presented a table and graph that some kids admittedly might find confusing. According to my research on 8 - 10 year olds, they like to be experts and they definitely don’t want to feel like they’re being treated like babies. Thus, the charts. In hindsight, this may have been a misstep (see the Reflection section below for more).

To click through a very rough, low-fidelity prototype of this user flow, starting at the homepage / dashboard, go here.

I think it’s important to stay low-fidelity at this point or the feedback you receive will tend to revolve around the aesthetic decisions. Not only that but you will end up investing a lot of time in a polished UI that will likely need to be drastically overhauled.

5. Test

Instructions

For each of the usability testers, after assuring them that I was not testing them but was testing the app, I gave each the same instructions:

“This is an app that helps you keep track of your money. Pretend that you’ve told the app that you want to save up for horseback riding lessons. You’ve just received $20 (in real life) and you want to tell the app that you have $20 more. I’ll watch you and it would really help me if you would talk out loud about what you are doing and thinking, what you are expecting to happen, and anything you find confusing.”

There was only a minor adjustment in that monologue for my first user because she was an adult going through a child’s user flow. I told her to imagine she was trying out the app to make sure she could help her child. The results from the first three usability tests are as follows:

Shannon, Mother, 39

Shannon had no trouble navigating the user flow but did help me spot several details that were not quite right. I addressed most these UI issues before testing with the children (although the text on the table remained small).

Magnolia, 4th Grade, 9 Years Old

Magnolia is a good reader and mathematician and loves learning. As such, she was giddy using the app! And the app proved to have just the right level of complexity, as she had no trouble carrying out the instructions and was excited and engaged the whole time. After completing the task, I told her she could explore the app and she immediately went to Caketown to check out the games (which were sadly not there yet).

Kaleia, 3rd Grade, 8 Years Old

Kaleia had a lot of difficulty completing the task as given. It seems she did not comprehend the word “Update” or link it to the task of adding money. When she finally navigated to the correct page, it was one of the only options left. When she was on the Target page, she struggled reading the table because of its size, and she had difficulty decoding what it might mean or what it was there for.

I have not yet made any major adjustments based on Kaleia’s experience, since her difficulties require more thought. I will start by changing the nomenclature of the Update button and possibly brainstorming an alternate icon. I will also think about making the default view of the Target page less complex (hide the table, probably) while still making it accessible to kids who want to see it.

Reflection

I made some mistakes. But this is what iteration and early testing are for. Fail forward and gain insights quickly.

Some mistakes / shortcomings:

• -I think I misapplied the insight that 8-10 year olds like to be the expert and not be talked down to. While I took this as encouragement to include a few sophisticated elements—the graph and chart—I didn’t account for the fact that, for those kids who don’t already understand such infographics, the experience could undermine that feeling of expertise. I would address this mistake by brainstorming strategies to bring all users up to speed, perhaps through the use of a participatory onboarding tutorial or through game play. Or perhaps removing the graph and chart altogether or making them less prominent.

• The landing page / home page suffers from a lack of hierarchy. First time users should be directed to set a goal. Return users should be encouraged to add or subtract money first. “Settings” and “User” should be less prominent.

Overall, especially given the time and resource constraints, I am extremely proud of my process and my solution to a very difficult problem: help kids form a good habit. This project won me the award for Best Design Thinking and UX Process at Epicodus.