SpendSavvy — Subscription Expense Tracker (Product Design Case Study)

SpendSavvy is a mobile-friendly expense tracking application designed to help individuals log spending, understand trends, and build healthier financial habits. The product uses a 3-day free trial model and then upgrades users to a $10/month subscription via Stripe, balancing value delivery with a clear monetization path.

This portfolio entry focuses on the product design decisions: user flows, UI structure, and the reasoning behind key experiences like trial gating, dashboard clarity, and analytics visualization.

---

Problem

Most personal finance tools feel overwhelming, overly feature-heavy, or demand too much setup before a user gets value. I wanted to design a product that:

• Helps users start tracking expenses immediately (low friction)
• Builds trust with a clean and predictable UI
• Shows value quickly with summaries + analytics
• Monetizes naturally after the user experiences the core benefit

---

Goals & Success Criteria

Primary goals

• Make expense logging fast and frictionless (especially on mobile)
• Provide clear insight: monthly totals, category breakdowns, and trends
• Use trial → subscription conversion without harming the experience
• Keep the interface modern, minimal, and consistent

Success criteria

• A first-time user can sign up and log an expense in minutes
• Users can understand “where money is going” at a glance
• Trial expiration is clear and non-confusing (no surprise lockouts)
• Subscription UX is direct, secure, and confidence-inspiring

---

My Role

• Product design for key user flows (trial, subscription, tracking, analytics)
• UI/UX decisions for mobile-first layouts and dashboard hierarchy
• Interaction design for forms, feedback, and states (loading/empty/errors)

---

Design Approach

1) Mobile-first, dashboard-first

The tracker is the core value of the product, so the design centers on a dashboard layout:

• A lightweight expense form
• An always-visible list of recent entries
• A summary panel that answers “How am I doing this month?”

On desktop, this becomes a split-view experience; on mobile it stacks vertically for clarity.

2) Minimal inputs, maximum clarity

Expense entry is intentionally simple:

• Date
• Category (presets + optional custom)
• Amount (2-decimal precision)
• Optional description (short, capped)

This reduces decision fatigue and improves completion rate.

3) Trial gating that doesn’t break trust

The product offers full access for 3 days after signup. After the trial ends:

• Users are redirected to payment when attempting gated areas
• The UI communicates subscription status clearly
• The “Subscribe” call-to-action stays consistent and predictable

---

Information Architecture (Pages)

The experience is structured as a focused set of pages:

• Home — value proposition + “Start Free Trial”
• About — credibility + explanation of purpose
• Tracker (Authenticated) — form, history, summary, analytics
• Payment / Sign-up — Stripe checkout for $10/month
• Contact — support and feedback

This keeps the product easy to understand and avoids feature creep.

---

Key User Flows

Onboarding & trial activation

1. User lands on Home and clicks Start Free Trial
2. Signs up with email/password
3. Trial begins immediately and user is taken to the Tracker

Expense tracking flow

1. User adds an expense using the quick form
2. Expense appears in the list instantly (newest first)
3. Monthly totals and insights update to reflect the new entry

Subscription flow

1. During/after trial, user sees a clear upgrade path
2. “Subscribe” sends user to Stripe checkout
3. After payment, access is fully unlocked

---

UI System (Brand & Visual Design)

Theme intent: trustworthy, clean, modern, and friendly.

• Primary color: #007BFF (actions, links, emphasis)
• Background: #FFFFFF (clarity and simplicity)
• Surface: #F5F5F5 (tables, panels)
• Text: #333333 (high contrast)
• Positive trend: #28A745 (growth/healthy change)

Typography (design spec):

• Roboto Regular for headlines/body
• Roboto Light for footer/secondary UI

---

Analytics & Insight Design

To help users understand their spending beyond raw entries, the dashboard includes:

• Total spent this month
• Trend indicator (e.g., “Spending up 10%”)
• Category breakdown (bar chart)

The goal is to transform logging into learning—without overwhelming the user.

---

Implementation Notes (What was built)

Although this portfolio entry is design-led, the product was implemented as a real app:

• Next.js + TypeScript
• Tailwind CSS (UI styling)
• Chart.js for dashboards
• Auth + gated access for trial/subscription model
• Stripe integration for recurring billing
• MongoDB/Mongoose for storing users and expenses
• Deployed on Vercel (public site: https://spendsavvy.vercel.app)

---

What I’d Improve Next

If I extended SpendSavvy further, I’d focus on:

• Budget goals + “remaining this month” indicators
• Recurring expenses and reminders
• Export to CSV/PDF
• Better onboarding prompts (category suggestions, sample data)
• Integrations (e.g., Plaid) while keeping the UI minimal

---

Takeaway

SpendSavvy was an exercise in designing a simple but monetizable consumer product: deliver value quickly, build trust through clarity, and introduce payment at the right time using a trial that feels fair. The result is a focused expense tracking experience that prioritizes speed, insight, and mobile usability.