PiggyPay · 2024 · Mobile · Web · Fintech · Save-to-Buy
Save-to-Buy payments across shopper, merchant and admin.
A save-to-buy payment processor encouraging a credit-less society. Shoppers save towards a product (a *pig*) at merchant checkout; when the goal is hit, the merchant ships. Spans three coordinated surfaces — shopper mobile app, merchant dashboard and admin console.
PiggyPay is a save-to-buy payment platform built to reduce the credit-card debt cycle. At checkout, merchants let shoppers commit to a savings plan (a 'pig') toward a specific product; once the saving completes, the merchant ships. Three surfaces ship together: shopper mobile app, merchant dashboard and back-office admin.
The Problem
Credit-card facilities push consumers into debt cycles, and conventional 'buy now, pay later' tools shift the same risk onto merchants. Shoppers needed a way to commit to a purchase without taking on credit; merchants needed visibility and protection; ops needed control across both.
The Goal
Replace credit-driven checkout with a save-to-buy alternative — clear pigs for shoppers, confident order management for merchants, and a shared design language across all three surfaces.
Role
Product Designer (UX/UI)
0
Surfaces shipped
0
Audience types
0
Shared system
Mapped user journeys across all three surfaces, identified shared primitives and surfaced inconsistencies. The system was then designed bottom-up from tokens to flows.
User Profile
Consumers managing savings and payments, merchants running everyday commerce, and operations staff who need fast, confident tooling.
- 01Defined the shared design language across all three surfaces
- 02Designed consumer wallet, top-up, savings and offers flows
- 03Designed merchant onboarding, dashboard and orders
- 04Designed admin console — auth, 2FA, search, offers and pigs
- 05Built reusable components and documented patterns
01
Wallet home
A confident, calm home that puts balance, actions and offers in arm's reach.
02
Top-up that just works
Frictionless funding flow with clear states and instant feedback.
03
Offers worth opening
Editorial offer cards that earn the tap without screaming for it.
04
Merchant dashboard
Sales, payouts and orders summarised for one-glance comprehension.
05
Merchant onboarding
A guided KYB flow that gets businesses live quickly without skipping compliance.
06
Admin console
Search, 2FA and ops tooling designed for people who use it every day.
A unified system across three surfaces shipped to engineering, with shared components and patterns dramatically reducing handoff and rework.
Takeaways
Designing the system before the screens scales. Shared primitives are the cheapest way to ship consistent multi-surface products.
Impact
- 01Three surfaces shipped from one design system
- 02Reduced handoff and component churn across teams
- 03Faster iteration on consumer, merchant and ops flows
What I learned
Multi-surface products benefit hugely from a flat primitive set. Investing in shared tokens early pays back across every release.
Next Steps
Roll the system into a documented Figma library, expand component coverage and align engineering tokens.
Want something
like this?
Continue
