CoffeePig might look like a money managing app, but it isn't really one at all. It just tells you, "Hey, you spent $X on coffee this month. You could have bought an Xbox instead."
Insight
Most people don't know how much they actually spend on coffee in a week or month.
Goals
• Quantify coffee expenses
• Provide direct links to products for sale
• Provide direct links to products for sale
Concept
Instead of going for that second coffee run of the day, give it to CoffeePig, your resident caffeine junkie. He'll drink your coffee and save your money. At the end of the month, treat yourself with the money you saved.
UX Considerations
Initial challenges involved getting the user flow as clear as possible.
• How to make it clear that the user isn't actually saving 'real' money.
• Make it dead simple use.
• Encourage users to check the app frequently.
• Make it dead simple use.
• Encourage users to check the app frequently.
User flow
I designed the UI around this user flow:
1. Sacrifice — feed Coffee Pig
2. Reward — increase your saved money
3. Payoff — spend your saved money
2. Reward — increase your saved money
3. Payoff — spend your saved money
I experimented with switching the center of focus between the pig vs. the savings amount. The idea was that the savings amount ticking upwards would be a stronger motivator than the pig's emotions.
Gamification
Aside from the pig character obviously, classic gamification elements such as urgency & reward were added in the form of elapsed time and gold coins.
Stickers
The primary 'Feed' action was changed from a generic button to a sticker that reveals a gold coin—sort of like a coffee shop loyalty card.
