The client’s goal with this project was to build brand loyalty by creating tools that families can use together to engage with the bank.
When I joined the project, the team had completed the first phase of exploratory research investigating what activities could be used to facilitate conversations between parents and their teenage children about money and borrowing. The team had explored five concepts and found two to be most successful:
1. A loan tool that enabled teenagers to receive loans from their parents. The team had previously tested the concept using a spreadsheet designed to simulate values.
2. A game inspired by the price-is-right for family budget items. The team had previously tested the concept with a poster board version of the game.
The team had performed user enactments with these two concepts using a paper prototype for the game and an spreadsheet for the loan tool. The goal going forward was to take these two concepts and create a minimally viable product that could be tested with families in Pittsburgh.
To begin, we discussed what core functionality would need to be included in our prototype. With the core functionality in mind, we sketched wireframes as a team that were later converted into digital wireframes.
We quickly decided that it made sense to stick with a desktop app because of the amount of complicated data a parent and teen would need to sit and input, and viewing the results necessitated the use of a larger screen.
With this restraint in mind we also created our initial project timeline plan with the goal of building the MVP in HTML/CSS, utilizing frameworks like Bootstrap to save time.
After our initial team whiteboard session I began iterating on a set of wireframes I created in Sketch. The thought was to simplify the flow by "stepping" the user through the process rather than presenting them with too much information at once.
The initial wires were tested with CMU freshmen who were still very close in age to the target audience. While obviously these students represented the very high end of how much understanding a teen might have about math, interest, and money, they still gave useful insights around some of our initial labeling, flows, and layout that helped us further clarify the design.
After going through 5 rounds of iteration we received late-breaking feedback that our faculty thought we were over simplifying the product and removing too much core functionality. We needed to go back to sketching, throw out a lot of code, and build a back end that would allow for creation and management of accounts and profiles.
Ultimately we chose to use Django to handle our back end, along with HTML and CSS to style the front end. We had also found an API to handle the charts and were able to salvage some of what we built with that before switching systems.
The final wires I created in Sketch allowed the user the flexibility to create and label items in their budget (or not), along with the ability to create and save a budget profile, create multiple loans, send reminders via SMS or email, and allowed forgiveness of all or part of loans balances. Ultimately this is a tool for parents and teens; it doesn’t matter if they actually use it to make loans, it matters that it helps initiate a conversation about the cost and value of different wants and needs.
I skinned the final UI in Sketch with the thought of not sticking to PNC’s core branding (since this work was done as a stand alone research project anyway) but still conveys some of the spirit of the parent brand. The simplicity, shapes, font and color is meant to be both approachable yet serious enough for the subject matter.
Sparking Moments of Teaching Between Parents and Their Kids
The Budget Game took a different approach to encouraging financial conversations between parents and their kids. The core concept was for kids to guess the cost of various expenses their parents pay on a regular basis (e.g. car payment, mortgage, utilities). Much of the inspiration came from the popular game show "The Price is Right". The idea leveraged the fun and delight of a game for encouraging open discussions about finances and the real situations families were faced with.
Initially, we sketched a flow for the game that closely reflected the paper prototype. We designed the initial game to take place on one screen.
After presenting this flow to the team's advisors, we discussed making several key changes:
Our initial game was a literal interpretation of the initial user enactment, however our advisors thought that for a digital version we should try to draw new inspiration. We chose to go back to the source material, The Price is Right, the ultimate fun price guessing game. Here we looked at video examples, photos, and other apps and games for inspiration around alternate game mechanics.
This is a flow that my teammate and I put together to start to flesh out what would be happening on different screens of an asynchronous game.
This is a model I created in Keynote to explain in more detail the interaction pattern of the game.
Our team chose five mini-game concepts encapsulated in an overall game this minimally viable prototype. We sketched play testable screens for the landing screen and mini-game screens.
My teammate and I created final wireframes using Adobe Illustrator. We mapped out in detail all of the category information as well as the different states and outcomes for games.
I created much of the final branding and UI for the game in the spirit of the original Price is Right game. I began by creating a mood board of inspiration including photos, color palettes, logos, and typography.
Stay tuned! Our team expanded to get more help with development and will be implementing the MVP using Node.js, Sockets.io, HTML and CSS during June. We will be testing the MVP with users in July.