Henry Thomas McNally
Henry Thomas McNally


We created an easy to use and enjoyable Personal Savings Calculator based on boardgames to engage and entertain while educating the user



CentSai Is a financial literacy website that helps its users mainly Millennials and Generation X navigate the myriad financial decisions they’ll need to make in life. From buying their first home, to determine what type of insurance they need, to negotiate a better salary, CentSai brings direct, actionable, and relatable advice via first-hand accounts.

The Brief

This project focuses on developing a creative, compelling, ‘gamified’ UI/UX for traditional financial calculators. Based on user research, we hoped to transform their use into enjoyable experiences that will encourage consumers who aren’t comfortable with personal finance to ‘jump into the pool’ by using the spirit of the quizzes, games, videos and creative content found in CentSai’s library.

Our goal was to engage users and invite them to use our calculator by reducing financial jargon while still arriving at the same destination as the traditional model.

We wanted  to provide a functionally pragmatic and relatively easy-to-use prototype that developers can then use to build a production-ready version.




The Team: Henry Thomas McNally JayShin Mike Shin

My Role: User Interviews,User Flows, Usability Testing, High-Fidelity wireframes, Prototype & presentation design


Product Design

We created an easy to use and enjoyable Personal Savings Calculator based on boardgames to engage and entertain while educating the user



People find financial planning to be confusing, daunting, intimidating, boring, overly complex. How might we make it quick & easy to learn, fun, illuminating, shareable and meet their goals?


User Research

We created two screeners to find participants for our interviews: one for existing users of Centsai and one for prospective users.  We interviewed twenty-six participants, ensuring a 50–50 gender split among interviewees. We considered this important given that 50% of CentSai Users are women.

Our interview questions were extremely broad: we asked about financial literacy, genres of entertainment individuals learning styles and feelings on financial planning.

I also conducted market research of companies within the personal finance sector, such as the Clarity and Albert apps, which help users save for large purchases and/or events such as weddings or vacations. I looked at two major banking institutions, USAA and Chase, which also include personal savings calculators on their websites. Using this information I created two competitive/comparative analysis charts: one based on competing and comparative firms and the other for the most popular personal finance calculators available on the internet.


Through our research we found the common goals, pain-points and opportunities people experienced in saving for large purchases, vacations and/or events.




  • People consider financial literacy & planning important but not easily entered into.

  • The jargon associated with financial calculators creates a barrier of entry to their use.

  • People want to be entertained while they learn.


  • “Personal Finance is essential for people to understand.”

  • “Finance can become too complex with the terms and conditions I don’t fully understand.”

  • “I have had 2 advisors in the past and both have been helpful and led me in the right direction leading me to better decisions than what I would have done alone.”

Persona & User Journey

We created our persona, Sam, using the insights we garnered from an affinity mapping session. I decided Sam would be focused on saving for vacation because that was a common goal for nearly all the interviewees

Vacation Persona.png
A major painpoint for our user is the inaccessibility of financial terms and jargon.

A major painpoint for our user is the inaccessibility of financial terms and jargon.


Exploring The Problem Space

With the information from our Persona, User Journey and secondary research taken into account, I refined our hypothesis and developed a problem statement.


Problem Statement:

People find financial planning to be confusing and difficult. This leads people to avoid financial matters or to seek-out professional assistance. How might we give people more control and understanding of their finances with a fun and easy-to-use financial calculator?



Our Design Studio focused on narrowing down the narrative for the calculator, the type of content we would include, and then designing our wireframes from that. We want to create an engaging, fun atmosphere while also being educational. We wanted to improve the user experience of using a financial calculator while also keeping with the CentSai spirit of teaching through storytelling and desire to empower people to build financial security through knowledge.

We defined our success metrics using a HEART Matrix


The Solution


  • Users had a game piece which would follow them along the journey through the game depending on which calculator they chose

  • The calculator is set up in a series of pods that the user uses to input different financial information with a dotted line leading the way along a well defined path.

  • There would be a status bar to show the user which step they were on during their journey through the calculator.

  • The Goal and results for each calculation would be displayed every step of the way to delight and  encourage the user along the way

  • We integrated our calculator into CentSai’s popular “WTF is...?!” series of articles which explained Financial terms in layman’s terms.

Information Architecture & User Flow

We added our Calculator to CentSai’s main navigation menu. The User Flow is very straightforward:

User Flow.png

Mid-fi Wireframes & Usability Testing

With the lo-fi wireframes sketched, we developed two versions of mid-fi wireframes, both in keeping with the board game theme we had decided upon in our Design Studio sessions. We chose to move forward with the circular “pod” idea for the user input fields as opposed to the rectangular version because it felt more like a board game and less like the calculators I came across in my research.

Two rounds of testing with five  participants for each round

  • Testers consisted primarily of Gen X-ers and Millennials.

  • Testers were evenly divided between men and women.

  • Testers had diverse levels of financial literacy.

1st iteration of calculator concept wireframes

1st iteration of calculator concept wireframes

2nd iteration of calculator concept wireframes

2nd iteration of calculator concept wireframes


Usability Findings:

  • 8/10 Found the calculator easy to use  

  • 7/10 Appreciated explanations of financial terms 

  • 10/10 Enjoyed using the calculator


  • “Very Intuitive and easy to use…”

  • “The ‘WTF’ theme made it fun!”

  • “Love that it didn’t feel like a calculator.”

  • “I would like to save my info. For reference.”


High Fidelity Wireframes

After two rounds of usability testing with 10 participants in total, we designed the high-definition prototype keeping on brand with CentSai using complimentary colors from their logo and the established branding to integrate it seamlessly with their existing site.

One change from the mid-fi to the hi-fi wireframes was a change to the expenses ‘input Pod.’ Many users wanted to list their expenses separately and then have them summarized by our calculator as opposed to adding them up on their own.


*Note: Choose Vacation Calculator

2019-04-10 18.51.57.gif

Next Steps:

  • Enhance the interactivity by increasing ways to calculate for goals.

  • Add a collaborative feature to share your savings goals with friends.

  • Create a standalone application with the ability to save the information and results and use offline.