INFO 360 · Design Portfolio

Think before
you spend.

A mobile app that helps college students build healthier spending habits, one swipe at a time.

Shinaya Hu · Sophomore, Informatics Pearl Tugnayat · Freshman, Informatics Rayaan Yusuf · Freshman, Informatics
INFO 360 · University of Washington
Scroll
01 — Problem

The gap between
impulse and intention.

Financial literacy is one of the most underrepresented areas of information for adolescents. For most college students, being educated on personal finance comes through personal discovery and not as a recommended or mandatory course. Without the necessary resources, students are left to navigate budgeting and saving entirely on their own.

Online shopping platforms have completely removed the barrier between impulse and purchasing. Embedded in these systems is easily accessible credit card information, one-click checkouts, free returns, and free shipping, which makes spending feel virtually consequence-free. The main issue is that students don't pause long enough to differentiate their needs from their wants.

1
Broad Problem
Many college students lack a fundamental understanding of finance and personal budgeting.
2
Narrower Problem
Online shopping is increasingly making it easier to buy things at the click of a button.
3
Specific Design Problem
Saved credit card info, free returns, and reliable shipping create a frictionless environment that encourages impulse purchases.
4
Gap in Knowledge
Students don't realize the complications of their actions because personal finance is rarely taught in school unless an explicit course is taken.
5
Specific Goal
Create a fun way for students to reflect on their personal spending habits by separating their needs from their wants.

“How might college students build spending habits by pausing and reflecting on potential purchases so that they can distinguish between their needs and wants to improve their long-term financial stability?”

02 — Research

What we learned
from our users.

We conducted user research with college students who self-reported as frequent online shoppers. Through interviews and observation, we captured what they say, think, do, and feel around spending.

“I have to ban online shopping for myself after 10pm because that’s when I start to impulse buy.”
— Student participant
“I’ll return this if I don’t like it.”
— Student participant
“I deserve to go shopping since I’ve had a stressful week.”
— Student participant
“I use a credit card so it’s different than a debit card.”
— Student participant
“It’s only $15.”
— Student participant
“I’m justifying this because it’s on sale.”
— Student participant

Key Research Insights

Students spend based on how they're feeling — stress, boredom, or social pressure — not because they genuinely need something.

People realize they overspent after they buy, not in the moment they're deciding.

Online payment tools make spending so fast there's barely any time to think before buying.

Most budgeting apps don't help in the moment — they only show what you've already spent.

Students don't need something complicated — they need a simple way to pause and think before buying.

Competitive Analysis

We analyzed three existing financial apps to understand where they fall short for our target audience.

PocketGuard
Budgeting
"In My Pocket" feature shows safe spending amount in real time
Auto-connects to bank accounts and cards
Limited customization for users who want specific budget control
Doesn't intervene before a purchase happens
RocketMoney
Finance Management
Identifies and cancels unwanted subscriptions
Intuitive and modern interface
Takes 35–60% of first-year savings when negotiating on your behalf
Key features locked behind expensive premium tier
GoodBudget
Envelope Budgeting
Visual envelope system makes allocation intuitive
Supports weekly, monthly, bi-weekly cycles
Free tier severely limited, manual entry only
No investment or net worth tracking

User Journey Map

We mapped the emotional arc of a user across four key phases of the Savr experience.

User Journey Map
03 — Design Rationale

Why we built it
this way.

Every decision in Savr was made in direct response to something we observed, heard, or tested. Our research consistently pointed to one root cause: the problem is not a lack of financial knowledge, it is a lack of behavioral intervention at the right moment. That insight shaped everything from the core mechanic to the visual language.

Why we chose this solution

Our competitive analysis revealed that every major budgeting app on the market operates retrospectively. They show you what you have already spent, which does nothing to stop the behavior in the first place. Our user research confirmed this gap directly. Students told us they downloaded budgeting apps and never used them. They told us they already knew they were overspending. The knowledge was there. What was missing was a moment of pause between the impulse and the purchase. Savr is built entirely around creating that moment. Rather than adding another tracker to a student's phone, we designed a habit loop that intercepts the most vulnerable point in the buying process: the window between wanting something and acting on it.

The Swipe Mechanic
We chose a swipe interface deliberately because it borrows from one of the most familiar interaction patterns in mobile design. Our target users grew up with apps like Tinder, and the swipe gesture carries an immediate sense of agency and playfulness that a checklist or form never could. This matters because our research showed that existing financial tools feel like chores, which is precisely why they get abandoned. By framing the reflection as a game rather than a task, we lower the psychological barrier to engagement. The binary nature of swiping, keep or discard, also forces a decision rather than allowing indefinite procrastination, which mirrors the kind of decisive thinking we want users to develop over time.
The Cooldown Period
We implemented a waiting period between saving an item and deciding to purchase it because impulse buying happens during moments when a person is emotionally vulnerable, like stress, boredom, or FOMO. By creating a space between the impulse and the action, we interrupted the purchasing cycle that shopping platforms usually enable. The pause gives the users’ emotions time to settle and actually think rationally.
AI Reflection Prompts
While existing budgeting apps only show users what they’ve already spent, financial literacy alone doesn’t prevent impulse buying. It’s convenience and emotions that matter. We designed personalized AI reflections to make the cooldown period actually purposeful instead of just a delay. The prompts help users think about why they want an item, helping them distinguish between a need and a want. This makes the pause into a productive reflection.
Gamification and Streaks
We included streaks and a savings counter not as superficial decoration but because habit formation research consistently shows that visible progress is one of the strongest drivers of sustained behavior. The streak mechanic rewards consistency of reflection, not necessarily the outcome of the swipe. A user who keeps every item they reviewed still builds their streak, because the goal is the practice of pausing, not a particular financial outcome. The savings counter showing how much was not spent works similarly. It reframes restraint as a positive achievement rather than a sacrifice, which aligns with our core design philosophy of building self-awareness rather than enforcing restriction.
Saving Items Instead of Buying
We chose “save item” because the other options we thought about didn’t really solve the problem we saw with college students. Carts and wishlists already exist, but they don’t stop impulse buying since they still sit inside shopping apps and usually just lead to checkout anyway. Normal budgeting apps also don’t help since they focus on what you already spent rather than what you are about to spend. We also thought about stronger ideas like blocking purchases or forcing a waiting period, but that felt too strict. Most college students would probably ignore it or stop using the app altogether. So saving items was our middle ground. It takes the pressure off the decision, moves it out of the shopping app, and adds a pause without taking control away from the user.
Visual Design Decisions
The navy and lavender palette was chosen to feel calm and trustworthy without being clinical. Personal finance tools often lean into greens and grays that carry associations with spreadsheets and banking, which reinforces the intimidating quality we were trying to avoid. The softer lavender tones signal approachability. Inclusive Sans was selected because its name reflects a value the app holds: financial tools should feel accessible to people who have never used one before. The card-based layout keeps information digestible and avoids the overwhelming data-dense interfaces that our users told us caused them to stop using other apps. Every screen shows one thing at a time, which mirrors the one-item-at-a-time philosophy of the swipe mechanic itself.

How research shaped our decisions

Several specific research findings had direct and traceable influence on the design. When users told us they impulse shop most heavily late at night or during stressful periods, it confirmed that the problem is emotional rather than informational, which led us away from educational features and toward behavioral ones. When our affinity map revealed that free returns and one-click checkout were the specific frictions being removed by online shopping platforms, we recognized that Savr needed to reintroduce friction in a way that felt natural rather than punitive. When usability testing showed that users wanted the app to feel personalized rather than one-size-fits-all, we strengthened the onboarding flow to capture individual goals and spending triggers from the very first session. The design did not emerge from assumptions. It emerged from listening.

Trade-offs we accepted

What we prioritized
We prioritized simplicity over feature depth, choosing to do one thing well rather than compete with full-featured financial apps. We prioritized emotional approachability over data density, which meant deliberately leaving out detailed charts and financial breakdowns that could overwhelm a first-time user. We prioritized mobile-first design because our target users live on their phones and make purchasing decisions on their phones. We also prioritized habit formation over immediate financial impact, accepting that the value of Savr compounds over time rather than showing up on day one.
What we deprioritized
We intentionally deprioritized bank account integration, even though it would enable more precise savings tracking. Connecting a bank account introduces both technical complexity and a trust barrier that would deter the exact audience we are trying to reach. We deprioritized social features like sharing purchases with friends, which appeared in early ideation, because they risked introducing social pressure rather than relieving it. We also deprioritized a desktop version, recognizing that impulse purchasing happens on mobile and the intervention needs to live in the same environment as the behavior it is addressing.
03 — Design Solution

Meet Savr.

Savr is a mobile app that helps users slow down impulsive online purchases by adding a reflection step before they commit to buying. Instead of tracking what you've already spent, Savr intervenes in the moment, turning the act of wanting something into an opportunity for self-awareness.

Primary Persona

👩🏻
Maya Smith
20 · Communications Major · Seattle, WA · Part-time barista
Scrolls Amazon to unwind Uses Apple Pay daily Avoids checking balance Downloaded budget app, never used it
Pain Points
  • No reflection before buying
  • Only tracks spending after the fact
  • Feels shame, not empowerment
Goals
  • Stop regretting purchases
  • Feel in control of money
  • Build habits that last

Key Features

👤
Personalized Onboarding
Set goals and spending habits from day one so the app adapts to you.
🛍️
My Items
Save products via link or photo instead of adding to cart. Items wait for you to reflect.
↔️
Swipe to Reflect
A gamified swipe interface that keeps or discards items after a cooldown period.
🤖
AI Reflection Prompts
Personalized questions triggered by spending patterns and not just generic lectures.
📊
Dashboard
See what you've saved, track streaks, and visualize your spending patterns over time.
🔥
Streaks & Progress
Light gamification that rewards consistent reflection without being overwhelming.

High-Fidelity Prototype

Designed in Figma and built with Figma Make. The visual language uses a navy and lavender palette, Inclusive Sans typography, and a clean card-based layout.

Onboarding Flow
Onboarding screens
Onboarding & Sign Up Flow
Core Screens
Dashboard
Dashboard
My Items
My Items
Add Item
Add Item
Swipe & Reflection Flow
Swipe screen
Today's Wants
Swipe screen 2
Swipe to Decide
AI reflection
AI Reflection Prompt
Reflection complete
Reflection Complete
04 — Evaluation

Testing with
real users.

We conducted Wizard of Oz testing and usability testing with college student participants aged 18–25, which is our primary target audience. Testing used paper prototypes and a Figma prototype across two task scenarios.

Scenario 1 — Saving an item instead of purchasing

✓ What worked
  • The core concept (save, wait, review) was easy to understand
  • The swipe feature felt familiar and simple
  • Users understood what they were supposed to do quickly
○ Problems found
  • Unclear how items actually get added from outside shopping apps
  • Some buttons weren't obviously labeled
  • Confusion about what happens right after saving an item
→ Design changes made
  • Made the "add item" process from external apps more obvious in onboarding
  • Improved button labels and screen navigation throughout
  • Added clearer feedback for what happens immediately after saving

Scenario 2 — Deciding what to keep or remove

✓ What worked
  • Users liked the idea of setting a personal goal for how they use the app
  • Swipe system was easy to use and felt engaging
  • Reflection prompts made sense and felt useful
○ Problems found
  • Experience felt like it should adjust more to different users
  • No undo option in the swipe system frustrated some users
→ Design changes made
  • Added onboarding step where users set a goal (casual use vs. impulse control)
  • Used that goal to personalize home screen and reflection prompts
  • Added undo button in the swipe/review system

Cognitive Walkthrough

We evaluated the main task (saving an item, reflecting on it, and deciding whether to keep or remove it) across 7 steps.

1
Log into Savr
2
Find an item online to buy
3
Share the item into Savr from the shopping app
4
Go through the cooldown / reflection period
5
Respond to a short reflection prompt
6
Swipe to keep or remove the item
7
View dashboard and spending insights
05 — Reflection & Limitations

What we learned
along the way.

As a group, the entire experience was rewarding. Although there were moments where the project timeline felt rushed, we ended on a strong note with a working prototype of our vision.

💡
What we learned
We learned how to conduct usability testing, create wireframes, chart a user journey, and design a high-fidelity prototype in Figma. The usability testing was extremely important and it gave us real direction at every stage.
Challenges we faced
The main challenges were in prototyping with Figma and figuring out what elements to include. It took significant outside research to use the tools effectively, but once we did, building the interactive flows was genuinely fun.
🔭
What we'd do with more time
We'd build a more fleshed-out prototype with seamless screen transitions, deeper AI personalization, and a more thorough exploration of how the reflection prompts evolve over time with repeated use.

How our thinking changed

At the start of the project, we were mainly thinking about the problem as students not having enough financial knowledge, so we focused on ideas like budgeting tools and spending summaries.

⏱️
Insight 1: Timing matters more than information
As we talked to users and did research, we noticed most students already know when they overspend. What changed in how we think as designers is that we stopped focusing on adding more information and started focusing on the exact moment someone decides to buy something. We started thinking more about where behavior actually breaks instead of what users already know.
🪞
Insight 2: We were designing from our own habits during research
While doing research and thinking through ideas, we realized a lot of our early thinking came from how we personally shop as college students. Research also showed that student spending is often tied to things like stress, boredom, and convenience. This changed how we approach design because we started focusing on patterns across students instead of our own habits.
🧪
Insight 3: Testing showed where the design did not work smoothly
Through Wizard of Oz and usability testing with users, we saw where people got confused or missed steps. We stopped judging ideas based on whether they sounded good and started judging them based on whether users could actually understand and complete them.

Limitations & Future Plan

Current Limitations
  • AI personalization needs refinement to avoid feeling generic
  • The sharing process from external apps needs clearer onboarding explanation
  • Reflection prompt frequency needs further testing to avoid repetition fatigue
  • Assumes users are motivated enough to return daily, therefore the engagement loops need work
Future Roadmap
  • Native iOS/Android share extension for seamless item saving
  • More sophisticated AI that adapts prompts based on long-term patterns
  • Social/accountability features such as sharing goals with friends
  • "This could've been..." feature showing equivalent value (hours of work, etc.)

The Team

Shinaya Hu
Sophomore · Informatics
Pearl Tugnayat
Freshman · Informatics
Rayaan Yusuf
Freshman · Informatics
06 — Demo Video

See Savr in action.

07 — References

Sources

  • Basit, A., Hameed, M., Azid, D., Nawaz, A., Rauf, M. A., Yasir, M. U., & Raza, S. (2024). Impact of online shopping addiction on compulsive buying behavior and life satisfaction among college students. Journal of Health and Rehabilitation Research, 4(2), 27–32. https://doi.org/10.61919/jhrr.v4i2.728
  • GoodBudget. (n.d.). GoodBudget: Budget & finance app. Retrieved from https://goodbudget.com
  • Lusardi, A., & Mitchell, O. S. (2014). The economic importance of financial literacy: Theory and evidence. Journal of Economic Literature, 52(1), 5–44.
  • Pakpahan, D. R., Handayani, C., & Sanjaya, M. (2024). The effect of fintech payment and financial literacy on impulsive buying of college students in Medan City. Journal of Finance Integration and Business Independence, 1(1), 20–29. https://doi.org/10.64276/jofibi.v1i1.9
  • PocketGuard. (n.d.). PocketGuard: Budget & save money. Retrieved from https://pocketguard.com
  • Priyo Sasmito, A., Riswanto, A., Thursina, F., Kusuma, F., & Nurlaila, R. D. (2023). Consumptive behavior in adolescents and its impact on financial management: Case studies and practical implications. West Science Journal Economic and Entrepreneurship, 1(05), 76–83. https://doi.org/10.58812/wsee.v1i02.70
  • Qin, R. (2021, May 20). Analysis on the causes and solutions of teenagers' excessive and impulse consumption. In Proceedings of the 2021 International Conference on Social Development and Media Communication. Atlantis Press. https://doi.org/10.2991/assehr.k.210519.004
  • Rocket Companies. (n.d.). Rocket Money: Personal finance app. Retrieved from https://www.rocketmoney.com
  • Saxena, A. K., & Prajapati, D. S. (2026). Online shopping addiction on teenager purchasing behaviors in India. International Journal of Engineering Development and Research, 14(1), 917–923. https://rjwave.org/ijedr/viewpaperforall.php?paper=IJEDR2601120
  • Zhu, A. Y. F. (2020). Financial literacy types and financial behaviors among adolescents: Role of financial education. Journal of Financial Counseling and Planning, 32(2). https://doi.org/10.1891/jfcp-19-00051