Kara McCroskey
Creating a mobile app teaching teens financial literacy and responsibility for AWSM Bank
My Role: Designer (research included)
​
Context & The Problem
AWSM Bank is an app that teaches teens financial literacy and responsibility by providing them with a checking account (funded by the parent), savings account, spending statements, and a credit score. At the time that I collaborated with the developers of AWSM Bank, they had not yet launched. Prior to my work, they had conducted gorilla testing on an interactive prototype they had created in python. The prototype had been poorly received, as people didn't understand how to use the prototype, or the overall purpose of the app. In the eight weeks I spent working for AWSM, I was responsible for competitive analysis, generative research, providing actionable insights, prototype design, and usability testing for the stakeholders.
.png)
1. Discovery
I met with my client to understand the requirements of the product. My clients had some specific requirements for the child user:
1. child/teen can earn by completing jobs (or chores)
2. child/teen can earn by watching short educational videos (produced by AWSM) on the app
3. child/teen can earn by saving money
4. child/teen can earn by maintaining a good credit score
5. parent can add funds to child's account
6. parent can assign chores
While my clients wanted these specific features, they were unsure what else the market might want or expect in a teen's banking app (for either the teen user or parent user), thus were challenged with identifying the basic requirements for MVP 1. To help with this challenge, I conducted a competitive analysis, reviewing existing apps in the space, to better understand what competitors considered to be critical tasks.
2. Define
Having completed competitive analysis I defined the main tasks for each user type: parent and child. I created user flows for each user type to help me visualize what the navigation would look like.
.png)
3. Ideation
I then went to work on low-fi wireframes. Below is a snapshot of part of the parent's registration flow I designed for a low-fi prototype.
4. Validate
Initially, I had included the functionality of adding a child and setting up his card in the parent user's initial registration and account set up. However, during testing, I found that it seemed like a lot to do for participants, so I removed the flow from the initial account set up, and placed a prompt to do it after log in, as part of onboarding. I also added a progress bar for the short flow.
Based on feedback received, I also iterated on the parent's view of child's earnings. I received feedback that the list of chores felt long, so I added a filter. I also received feedback that it was unclear how much progress the child had made in his chores so I added a progress bar to reflect money earned for the week, and money still to be earned for the week. (pictured first)
Additionally, I moved the CTAs from immediately following the fields to consistently staying at the bottom of the screen. (pictured next)
Before
After
.png)
Before
After
5. UI / Style Guide
Since this is a kids' banking app I wanted to use fun and bright colors, that were still sophisticated enough to suit finance. The follow group of colors was taken from a website called Colorhunt, which creates color palettes that meet accessibility standards.
6. Hi Fi
Finally, I created my final designs. Below are a few selected flows from my final deliverable.
Parent registration flow
.png)
Parent Add a job flow
.png)
Child's Add a Savings Goal flow (Note: my stakeholders had read that visualizing a goal helps one to achieve it; they wanted to implement this psychology in the app.)
.png)
Final Thoughts
For reasons unknown to me, the developers of AWSM did not ultimately launch this product. Had I remained on the project, I would have liked to develop the child's banking UI (home screen) more, so as to more closely align to banking and/or credit card apps today (e.g.: adding a credit score, graph of spending, etc.)