Digital Piggy Bank — A UX Case Study
Overview
Background
As part of HCDE 518 at the University of Washington, our project examined the financial overconsumption challenges faced by Gen Z. The ease of online shopping and the influence of targeted ads make resisting impulse purchases increasingly difficult. This behavior not only impacts personal budgets and long-term financial goals but also exacerbates global sustainability issues.
Process
We followed the classic design process, iteratively refining our “How Might We” (HMW) statement to guide our work.
How might we?
Research
Quantitative research — article review & survey
- We researched to understand the following areas:
- We first conducted secondary research to identify key factors contributing to hedonic and impulsive shopping and look for existing solutions.
- We used a survey to collect quantitative data from a larger sample of Gen Z consumers regarding their shopping habits, motivations, and triggers for impulsive buying. (85 responses)
Qualitative research — interview
- We’ve selected 9 participants from the survey that have above 10% monthly expenses spent on impulsive purchases and above 2 in significance that affects their daily life to do interviews. Here are some common patterns we found.
User persona
We’ve created our user persona based on the highlights above.
Ideation
Prioritizing design requirements
We’ve mapped out the hierarchy of pain points from user research and matched them with design requirements for ideation.
Ideas
Based on the personas and design goals created, we’ve sketched out various product and service ideas that could help users form a financial goal with daily encouragement and social interactions. https://miro.com/app/board/uXjVLM_5LFU=/
After that, we’ve evaluated those ideas based on how well the feature meets the design goals, accessibility, feasibility, and testing complexity. We sort out 3 possible ideas — peer’s suggestion player, financial learning package, and smart piggy bank. And ultimately we made the decision to move on with the smart piggy bank, which has the most intriguing capabilities and characteristics to develop.
Storyboard
We want to help people develop financial habits, even if they lack financial cognition. Here, we created two scenarios, which defined the two main features of our design: Goal setting and daily interactions with friends.
Prototyping Piggy
Planning Our Product
- A physical Piggy device: Interactive, friendly, and tangible, this device allows for daily check-ins and visually engaging progress trackers.
- A companion app: The app connects users to their “Piggy Buddies” (friends or peers for accountability) and lets them set achievable financial goals in multiple categories.
Key Features
- Daily Check-in for Habit Formation
- Goal Setting
- Goal Tracking & Obtaining Rewards
Iteration Through Testing
Introducing customization settings for progress disclosure
- Most of our usability test participants hesitated to share their exact spending amounts with their buddies, preferring to share progress percentages or high-level summaries. However, some stated that they might also be open to sharing more details if their “buddies” are people who are closest to them.
- We added a step during the goal-setting flow allowing users to choose what progress details they wish to share with their buddy.
Enhancing information clarity on collaborative goals
- Our test participants were confused about how shared goals work, especially how Piggy would divide the contributions between 2 buddies.
- We updated the information on this screen to clarify that the user is inviting their buddy to start the same goal type, but their buddy can customize certain aspects of this goal.
Improving the goal-tracking experience
- Originally, we only displayed the Weekly Budget Tracker on the companion app home screen, and Goal Progress on Piggy. However, our usability tests revealed that users wanted to see both visual trackers on the Home screen of their app, so we redesigned this screen to accommodate this.
- We also added tooltips to let users know how we calculate their progress to enhance information clarity.
Final solution
Style guide
For the overall style, we crafted the color palette based on keywords such as Friendly, Trustworthy, Encouraging, Piggy, and Finance. These values guided us in creating a cohesive and approachable visual identity. To achieve a clean and modern aesthetic, we selected Poppins, a sans-serif font, as our typeface. Its geometric shapes and versatile styles contribute to the balance of professionalism and warmth, aligning perfectly with our brand’s vision.
Final Piggy Screen Prototype
Piggy daily check-in
Piggy when made a new friend and idle screen
Final App Screen Prototype
Set a saving goal
Complete weekly challenge
Check out our interactive prototype! Click here!
Thank you!
If you’d like to learn more about the Digital Piggy Bank, feel free to leave a comment or connect with our team directly via email. We’d love to hear your feedback and explore how our design can help improve consumption habits!
Get Heru Wang’s stories in your inbox
Join Medium for free to get updates from this writer.
University of Washington Human Centered Design & Engineering
HCDE 518 User-Centered Design Course, Autumn 2024
Team: Han Khuong, Selina Guo, Zack Wang, and Heru Wang
