Overview
Streamlining the Bills Pay Flow via Suki Shortcut
Role
UX and UI Designer
Platform
Android Mobile App
Duration
2 weeks
Skills
UI & UX Design, Android Mobile, Fintech
Context
About this project
GrowSari is a tech-enabled B2B platform that helps the Philippines' over one million sari-sari stores get better service, assortment, and access to new services — outfitting them with the infrastructure and tools they need to transform from simple FMCG outlets to comprehensive service hubs for grassroots communities.
My Role
As the designer on this task, I was responsible for scoping the problem, identifying the highest-impact change in the user journey, sourcing design inspiration from comparable fintech apps, and delivering final UI designs for handoff — all within a 2-week timeline with limited research access.
Problem
The challenge we set out to solve
The Bills Payment flow needed to be shortened. It is a task users complete at least once a month for each of their customers, aka their sukis. Having to type in the same details every month, on or before the due date of the bill, is repetitive and time-consuming. The goal: make the Bills Payment flow as quick and seamless as possible.
How Might We
How might we streamline the bills payment flow so that users can complete this repetitive task in a more efficient manner?
Research
What we learned before designing
Express Send uses predictive results from a dropdown as the user types — autofilling details of recent contacts without requiring them to be explicitly saved.
Allows users to save favorite billers or bank accounts with the last amount pre-filled — useful for recurring payments of the same amount.
Design Process
Key decisions that shaped the solution
Focused on the single biggest blocker
Rather than redesigning the entire bills payment flow, I identified that the repetitive manual entry of Customer Account Numbers (CANs) was the primary time drain. Solving this one thing would have the highest impact for the least implementation cost.
Chose predictive autofill over saved contacts
Two options were considered: saving customer profiles (like Maya's saved billers) or predictive CAN lookup based on past transactions. We chose predictive lookup to respect data privacy — no explicit consent needed from sukis, no permission flows to build, no data storage risk.
Kept the existing form structure
Rather than rebuilding the form from scratch, the Suki Shortcut was designed as an enhancement layer on top of the existing UI: reducing engineering effort and minimizing regression risk for a flow that was already working.
Final Delivery
What shipped
User types the CAN
Users start by typing in the Customer Account Number. They can also opt to scan the bill using the Scan button to the right of the CAN field.
Predictive CAN suggestions appear
The text field shows matching CANs from previous transactions as the user types — without displaying customer names, to respect data privacy.
Details auto-populate
After selecting the correct CAN, all fields auto-fill. The user only needs to double-check the details and update the Bill Amount for the current billing period.
Reflection
What I learned
When there is no time for research, look at best practices — this approach genuinely helped quicken the process.
When there is no time for research, look at best practices — this approach genuinely helped quicken the process.
The key lesson: the highest-impact UX improvements are often not redesigns — they are targeted interventions on the single biggest blocker in an existing flow.
What I'd Do Differently
With more time, I would have observed actual tindera users completing the bills payment flow in context.