FINTECH CASE STUDY
Piggy: A White-Label Financial Planning App, Built From the Ground Up
How WebSpero designed, architected, and shipped a full fintech platform (iOS, Android, and web in one codebase) with Finicity + Plaid bank connectivity, live advisor video & screen share, and a forward-projecting planning engine.
Project Context
Client
Piggy Fintech
Niche
Fintech Advisory SaaS
The Tech Stack
- React Native Web
- Node.js
- MongoDB
- Tailwind CSS
- AWS CDK
"The vision was for Piggy to feel
warm and intuitive, not like a cold,
spreadsheet-driven banking app."
Founder vision prioritized emotional security alongside technical robustness. We focused on expansive white space, soft lighting effects, and a refined color palette that prioritizes readability and cognitive ease.
Founder, Piggy
Strategic Vision Lead
HOW WE BUILT IT
A Structured, Founder-in-the-Loop Sprint Process
When Piggy’s founder first reached out, we didn’t start with a proposal template. We ran a structured intake, understood what a financial advisor needs from a tool they brand as their own, and designed the delivery plan around that. Below is the sequence we ran, from the first discovery call through the final build and handover.
DISCOVERY
A working session with the founder to capture the white-label vision, both user journeys, and the non-negotiables for the stack.
REQUIREMENT ANALYSIS
We broke the brief into epics: auth, onboarding, financial picture, plan, transactions, advisor channel,
admin dashboard, integrations, and mapped dependencies between them.
ARCHITECTURE & PLANNING
Picked React Native + RN Web with a shared component system, Node.js + MongoDB for the API, AWS CDK for
reproducible infra, and sequenced a phased delivery roadmap.
UI/UX DESIGN
High-fidelity Figma screens for every surface: custom emoji set for categories, a clean theme, and an icon language consistent across
mobile and desktop.
CORE BUILD
Auth, folder-based financial picture, income/expense/asset/liability entry, projection engine, cashflow + balance sheet +
tax views, all wired to the shared schema.
INTEGRATIONS
Finicity and Plaid normalised behind a single internal transaction model. Real-time messaging, video call, and screen share stitched
into both the client and admin apps.
QA & REGRESSION
Every release verified against expected financial outputs, run across iOS, Android, and desktop web, with a QA-founder-dev
triage loop on every sprint.
RELEASE BUILDS & HANDOVER
Release builds submitted to App Store and Play Store for client and admin apps, desktop web deployed to
production, and the source repo, AWS CDK infrastructure, and runbooks handed to the founder’s team.
Authentication: Login, Create Account, and Error States
The entry point to every Piggy-branded practice. Login, account creation, and recovery were designed with empty, filled, and active states so advisors could white-label the flow without the UI breaking at any state.
Financial Picture: Folder-Based Organisation
The home screen of every client app: a folder per life area (Me, Spouse, Rent, Car, Pets, and so on), each showing its own cashflow, net worth, and delta. Adding a new folder is a single tap, and every folder is automatically tracked in the planning engine.
Income, Expense, Asset, and Liability Entry
A single structured form for every financial item: amount, frequency, cap, annual raise, and a bank-linked transaction search so real transactions feed straight into the projection. The same form powers income, expenses, assets, and liabilities: one data model, four use cases.
Bank Connection: Finicity + Plaid Behind One Flow
Users see a single “Find your bank” screen with a clean bank grid. Under the hood, each bank is routed to either Finicity or Plaid depending on reliability and coverage, and the transactions land in Piggy’s unified transaction model regardless of which aggregator handled the link.
Transactions: Categorised, Uncategorised, and Full Feed
Once accounts are linked, transactions flow into a single searchable feed with three filtered views. Clients can categorise quickly; advisors can see the uncategorised pile at a glance and help close it out.
Plan: Forward Projection of Every Asset and Liability
Each asset (home, car, investment) or liability (loan, credit line) gets its own timeline: purchase date, sale date, appreciation, market-crash scenario. The planner rolls each item forward individually and rolls them up into the aggregate view.
Cashflow, Worth & Taxes: Three Tabs, One Projection
The summary view every client and advisor lives in. Cashflow and net worth are each computed from the same folder structure, and the tax tab pulls federal and state estimates from the underlying income and deduction model. All three tabs stay in sync because they share one data source.
Profile, Connected Accounts, Knowledge Base, and Account Deletion
The profile section is where every trust-sensitive action lives: managing connected bank accounts, browsing the knowledge base tour, notification preferences, and a deliberately friction-heavy account deletion flow that routes the user through their advisor rather than deleting silently.
The Planner: Desktop Web Workspace
The same React Native codebase renders a multi-panel desktop planner: the Financial Picture column on the left, a visual timeline across the middle, a detail view for the selected item, and a full cashflow/worth/tax read-out on the right, all interactive and in sync.
Advisor Admin Dashboard
Advisors see their entire client list on one screen, with unread message counts per client. Tapping a client opens a split view: the full conversation on the left, the client’s profile and notes in the middle, and all their connected accounts and balances on the right. A “Log in as Client” button sits alongside, so the advisor can walk into the exact view their client is seeing.
Live Video Call + Screen Share
Advisor and client can jump into a 1:1 video call straight from the conversation, and either side can share their screen to walk through the numbers in real time. The screen below is an advisor reviewing a client’s federal + California tax estimate during a call; no Zoom, no external tools, no context switch.
WHAT TO EXPECT FROM US
Transparent Engineering and Predictable Delivery for Regulated Products
If you are building a fintech product and you are weighing agencies, here is what working with our team actually looks like, in plain language.
A plan before a proposal.
We start with a working session to understand what your product needs to do, who it serves, and where the hard parts are. You leave with a delivery plan, not a sales pitch.
A live demo every two weeks.
At the end of every sprint, you see the actual product: what’s built, what’s working, and what we’re still figuring out. You always know where your product stands. No month-long silences followed by a surprise reveal.
One team, all your platforms.
You get a single team handling iOS, Android, and web together. You don’t pay for three separate teams that don’t talk to each other, and you don’t end up with three slightly different apps that feel like different products.
Experience with the hard parts.
Bank connections, payments, secure logins, financial calculations; we have shipped these into production for real customers. They are not research projects for us, which means you skip a year of trial and error.
Quality that does not depend on one person.
Every change is tested automatically before it reaches you. Every release is reviewed by QA, by your team, and by us together. Nothing ships because one engineer said it was fine.
Security built in from day one.
Your users’ financial data is handled the way a bank would handle it, encrypted, access-controlled, and audited. Protection from day one, not a checklist at the end.
You own what we build.
At handover, you get the full product: the code, the documentation, the access keys, the operational guides. Your team can take it forward on their own, or keep us on, your choice, not a lock-in.
A founder-friendly working rhythm.
You are in every demo, every trade-off conversation, every milestone. You are not a ticket number to us; you are the product’s first and most important user.