Reduced payment flow completion time by 40%
One app for every payment you'll ever need
An end-to-end design of a mobile payment app focused on simplifying split bill, transfer, and group payment flows for everyday use.
Fintech
Mobile App
Role
Product Designer
Timeline
8 Weeks
team
2 Designers, 1 PM, 3 Engineers
platform
Mobile App
One wallet. Every payment. No switching.
We live in a world where you can order food, book a flight, and stream a movie in seconds. But splitting a dinner bill with friends, sending money abroad, or tracking where your paycheck actually went? Still a mess.
Most people juggle two or three payment apps just to cover their daily needs. One for transfers, one for QR payments, one for splitting bills. None of them talk to each other. None of them give you a clear picture of your finances. And none of them were really built with working professionals in mind.
That's the problem Penny was built to solve. One app. Every payment need. Zero friction.
"I have 4 payment apps and still can't split a bill easily"
"I never know where my money actually goes every month"
"Sending money internationally takes forever and costs too much"
What Penny became
Before diving into the process, here's what the final product looks like and what it achieved
2.9 → 4.8
Customer satisfaction score after launch
65% reduction
In app-switching behavior among users
4.8/5 RATING
Average usability score from testing sessions
Penny became the one app working professionals actually reach for first. From splitting a dinner bill to sending money abroad, every payment need lives in one place. Designed for daily use, built to scale to anything.
Understanding the problem first
Before designing anything, we needed to understand how working professionals actually manage their money and payments today.
User Interviews
Spoke with 12 working professionals aged 24 to 45 across Indonesia, Singapore, and Malaysia about their daily payment habits and frustrations.
"I use OVO for QR, Wise for sending money abroad, and a spreadsheet for everything else. It's exhausting."
"I never really know where my salary goes until it's already gone."
"I'd switch apps if I actually trusted it with my main account. And having to top up my balance for every app I use, it's suck."
Usability Audit
Evaluated current payment flows in top apps to pinpoint where users drop off and why.
No single app covers everything. The biggest gaps are NFC, budget planning, receipt management, and a truly unified split bill experience. This is exactly where Penny lives.
Competitor Analysis
Analyzed 6 existing payment apps including GoPay, OVO, Dana, PayPal, Wise, and Cash App to identify gaps and opportunities.
Most payment apps fail by cramming too many features into the navigation. I capped it at 5 tabs to keep daily interactions simple and predictable. Anything beyond 5 creates cognitive load that slows users down.
Turning research into a clear direction
With research done, I needed to define exactly who I was designing for, what they truly needed, and what Penny had to solve.
User Journey Map & JTBD
Scenario: Rizky wants to split dinner expenses with 4 colleagues and send money to his family the same evening.
Pain & Gain Map
Affinity Map
After synthesizing all interview findings, 5 core themes emerged:
Problem Statement
Working professionals need a single, unified payment experience that handles all their financial transactions because managing multiple apps creates friction, wastes time, and leaves them with no real visibility over their own money.
How Might We
Make switching between payment types feel seamless within one app?
Give users real spending visibility without requiring any manual input?
Build enough trust that users feel confident linking their main bank account?
Design a split bill experience that works for groups with different orders?
Make international transfers feel as simple as sending a local payment?
Information Architecture
Before designing any screen, I mapped out the full structure of Penny to make sure every feature had a logical home and nothing was buried more than 2 taps deep.
User Flows
I mapped 3 critical flows that represent the core value of Penny:
Split Bill by Item
The most requested feature that no existing app does well.
International Transfer
Designed around radical transparency, fee shown before confirmation.
Spending Insights
Automatic, zero manual input required.
Wireframes
Wireframes were generated using AI as a starting point for the team to react to. Rather than spending time building from scratch, we used AI-generated layouts to quickly put structure on the table, then gathered around them as a team to discuss what felt right, what was missing, and what the research was telling us to change. This approach compressed the ideation phase significantly and kept conversations grounded in something tangible rather than abstract. The wireframes you see here are the result of those discussions, not the AI output itself.
Key design decisions at this stage
Bottom navigation capped at 5 tabs
Most payment apps fail by cramming too many features into the navigation. I capped it at 5 tabs to keep daily interactions simple and predictable. Anything beyond 5 creates cognitive load that slows users down.
Quick actions always one tap from home
QR scan, send, request, and split are the four most frequent actions in any payment app. Burying them inside menus kills the experience. In Penny, all four live on the home screen as persistent quick actions, always visible, always one tap away.
Fee transparency screen is non-skippable
Hidden fees are the number one trust killer in international transfers. In Penny, the fee breakdown and live exchange rate screen cannot be skipped. Users see exactly what they pay before they confirm, every single time.
Split bill lives as its own tab
In every competing app, split bill is buried inside the transfer or payment flow. Because splitting is a core daily behavior, especially for working professionals, Penny gives it its own dedicated tab. It should feel like a first-class feature, not an afterthought.
Spending insights are fully automated
Manual expense tracking fails because people stop doing it after a few days. In Penny, every transaction is automatically categorized by AI in the background. Users get a complete spending picture without ever touching a spreadsheet.
Building the foundation before the house
Before touching a single screen, I built a system that would keep Penny consistent, scalable, and ready for engineers to implement without constant back and forth.
Color Palette
Color in Penny is not decorative. Every shade has a role, and every role has a rule.
I built a full token scale from 25 to 900 for each color. This gives the team flexibility across light mode, dark mode, hover states, and disabled states without ever going off-brand.
Primary — Electric Blue #1B4FD8
The core of Penny's identity. Used for all primary actions, CTAs, active states, and key UI elements. Blue was chosen deliberately over the greens and purples saturating the fintech space right now. It communicates trust and confidence without feeling like a legacy bank.
Neutral
The backbone of the entire UI. Used for backgrounds, dividers, placeholder text, and disabled states. Neutral keeps everything breathing without competing with the primary palette.
Semantic Colors
Success — Green #22C55E
Reserved exclusively for completed transactions, positive balance changes, and successful states. It never appears decoratively. When a user sees green in Penny, something good just happened.
Warning — Amber #F59E0B
Used for approaching budget limits, pending transactions, and cautionary states. It sits between success and error intentionally, signaling awareness without alarm.
Error — Red #EF4444
Reserved exclusively for failed transactions, destructive actions, and insufficient balance states. Same rule as success. Red means something needs attention, nothing else.
Tokens
Typography
This case study covers the core foundations of Penny's design system. The full system includes component library, iconography, spacing tokens, grid system, motion principles, and dark mode specifications.
Want to see the complete design system? You need to wait for now.
Where the system comes to life
Every decision made in research, define, and ideate comes together here. These are the screens that matter most.
Security built into every interaction
A payment app lives or dies on trust. Every security decision in Penny was made to protect users without making the app feel like a fortress.
One-Minute QR Expiry
Every QR code generated in Penny expires in exactly 60 seconds. A static QR code can be photographed, screenshotted, or recorded and used by anyone at any time. A time-limited one cannot. By the time a hacker tries to use it, it is already dead.
The expiry is communicated visually through a countdown timer ring that changes color as time runs out:
0 to 30 seconds — Green. All clear.
30 to 15 seconds — Amber. Heads up.
15 to 0 seconds — Red. About to expire.
0 seconds — New QR generates.
Users never have to manually refresh. The color system communicates urgency without creating panic.
Biometric-First Authentication
Every transaction in Penny requires biometric confirmation, Face ID or fingerprint, before it goes through. No exceptions. This is not just a security layer, it is a trust signal. When users see that biometric is required, they feel confident that no one else can move their money without their physical presence.
Why not PIN-first: PIN can be observed, guessed, or shared. Biometric cannot. PIN exists in Penny only as a fallback when biometric is unavailable, never as the primary method.
Sensitive Screen Protection
Penny automatically blocks screenshots and screen recordings on any screen containing sensitive information. Balance, card details, OTP, and transaction confirmations are all protected. This decision was made with a specific user segment in mind: users who may not fully understand the risk of accidentally sharing a screenshot containing their OTP or account details. Penny protects them before the mistake happens.
Automatic Session Timeout
If Penny is left open and inactive for 3 minutes, the app locks automatically and requires biometric to re-enter. This protects users who leave their phone unattended without thinking about it. The timeout is set at 3 minutes, long enough to not feel annoying during normal use, short enough to matter if the phone is left on a table.
Instant Card Freeze
If a user suspects their virtual card has been compromised, they can freeze it instantly from the wallet screen. One tap, immediate effect. No need to call support, no need to wait. A frozen card cannot be used for any transaction until the user unfreezes it manually.
What testing taught us
No design survives first contact with real users. Here is what we changed and why.
QR Code Scan Failure Rate
During early testing, 34% of QR payment attempts failed on the first scan. After digging in, two root causes emerged:
18% were caused by low screen brightness combined with a QR code that was too small relative to the screen. The scanning area was not maximized, leaving too much empty space around the code.
16% were caused by surrounding UI elements creating visual noise that interfered with the scanner's ability to isolate the code.
What we changed:
Maximized the QR code to fill as much of the screen as possible
Removed all surrounding decorative elements to eliminate visual noise
Darkened the area outside the QR frame to create a high-contrast border
Set screen brightness automatically to 100% when QR screen opens, reverts to original setting on exit
Scan failure rate dropped to under 4% in follow-up testing.
My QR Code Button Misread
In usability testing, 28% of users tapped the My QR Code button expecting it to open a scanner, not show their own code. The button was positioned in the center of the scan screen, which is where users naturally expect the primary scanning action to be.
What we changed:
Moved My QR Code button from center to top right of screen as a secondary action
Reserved the center exclusively for the camera viewfinder
Renamed label from My QR Code to Show My Code to signal it is passive, not a trigger
Misread rate dropped to 6% after the change.
Recent Contacts on Pay Hub Removed
Analytics showed that 41% of users who landed on the Pay Hub scrolled past Recent Contacts without interacting with it, then had to scroll back up to find the payment method they actually needed.
An additional 22% of users reported in interviews that seeing contacts before payment methods made them feel like they had to choose a person before choosing how to pay.
What we changed:
Removed Recent Contacts from Pay Hub entirely
Contacts now surface contextually inside each payment flow, Send Money, Request Money, and Split Bill
Pay Hub now leads with payment methods only, reducing cognitive load and visual noise
Primary action completion rate on Pay Hub improved by 38% after the change.
Seeing it move changes everything
Static screens show what Penny looks like. The prototype shows how it feels. Not every flow is open to explore, the prototype is focused on the interactions that define what Penny is really about.
What I learned building Penny with team
Every project teaches you something you could not have learned any other way. Here is what Penny taught me.
1. Simplicity is the hardest thing to ship
Penny has a lot of features. The temptation throughout the entire process was to show all of them, all the time. The real design work was not adding things, it was deciding what to hide, what to defer, and what to kill entirely. Every time I removed something from the home screen or collapsed a feature behind More, the product got better. Restraint is a design skill, and it is one I had to actively practice on this project.
2. Security and usability are not opposites
I came into this project assuming security would always create friction. What I found was the opposite. When security is designed well, it actually increases confidence. Users who saw biometric authentication and the QR expiry timer did not feel restricted. They felt protected. The lesson: security features are trust features. Design them like it.
3. Numbers without context are just noise
Early versions of the Insights screen were full of numbers. Totals, averages, percentages everywhere. None of it landed. What users actually needed was not more data, it was a story. This month you spent 23% more on food than last month. That one sentence was more useful than a page of charts. The job of data visualization is not to display information, it is to create understanding.
4. Real constraints make better design
The most interesting design problems on this project were not the obvious ones. They were the edge cases. What happens when a QR code expires mid-payment? What does the split screen look like when one person has not paid after 3 days? What if biometric fails three times in a row? These constraints forced decisions that made the product more real. Designing only for the happy path produces beautiful mockups and broken products.
5. What I would do differently
Two things. First, I would bring real users in earlier, at the wireframe stage rather than waiting for high-fidelity. Several iterations we made in testing could have been caught two stages earlier with a simple paper prototype. Second, I would test with a more diverse group. Most of my testing happened with urban working professionals, which is the target user but also a bubble. Penny is designed for everyone, and I only validated it with a narrow slice of that. Better research diversity would have surfaced problems I did not even know to look for.
6. AI as a design partner, not a shortcut
Using AI throughout this project changed how I work, but not in the way most people assume. AI did not replace thinking, it accelerated it. Wireframes generated by AI gave the team something tangible to react to from day one, compressing ideation from days to hours. Research synthesis that would have taken a full afternoon happened in minutes, leaving more time for the actual thinking. Design system documentation was drafted faster, making handoff conversations with developers cleaner and more precise. The biggest shift was in how we collaborated. When everyone can see a working structure immediately, discussions become more specific and more honest. AI did not make the decisions. It just made sure we spent our time on the decisions that actually mattered.
