JamJar
For when you’re in a jam
Paired with a Financial institution for our academic capstone project, my team and I were tasked with developing an emergency savings solution for gig economy workers. As gig workers typically have inconsistent cash flow, we aimed to create an emergency savings solution that is customized to their financial inconsistency, allowing them to not only find delight in saving, but also celebrate the little wins.
My Role
Researcher, Facilitator, Reporter, Lead Designer
My Team
Brontë Beggs, Mathea Mo, Nicholas Sarrouh
Process
Competitive Analysis, User Interviews & Surveys, Research Synthesis, Ideation, Wireframe, Prototype, User Testing, Iteration
Tools
Mural, Trello, Whimsical, Figma
Empathy Maps, Personas, User Flows, Crazy 8’s, Product 4 Corners, Usertesting.com, MoSCoW
Timeline
13 Weeks
DISCOVER
Competitive Analysis & Market Research
Diving a little deeper on what the market offers in terms of savings solutions, we found that each platform or app specialized in one saving method only and none were targeted for gig workers. So, off the bat, we knew we needed to create something a little more customized.
User Research & Fieldwork
To better understand the needs of our users, we identified three demographics that would provide us with the most insights, as well as decided on user interviews and surveys to collect our data.
Gig Economy Workers
As our primary users, we recruited and surveyed gig economy workers. We aimed to uncover their financial experience, learning about their financial challenges, how their emergency fund savings are affected, and what their banking and savings patterns are like to better address the gig economy worker’s pain points.
Design Researchers
We connected with and interviewed design researchers who had collected data within this space. We aimed to gain a better understanding of the research they conducted, what challenges they found, and the insights they gained.
Financial Professionals
We recruited and interviewed local financial professionals and advisors to better understand various financial areas (mortgage, loans, lines of credit, etc.) and what current advice that financial professionals are offering, especially to gig economy workers.
Research Findings
What we learned from our Gig Economy Workers…
Similarities
Deprivation and self-restraint is the main savings behaviour, which leads to negative associations with financial savings.
They are familiar with what emergency funds, but they want more support in saving for one.
They need a product that is easily accessible on-the-go.
They experience difficult onboarding processes and lack customization options with savings products.
Differences
The savings strategies they implement.
What they consider an emergency, though they acknowledge that it’s difficult to know what is an emergency until it actually happens.
The savings products and solutions that use.
What we learned from our Design Researchers & Financial Professionals…
Education
From our interviews, a common theme that appeared was education - mainly a lack of. Education will need to some role, but it needs to be seamlessly integrated in the design.
Assumptions
Nothing should be assumed. We can't assume that all gig workers have the same financial and savings experience, as well as what the definition of an emergency is. Both are situational.
Variety
There are a variety of financial situations which require a variety of solutions. Providing users with various choices gives them control over their finances.
Flexibility
Since each gig worker’s experience is difference, the financial savings solution must be flexible and customizable to suit each individual's needs.
DEFINE
People Problem
How might we create a customized and delightful emergency savings fund that works for a variety of gig economy workers?
User Story
As a gig economy worker, I want to easily save for an emergency, so I don’t have to deprive myself of the things I enjoy.
Personas
We developed two personas to guide us in our design, identifying Ivy Harris as our primary user.
DEVELOP
Crazy 8’s & Features
Completing our individual Crazy 8’s grid, we all highlighted the important of data visualizations and making the financial journey accessible and delightful.
We then brainstormed features we wanted to built into the product and prioritized them from ‘must have’ to ‘nice to have’. The must have list was later condensed further to fit within our project scope and timelines.
The features we identified as must-haves were accessibility of the solution on-the-go, easy to understand language and terminology, visualization of milestones, and celebration of achievements.
User Flows & Wireframes
To best showcase our solution and its features, we decided to develop new user and returning user flows, and low-fi wireframes.
User Flow | Version 1
Low-Fi Wireframe
Iterating on the first version of our user flow and keeping our scope and timelines in mind, we finetuned our user flow to prioritize the sign up process and goal setting for the new user, and the homepage and milestones process for the returning user.
User Flow | Version 2, High Level
Mid-Fi Wireframes Snapshot
User Testing & Iterations
DECIDE Framework to plan for user-testing
User-Testing Round 1
Our testers shared that:
They had difficulty understanding the financial terms when choosing a saving method
The data visualizations needed more context
Navigating between the milestone screens was unclear and confusing
The function to spend their funds is restricting
On the flipside, they did share that they enjoyed the simplicity and clean design of the product. They would agree that it’s engaging and interactive, though it would still require some interaction refinement.
Overall, we did collect a lot of feedback for iterations, but our product did not require a complete overhaul.
ITERATION: APP OVERVIEW CLARITY
Feedback
Misunderstanding of the overview; testers believed they were already signed up even though they were only viewing the app overview
Horizontal scrolling to view additional overview content was unclear
Changes
Make the overview full-screen
Clarify "try before you buy" intent with simple messaging
Use illustrations or icons instead of screenshots of app screens for added clarity
Add arrow icons to clarify horizontal navigation
Separate sign-up process into more screens
ITERATION: TERMINOLOGY & DEFINITIONS
Feedback
Many testers were confused by the terms used
Saving method definitions and additional information was often overlooked
Many testers were unaware to the fact that there were more saving methods to choose from
Changes
Improve content spacing to better highlight definitions
Simplify content and use layman’s terms
Use text size and color to highlight important information
Add scroll bar to hint at more context
ITERATION: SPEND FUNDS FUNCTION
Feedback
Testers were unclear as to what ‘account’ referred to - their bank account? The app account?
Testers couldn’t see the ‘use funds in store’ button below
They felt that the app was pressuring them to transfer funds to their account and it made them uncomfortable
Changes
Clearly offer the two options available to spend the funds
Use same colouring and design to show equal emphasis for both options
Add additional screens for each ‘Spend’ option to increase user-friendliness
ITERATION: MILESTONE SCREENS
Feedback
Users thought the milestones were an engaging feature
Users had a difficult time navigating the pages (didn't recognize horizontal scroll)
They wanted more details & clarity
Some testers thought the ‘Milestone Overview’ was a little bare
Changes
Use colour to indicate milestone status
Replace horizontal scrolls with tabbed menu
Categorize milestones (e.g., account set up, milestone 1, milestone 2)
Add relevant info on the ‘Milestone Overview’ page
User-Testing Round 2
This round of user testing allowed us to confirm if our iterations improved the user experience of our product.
Overall, our testers reacted very well to our changes. They enjoyed the clean design, how easy and intuitive it was to use, and how the financial terms were clearly defined and easy to understand.
The best part was how our testers were delighted by the celebratory aspect of our product; they felt accomplished when achieving their financial milestones and saving money felt like a delightful and enjoyable activity.
MoSCoW framework to evaluate priority of changes based on user-testing feedback
Branding
The Name
In our aim to transform the experience of saving money from being depressing and deprivation-driven to a delightful and celebratory activity, we decided to take a more playful and cheeky approach with our branding, starting with our product’s name: Jam Jar!
Jam Jar encompasses the different aspects of savings and emergencies: from the double meaning of ‘jam’ as both the sweet treat and an emergency/challenge, to saving money in a literal jar (sometimes an actual jam jar), to ‘breaking glass in case of emergency’.
What Jam Jar represents
Creativity • Fun • Calmness • Power
Celebration • Simplicity • Independence
Ambition • Dignity • Magic
The Colours
Considering what Jam Jar represents, we decided to go with a monochromatic Purple branding. The colour purple stands for luxury, power, wealth, and wisdom. The purple also stands out against all the greens and blues of most financial product currently in the market.
The Final Look
Armed with name, brand identity, and brand colours, I created a logo that encompasses it all.
For when you’re in a jam!
Product Features
Custom & Flexible Saving Methods
Jam Jar will recommend the saving method that best matches their emergency fund goal and target date. Users will always have the option to choose a different saving method.
Simple & Accessible Emergency Fund Management
Jam Jar takes care of managing and transferring money to users’ emergency funds. Users can quickly and easily assess their savings performance, top-up their fund, and spend their savings in case of emergencies.
Fun & Celebratory Savings Journey
Jam Jar divides the emergency fund goal into achievable and attainable milestones to encourage feelings of accomplishment and celebration with each saving milestone completed.
Try it yourself!
For optimal viewing experience, click the full screen icon in the top right corner > click “Options” in the top right corner > “Fit - Scale Down to Fit”.
New User Prototype
Test Script
Task 1: In this test, you are going to be going through some early prototypes, so not all interactions may be active. Click anywhere on the Jam Jar green* screen to get started.
Task 2: You’re a gig worker who is looking to save for an emergency fund. You’ve downloaded this new app that says it can help you do just that and just launched it for the first time.
Your saving goal amount is $1500 - 2000 and you want to save it by May 1, 2022.
Now explore what you see, sign-up, and create a new account to get started on the app.
Task 3: Amazing! You’ve just signed-up and set up your emergency fund account. Now get to know the app a bit more by completing the walkthrough.
Returning User Prototype
Test Script
Task 1: You have now been using the app for a few months and want to revisit the app to check your progress. Login and check your emergency fund progress.
Task 2: You now want to see how well you are doing to achieve your goal this month. Go to ‘My Emergency Fund’ to check your savings forecast.
Task 3: Oh! You realized you have some extra money that you would like to put into your emergency fund. Please top up your account with the extra money you have.
Task 4: CONGRATS! With that top up, you’ve just completed another milestone! Amazing! While still in the top up page, go check out the milestone you completed and then view what your next milestone is.
Task 5: Uh-oh! You just had an emergency and need to use some of your emergency funds. Choose an option that best suits your needs.
Final Thoughts
I was excited (and a little anxious, not going to lie) to work on this capstone because it gave me and my team a chance to develop a project from start to finish - speaking to users, understanding their needs, designing a solution that addresses those needs, and then testing and iterating.
The testing phase itself was a huge learning experience. It really drove home the fact that not all instructions are obvious; that people think and process information differently. Through that, we learned that not only are we iterating the product, but we’re also iterating the user tests to get the most accurate data.
Another learning experience? Working in a team! It was a true test in communication and time management. Since four people were working on the same project and file in some cases, we really invested the time to create processes and scheduled goals to ensure that we were achieving our milestone target.
Overall is was an eye-opening, insightful, overwhelming, stressful, amazing, exciting, and fun project to work on and I’m very much proud of Jam Jar and my team.