Clickable prototype with custom illustrations and animation
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.
The Problem
How might we help users gain a clearer understanding of their personal finances?
The Solution
An automatically synced, gamified, intuitive finance management experience with real-life prizes
Process
You can skip ahead to different sections by clicking on the navigation below
Discovery
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
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.
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.
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"
Get a clear understanding of their personal finances quickly
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
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.
Since my idea for the gamification of the app was quite novel, I decided to introduce it during the onboarding flow
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
A quick round of 5 guerilla usability tests did not uncover any usability issues or points of friction in the red routes
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.
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.
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.
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
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.
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.
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.
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.
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
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
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
For users who prefer to use their desktops, Nestegger also provides an in-browser experience to cater to their needs.
Conclusion
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]