Overview

Timeline

Nov 2020 - Jan 2021 (12 weeks)

My Role

Product Designer

Context

Conceptual project

Background

Many Millenials in North America do not have a clear understanding of their finances and lack the motivation to manage them.

Nestegger is a conceptual design project that harnesses the power of gamification and real-life rewards to encourage users to be consistent with their personal finance management.

Nestegger, Finance Mobile App

The Problem

How might we help users gain a clearer understanding of their personal finances?

Clickable prototype with custom illustrations and animation

The Solution

An automatically synced, gamified, intuitive finance management experience with real-life prizes

Process
Nestegger, Finance Mobile App

You can skip ahead to different sections by clicking on the navigation below

Discovery
Nestegger, Finance Mobile App

Data Visualization by Phuong

Secondary Research findings confirmed Millennials in America could manage their finances better

  • “While 70% of millennials have a savings account, 58% have a balance under $5,000.” - Business Insider 

  • “48% of Millennials report that they are living from paycheck to paycheck” - Lexington Law

  • "83% of Millennials find online content useful in making purchasing decisions" - Sharethrough

Nestegger, Finance Mobile App

A Competitive Analysis uncovered an opportunity to better incentivize the use of a personal finance app through Gamification Features.

Additionally, an in-depth heuristic competitive analysis uncovered usability best practices.

Nestegger, Finance Mobile App

5 User Interviews revealed pain points and motivators of millennials in the problem space

To synthesize the findings, I used affinity mapping and empathy mapping techniques which uncovered 3 user types.

Nestegger, Finance Mobile App
Nestegger, Finance Mobile App

From the interview data synthesis, I defined 3 Personas. I decided to ideate a solution for Emma and Dale since Rayna already had a system in place that worked for her.

From these two personas we can summarize their needs into 2 "Jobs To Be Done"

  1. Get a clear understanding of their personal finances quickly

  2. Stay on track with financial goals and expenses in a time-efficient manner

User Stories/Flows

Now that I had defined the problem and the users, I thought about the tasks that my users would want to achieve. I listed out tasks and prioritized them based on user needs expressed in the interviews. See the full task list here

Nestegger, Finance Mobile App

I created user flows to visualize the red routes users would take most often: 1. Adjusting a goal

2. Adding an expense

Design

I sketched out screen ideas keeping the persona's needs and motivators in mind. I ideated flow ideas, layout, and hierarchy in this step.

Nestegger, Finance Mobile App

Since my idea for the gamification of the app was quite novel, I decided to introduce it during the onboarding flow

Nestegger, Finance Mobile App

I made sure to address the need for automatic synchronization of the user's accounts, decreasing the time investment that is our personas' main pain point

Nestegger, Finance Mobile App

A quick round of 5 guerilla usability tests did not uncover any usability issues or points of friction in the red routes

Nestegger, Finance Mobile App

I moved on to create the wireframes in greyscale, I was able to focus on the app layout, organization, and navigation.

It was in this step that I decided to grey out the background when a menu pops up so that the user can concentrate on the menu options. I also added a search feature in the expenses section because the users may want to look at specific items quickly.

Developing a Style Guide to set a cohesive visual language for a brand that exudes fun and friendliness.

Nestegger, Finance Mobile App

The Logo Rationale

The logo is comprised of two egg shapes nestled together. This represents the name “Nestegger” The colors are a gradient of blue for trust, purple for wealth, and pink for cheerfulness/playfulness.

Nestegger, Finance Mobile App

Color Palette

Nestegger uses mainly grey tones throughout the product. Multiple candy-colors convey fun, creativity, friendliness and evoke positive feelings. These colors are applied to important data sets and are outlined in a medium grey to increase accessibility.

Nestegger, Finance Mobile App

I designed custom iconography and illustrations

This icon set is a custom creation, the rounded edges tie in with the fun, friendly theme and compliments the typography.

The imagery for Nestegger are custom illustrations to best match the gamification theme. Happy faces and celebratory gestures are utilized to bring feelings of joy and encouragement. A darker outline for all imagery aligns these images with WCAG AA standards for graphical objects.

Rounded edges, candy colors, and cute faces are the key to the imagery cohesion.

Test

Testing & Iterating Again

Once I had my high fidelity screens, I created a prototype from them and conducted moderated usability testings. This time I included the whole onboarding and add account sequence as well. I focused on observing the first impressions of this novel app idea and uncovering usability issues.

Read the full Usability Test Script HERE

Nestegger, Finance Mobile App

Round 1 Findings & Iterations - Clarified gamification rules

It became clear after the first round of testing the high-fidelity prototype that the egg reward system was unclear. Users liked the rewards but were confused with how it worked and soon forgot the rules after reading them out loud during the onboarding.


I solved these issues by revising the egg system rules. The prizes provided by partnered businesses are also communicated right away so the user knows exactly what the rewards are.

Nestegger, Finance Mobile App

Updated Partner logos

I reiterated the rules in the Nest section of the app. I also redesigned the rewards to include the logo of the partner to more accurately reflect their brand image.


Nestegger, Finance Mobile App

Updated verbiage to increase consistency

Transactions and expenses were used interchangeably. This verbiage discrepancy caused some user confusion. I iterated the design by changing the verbiage from expenses to transactions to maintain consistency throughout the app. 


Nestegger, Finance Mobile App

Round 2 Findings & Iteration - Revised Notification Alerts

Once the fundamental issues were addressed, the second round of usability testing revealed specific UI issues.  

The active section in the bottom navigation bar did not contrast against the inactive ones enough. I fixed this by bolding the font of the active icon

Initially, when a user hits a goal, the celebratory screens were to pop up immediately, however, a user commented that this method would disrupt their workflow. I decided to house this notification in the Alerts section of the app instead, providing the user a stronger sense of control. 

Nestegger, Finance Mobile App

Improved spacing between elements for better legibility

The header was too close to the top of the screen. Data cards and some text were too close as well. The budget donut chart and goals colors should match the colors of the expenses categories. 

I increased the spacing in the header and between the data cards and texts. I also changed the colors of the budget wheel and goals to correspond to the expense categories. I changed the last time synced to a more believable time.


Final Designs
Nestegger, Finance Mobile App

The main Overview page gives users an overall summary of their financial landscape, including how far they are along with their goals and a shortcut button to access common tasks

Nestegger, Finance Mobile App

Iterated Celebratory Screens - confetti added for more delight

A delightful, motivating, and time-saving experience

After testing the high-fidelity prototype, I found that all 10 out of 10 participants were able to navigate and carry out the tasks successfully with little or no difficulty. That means the app navigation made sense to all users. During the usability tests, I observed many users’ reactions to the illustrations and celebratory screens where I designed with delight in mind.

There were many smiles and delighted faces (4 of 5 participants) in reaction to these screens. Some positive comments included:

  • Cute characters make the task of financial management less intimidating

  • Simple and straightforward layout easy to understand and navigate 

  • Badges and rewards are great motivators to achieve goals  

Check out the revised Prototype HERE

Nestegger, Finance Mobile App

For users who prefer to use their desktops, Nestegger also provides an in-browser experience to cater to their needs.

Conclusion
Nestegger, Finance Mobile App

Lessons Learned

  • Humans are forgetful creatures. The message, in this case, reward system rules,  needs to be clear, concise and repeated throughout the app

  • Testing your ideas throughout the process is crucial in improving the design

  • Knowing what questions to ask to prompt deep insight is equally important

  • The more specific about which part of the app you are testing and what result you are looking to achieve, the more informed and focused your solution will be

What's Next for Nestegger

The next challenge for Nestegger would be to conduct further usability tests to determine if the gamification features are motivating enough to change user habits and encourage consistency in usage over an extended period of time

Check out the prototype [HERE]