Designing core Scalable UI component cards across verticals for paylist feature
simpl wanted to introduce a paylist feature to simplify recurring payments and increase adoption of their bill payments vertical business.
design a scalable card ui component to work across various bill payment verticals — subscriptions, recharges, bills, etc.
explored core ui cards redesign, handled multiple design iterations, handoff final cards with a mini design system
current feature design
founder level’s decision – from Simpl’s POC: we had the liberty to go all out on visual style and detach the billbox (: now called paylist) feature’s visual identity from the whole app
core product offering
the platform provides coverage across 29 distinct biller categories, encompassing essential services and recurring payments: Broadband Postpaid, Cable TV, DTH, Electricity, FASTag Recharge, Piped Gas, Cylinder Gas, Water Bill, Rental, NCMC, Prepaid Meter, LIC/Insurance, Landline Postpaid, Loans + 15 more.
goal: increase conversion of the paylist feature. current feature metrics — 25.3% overall conversion.
initial iterations
initial iterations for the biller cards covered: name of the operator, reference number, amount due (also urgency–dates), autopay feature, paylist feature (if available), pay now cta, and settings/more options. had made around 40 different iterations of the cards, but still the client wasn’t satisfied – so we had to dive deeper to know what they actually wanted.
more iteration
closest iteration which the client wanted to move forward with: autopay prioritised for customer retention, biller logo made prominent, information about the billing status, add to paylist as secondary cta, 4 touch points on a w180 × h250 card.
final biller card
final biller card with stressed case (all options available): color coding for different urgencies, custom made icons for each category (29), final branding of the paylist feature, consistent main cta across all biller cards.
handling all cases
now we had to handle all the edge cases of the biller cards — 25 cases.
cards on homescreen
paylist surfaced at the top due to business goals – wanted to increase the adoption of the feature. biller cards as designed – two in one viewport.
mini design system for paylist
more screens
that’s a wrap!
introspection & learnings
edge–case first thinking helped uncover layout breakpoints early, reducing design–debt down the line, but it was overwhelming in the beginning
realized i’m not wired for agency–style work, where the process is often client–led and there’s limited room to question or shape the problem
i thrive in setups where i can collaborate closely with teams, talk with real users and contribute beyond just visuals — hence joined newtonschool after working with imagined for a month