Save for what you want and break the pig
Overview
Piglet is an app designed to help people save money quickly in preparation for a big purchase or expenditure. It's a project crafted in January 2019 as part of the UI design course from CareerFoundry.
Product Discovery
It's a known fact that doing financial transactions in cash is one of the best ways to regain control over your finances. Electronic transactions don't allow people to suffer the pain of separation, which allows them to think about every expense before making it.
Plastic money has made it easier than ever to spend mindlessly and to save only when there's something left of the month, while it should be the other way around - savings should be the first expense of the month and everything else should be mindfully considered. People are also used to creating debt for making big-one time purchases, while the healthiest way to do them would be to actually save before the purchase is made and then go through with it.
Enters Piglet. Piglet is an application that is geared towards getting control of your financial life again by bringing mindfulness back into the spending process and focusing on cash transactions for the day-to-day.
Exploratory User Research
In order to explore people's current habits on saving money, twelve potential customers, between 18 and 29 years old, were selected for this run. The following questions were asked:
1. Can you show me the savings breakdown for your current month?
2. How did you go about making your last big purchase, such as a car or a trip abroad? How did the financing for it come along?
3. Do you currently have control of your finances? If not, what is blocking you from sanitizing that?
4. What is blocking you from saving more money?
5. How many purchases with electronic means do you make? How intense is the presence of cash in your finances?
6. Why do you currently not use a savings planner?
MAIN RESEARCH FINDINGS
1. YOUNG FOLKS ARE WILLING TO USE MORE CASH
Basically everyone wants to regain control over their expenditures, and most of them fell that electronic payments drive them away from this.
2. SAVING BEFORE PURCHASES IS A MUST
8 out of the 12 interviewees don't want to create debt to purchase, as they've already racked other types of debt before.
Defining Mission and Values
MISSION
Money is a complicated topic, but can be simple. If we treat everything we want as small, medium or big goals, we can achieve anything we want. PIGLET’s mission is to enable futures and dreams, and to allow you to achieve whatever you want, on your terms, on your time.
It’s not necessary to sacrifice everything in the name of a financial goal - PIGLET helps you find out what is necessary to achieve your goal and work towards it.
VALUES
-
PIGLET is simple - define your goals, your timeline and achieve whatever you want.
-
PIGLET is visual - quickly check your goal’s status and see what’s missing.
-
PIGLET is goal-oriented - saving just for saving is no fun. When you have an objective in mind, everything is easier.
-
PIGLET is safe - you can trust that your information is securely encrypted and that your privacy is respected at all times.
The Logo
PRIMARY VERSION
PIGLET’s logo uses the font Dollar Bill Regular, and, with the piggy bank, reminds you of savings and money. The pig is finite - it fits just how much you need to achieve your goal. When the goal has been reached, the pig is broken and your dream is then enabled.
SECONDARY VERSION
PIGLET’s logo can also be used as a compact icon. In this case, the background should be of one of the primary colours, with a 0-2-4 shadow of #000000, 50%, and rounded corners of 7.
Defining the Visual Language
PRIMARY COLOURS
SECONDARY COLOURS
PIGLET’s primary colours are pink, blue and green. They bring up, respectively, the pig’s skin, for a more playful tone, trust and respect, and, finally, money itself. Only those colours should be used as the background for the compact logo.
TYPOGRAPHY
headline
subheadline
body copy
details
The Catamaran font is light, serious, simple and readable. It evokes the easiness of use, both of the product and of the savings process. As the product, it is minimalist and clear.
Creating Piglet
MAIN USER STORIES
For Piglet's first iteration, the following stories were prioritised:
-
As a money-saver, I need to be able to input information on the money I am receiving and spending (and on what), so that I can see an overview of my finances.
-
As a user, I want to see a dashboard of my finances clearly and visually, so that I can see how much I am spending on what at a glance.
-
As a user, I need to be able to tell the tool what my savings goal is and how long I have to reach it, so that I can save accordingly.
-
As a user, I want to be notified and rewarded when I have reached certain milestones throughout the saving period, so that I know whether I’m on track to reach my goal.
USER FLOW DIAGRAM
WIREFRAMES
Through low, middle and high fidelity wireframes, the information architecture and visual structure for PIGLET gained a more concrete form with every step.
INCORPORATING CUSTOMER FEEDBACK
Wireframes and final designs were submitted to three rounds of customer feedback, with the intent of gathering usability flaws and clarifying obscure points of visual communication. To obtain this, the following scenarios were tested:
1. You are required to verify your current balance in Piglet. How would you do it? Which screens are required for that?
2. You need to create a new savings goal. Which steps would you take to do that?
3. You need to add new savings to your current goal. How you would accomplish that?
All the high priority feedback was incorporated in the final layout.
The Final Look
HELPING YOU GET THERE
CLEAR GOALS, EASIER ACHIEVEMENT
IMAGE RECOGNITION FOR RECEIPTS
ADDING INCOMES AND EXPENSES ON A FEW TAPS
A CLEAN AND BEAUTIFUL VISUALIZATION OF GOALS AND FINANCES
Powerful colours enhance visibility of the details and create a delightful experience for Piglet. Goals and finances are easily viewed and monthly filtering is quickly done via the chips.
Addition of income and expenses is done with a few taps, in a simple and guided way.
If you've got a receipt for an expense, say no more - use Piglet's image recognition for receipts and avoid typing. Just check if everything is alright and hit the button.
Completion status of the goal is easily visualised in Piglet. Missing time and money for the goal can also be quickly spotted, and multiple goals are supported (viewed by the sliders).
Piglet helps you figure out the best way to achieve the goals, on your time, on your means.
THANK YOU FOR CHECKING
