Designing a scalable, API-driven onboarding experience for first-time credit card users
Introducation
We interact daily with several apps, such as banking, shopping, entertainment, and social media. And with them comes a flood of notifications - a reminder here, an offer there, an update lost somewhere in between. Sometimes, important alerts — like a “Reward earned”, a “Credit score” change, or a “Payment due” unnoticed, buried under the noise.
Other times, we remember seeing a notification… but when we need it later, it’s gone.
No way to revisit it, no way to act on it.
About ZET
A customer-facing app offering financial tools and services such as the ZET Credit Card, CIBIL Builder Membership, UPI features, and other smart personal finance products aimed at helping users build and improve their financial health.
Current Problem
Currently, the ZET app does not have a dedicated Notification Center, making it difficult for users to track important updates related to their earnings, credit score, rewards, and transactions from different products available in the application. Since notifications appear only as push messages, users often:
👉 Miss critical updates
👉 Have no way to revisit past notifications
👉 Don't know about rewards or earnings updates
Goals
Currently, the ZET app does not have a dedicated Notification Center, making it difficult for users to track important updates related to their earnings, credit score, rewards, and transactions from different products available in the application. Since notifications appear only as push messages, users often:
👉 Miss critical updates
👉 Have no way to revisit past notifications
👉 Don't know about rewards or earnings updates
Focus Metrics for Notification Center
A Quick Peek at the Solution
Currently, the ZET app does not have a dedicated Notification Center, making it difficult for users to track important updates related to their earnings, credit score, rewards, and transactions from different products available in the application. Since notifications appear only as push messages, users often:
Learning from the World (Desk Research)
I have studied leading apps CRED, Google Pay, FinTech giants - and found patterns that worked: clear categories, strong actionability, and timeless access to history. These insights shaped our approach to ZET's solution.
Mapping the Journey (Flow & Wireframes)
Next, I crafted a detailed user flow. Where does a user spot the bell? How do they browse? How should unread and expired messages feel? We sketched wireframes focusing on simplicity, clarity, and control at every touchpoint.
Giving it a Face (UI Components)
Given the tight deadline, I decided to keep the design simple, clear, and highly functional. I structured the layout, defined categories with corresponding colors and icons, and created different variants for the card components to maintain consistency and flexibility across the design.
Four major categories
I differentiate notification states to maintain clarity and encourage timely actions.
Notification Component Card States
Differentiated notification states to maintain clarity & encourage timely actions.
UI Elements & Iconography
Icons & colors make navigation intuitive, reducing cognitive load for users
Initial user interface
Created early wireframes to map user flows and core interactions, focusing on simplicity and clarity before moving to high-fidelity designs for stakeholder presentation.
Final Solution
I created a visually driven presentation that took stakeholders on a journey from the user's problem, through my research, to bringing the screens to life. Everyone, including the founders and product managers, contributed their opinions. Additionally, adding a button to the notification card allows users to take action directly from the notification screen.
Also, stakeholders decided to remove the category feature for this first phase.
