PiggyBank is a conceptual UI-focused Android banking app created as a study project that combines a playful savings-inspired brand with a structured design system and straightforward banking workflows. The goal was to reimagine a modern banking experience with an emphasis on making financial interactions clear, trustworthy, and approachable.
Created as part of a UI Design certification with UX Design Institute, accredited by Glasgow Caledonian University.
Our first interaction with money starts as a child, saving up using a piggy bank, and as we venture into adulthood we interact with dense, transactional interfaces that prioritise data density over clarity. As part of the UI Design certificate with UX Design Institute, I set out to design PiggyBank, a conceptual Android banking app that reimagines everyday banking as something calmer and more approachable, without losing the trust and precision people expect from their money management tools.
The brief I set myself was to build a full design system from the ground up, then apply it to the core workflows people rely on most: checking balances, saving towards a goal, and moving money between accounts to authorise payment and check pending transactions.
Illustrative image generated with Adobe Firefly.
Looking across mainstream banking apps, a few recurring issues stood out as worth solving for:
I started with research and benchmarking against competitors, exploring the user experience while noting their existing design system and potential openings.
That research shaped a brand direction that's playful, clear and trustworthy, whilst being savings-led rather than purely corporate.
From there, I built a structured design system first: type scale, colour, spacing and componentry, so that every screen that followed inherited the same foundations rather than being designed in isolation. Only once that system felt solid did I move on to the core banking flows themselves.
The result is PiggyBank: a savings-first banking app with a warm, approachable visual identity layered over clear, no-nonsense banking workflows. The design system underpins everything from account summaries to transaction lists, so the playful brand never gets in the way of the user quickly finding the information they need.
PiggyBank brand mark and wordmark lockups.
PiggyBank colour palette.
Component states and symbol library from the design system.
Type scale: Quicksand for display headings, Roboto Flex for body and numerical values.
PiggyBank was completed as a study project rather than a shipped product, but it gave me a full end-to-end design system to design, test and defend — from brand and UI foundations through to applied banking flows. It's also where I sharpened my field research process, using it to ground brand decisions in how people actually feel about saving, rather than assumption alone.
PiggyBank screenshots on Android.
