Building Prototypes from Previous Research Insights

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:

OUR TASK

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.

LOAN TOOL

White-Boarding Initial Ideas

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. 

User Testing

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.

PIVOT iN DIRECTION

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.

Final Wires

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.

Final UI

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.

Budget Game Tool

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.

Sketching Initial Ideas

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:

1. Shift to 2-screen version. As a team, we decided to move to a version that would take place on two mobile screens rather than one laptop screen. The idea was that though the parent and child would likely be playing in the same location, two screens would better facilitate the parent entering information without the child seeing it.
2. Rework parental input of costs. We decided to rework the flow of the game so that the parent doesn't have to pre-enter all costs. Instead, The parent will enter each cost before the child guesses.
3. Increase fun in guessing. We aimed to engage the child by making the act of guessing itself more delightful and rewarding.

Secondary Research

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.

Paper Prototypes and Game Testing

Key Findings:

1. Single guess games reduced complexity. Games that introduced ranking created a bottle neck when the parent had to enter multiple items and prices for a category rather than just one (e.g. how much is rent versus listing all the utility costs).
2. Kids care more about winning. It is more important for the guesser (the child) to obtain a sense of victory then the price provider (the parent).
3. Game Mechanics Need Close Care. Details like spinning, selecting, and guessing needed to amplify the sense of fun.

High Level Vision of New Interaction Flow

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. 

Model of New Interaction Flow

This is a model I created in Keynote to explain in more detail the interaction pattern of the game.

Refined Paper Prototypes

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.

Final Wireframes

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.

Final UI

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.

Development and Next Steps

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.