Cridible: Simplifying Credit Card Bill Payments for the US Market: a UI/UX case study
--
Project Overview
What is Credible
Credible is a mobile app designed to simplify and streamline the credit card bill payment process. It acts as a one-stop solution for users to easily monitor their credit card dues, schedule payments, receive timely reminders, and efficiently manage their financial health. Credible aims to redefine the credit card payment experience, making it less confusing, more user-friendly, and ultimately beneficial for users’ credit scores.
Duration
3 days
Market
Credible is specifically designed for the U.S. market, with a target user base ranging from 18 to 50 years old.
Platform
Mobile application
Problem statement
Managing credit card bills is a critical part of financial responsibility, yet it can be challenging and confusing for many individuals. The current payment process often involves logging into multiple accounts, remembering various due dates, and navigating through complex portals. This complexity often leads to missed deadlines, late payment fees, and negative impacts on the user’s credit score. The challenge is to design a user-friendly solution that simplifies this process, offers an intuitive interface, and provides helpful features such as bill monitoring and timely payment reminders.
Goals
- Simplify the Payment Process: Reduce the complexity associated with credit card bill payments by offering a consolidated platform for managing and paying bills.
- Efficient Bill Monitoring: Provide a comprehensive overview of all credit card bills, their due dates, and payment status, making it easier for users to manage their financial obligations.
- Timely Reminders: Implement a reliable notification system that alerts users about upcoming payment deadlines, helping them avoid late fees and negative impacts on their credit score.
📹 The Prototype (Incase you wanna skim through)
🔎 Research
This phase aims to uncover user pain points, needs, and the overall landscape of existing bill management systems.
1. User interviews
Given the short timeframe of three days, I managed to conduct in-depth interviews with five participants, providing us with valuable qualitative insights. These participants represented a diverse cross-section of our target audience, falling within the age range of 18 to 50, and varying in their levels of experience and comfort with digital financial tools.
I asked questions about their current methods of managing and paying credit card bills, their experiences with existing solutions, pain points in the current process, and features they would find useful in a dedicated bill management app.
Questions:
- Can you describe your current process for paying your credit card bills?
- How do you manage if you have multiple credit cards from different banks?
- How does managing multiple portals for bill payments affect your experience?
- How do you keep track of your bill payment due dates?
- Have you ever missed a payment deadline? If so, what were the reasons?
- What features or functionalities would you like to see in a credit card bill management app?
2. Pinpoints:
- Multiple Payment Portals: All participants noted the frustration of having to navigate multiple payment portals if they use more than one credit card. They expressed a desire for a consolidated platform to manage and pay all their bills.
- Remembering Due Dates: Participants mentioned the difficulty of keeping track of various payment deadlines, which often results in late payments and associated penalties.
- Desire for Automation: Participants expressed interest in features that could automate or simplify the payment process, such as reminders or auto-payment features.
3. Competitor analysis
The selected competitors, Mint and Prism, are widely used in the U.S. market and offer a range of features for managing finances and paying bills. However, each app comes with its own limitations: Mint’s primary focus is not on credit card bill payments and lacks a streamlined process for bill payment, whereas Prism has limited auto-pay features and some concerns about data security.
Regarding visual design, it’s a bit subjective, but here are some observations:
- Mint’s user interface is multifaceted and feature-rich, reflecting its broad suite of financial management tools. Its green, white, and grey colour scheme communicates a sense of trust and professionalism, while its clean typography enhances readability.
- On the other hand, Prism boasts a streamlined and straightforward interface, focusing on bill tracking and payments. Its use of vibrant colours and biller logos adds a personalised touch, and its bold, large-font typography makes crucial information like bill amounts and due dates stand out.
4. Market Trends
As part of the secondary research, I reviewed various reports and articles to understand the evolving trends in the financial technology (fintech) sector, specifically focusing on credit card usage and bill payment behaviours.
- Growing Digitisation: A Federal Reserve report indicates that 43% of smartphone owners with a bank account are using mobile banking. This suggests a growing user base for a mobile-first credit card bill management solution like Credible.
- Demand for Specialised Financial Apps: While there’s an abundance of general financial management apps, there’s a growing demand for specialised solutions targeting specific areas like credit card bill management. This demand gap provides a promising opportunity for Credible.
- User-Centric Solutions: Users value simplicity, transparency, and convenience in their financial apps. The design of Credible needs to align with these user preferences to ensure its adoption and success.
🧑💻 Ideate
The ideation phase for Credible was all about taking the insights I gathered during the research phase and converting them into actionable solutions. I started with designing a user flow that encapsulated the simplified and streamlined bill payment process we envisioned for our users. The user flow was created with a clear focus on reducing complexity and making the bill payment journey intuitive and efficient.
1. User flow
I designed a streamlined user flow that makes credit card bill payments a seamless experience for the users. Starting from opening the Credible app, users land on a clear and intuitive homepage showcasing their linked cards, upcoming bills, and due dates.
Adding a card :
Adding a card manually into the Credible app is a simple and intuitive process designed to make the onboarding of new cards as straightforward as possible.
The introduction of the “Auto Pay” feature in the Credible app is a game-changer for the users who prioritise convenience and timely payments. This feature aims to automate the process of paying credit card bills, thus preventing late payments and potential damage to the user’s credit score.
Single card payment :
Multiple card payment ( Pay together ):
The “Pay Together” feature is an innovative solution designed to make the bill payment process even more streamlined for our users. This feature addresses one of the key pain points uncovered during my research — the need for simplicity and efficiency in managing and paying multiple credit card bills. With “Pay Together”, users have the ability to pay all their credit card bills in one go.
2. Sketches
Sketching is the next step in my design process for Credible. At this stage, I put pen to paper to start visualising the ideas and user flows. These sketches act as the initial blueprints for the app, laying the foundation for the eventual interface.
3. Low-Fidelity Wireframes
In the ideation phase of the Credible project, creating Low-fidelity wireframes was a key step in transforming the abstract ideas into more concrete, visualised concepts. This was a crucial part of the design process as it helped to define the structure, layout, and functionality of the Credible platform.
4. Lets talk design
In the design phase of the Credible app, I leverage the insights gathered from my research phase and the structure laid down during the ideation and sketching phases to craft a visually engaging and easy-to-use app interface. This phase is where I worked on the high-fidelity design of the app and turn my ideas into a concrete, tangible design that users can interact with.
The home screen
The home screen of the Credible app serves as the central hub for users, providing a quick and efficient overview of their credit card dues, offers, and other essential features.
Starting with a clean, clutter-free layout, the home screen prioritises displaying the dues of different cards that the user has linked to the app. Each card is represented with its logo for easy identification, and next to it, the total amount due and the due date are clearly indicated.
Starting with a clean, clutter-free layout, the home screen prioritises displaying the dues of different cards that the user has linked to the app. Each card is represented with its logo for easy identification, and next to it, the total amount due and the due date are clearly indicated.
The Pay bill screen
The “Pay Bill” screen in the Credible app serves as the primary platform for users to manage their credit card bills. This design focuses on creating a hassle-free, intuitive bill payment process.
The screen begins with the ‘Add Manually’ option that lets users add their credit cards to the app manually. Users are prompted to fill in essential details like card number and expiry date. After successful validation of these details, the card gets added to the user’s list of cards within the app.
To facilitate quicker and more efficient bill payments, I’ve introduced the ‘Pay Together’ feature. This feature allows users to pay off the total due amount from all their cards in one go. This consolidated payment feature not only speeds up the process but also ensures that no payment is accidentally overlooked.
The autopay function
In response to the demands of the US users for a more automated and worry-free payment experience, I’ve integrated an ‘AutoPay’ feature into the Credible app. This feature aims to simplify bill management and ensure timely payments, thus avoiding late fees and potential credit score impacts.
Once a card is added successfully, a toggle switch for AutoPay appears on the screen. Users can easily enable AutoPay by simply switching this toggle on. A user-friendly interface guides the users to set a preferred date for the automatic payment each month.
With AutoPay, users can set their bill payments on autopilot, ensuring that all their dues are paid on time, every time, without fail. This feature significantly simplifies credit card bill management, especially for users with multiple cards, and contributes to a smoother, more seamless user experience.
I designed Credible with flexibility in mind. Users can easily disable the AutoPay feature at any time through their profile. They simply go to AutoPay settings and toggle off AutoPay for any card they choose. This way, I ensure that users always have full control over their bill payments, adjusting as their financial situations or preferences change.
Bill monitoring and payment notifier
For effective bill monitoring and payment reminders, Credible displays due dates and amounts right on the user’s dashboard. To ensure users don’t miss payments, daily in-app notifications act as consistent reminders. With a user’s phone number and email linked, they also receive reminders through WhatsApp and email. Furthermore, a dedicated notification section within the app archives all alerts, making it easy for users to revisit any missed reminders.
Simplified payment process
In Credible, I simplified the payment process by consolidating all credit card details and dues in one interface. The ‘Pay Together’ feature allows users to settle all their dues with one click. I also integrated various payment methods and automated the process to ensure a fast, seamless bill payment experience.
Security
In Credible, I prioritised security by encrypting sensitive data like card numbers and expiry dates. We didn’t request CVV during card addition for extra protection. These measures ensure that users’ financial information is secure, providing confidence in our app for their credit card bill payments.
Thank you guys for reading, it has been a very educational and fun project for me personally. I really hope y’all enjoyed it as well and also found something useful.
You can connect with me on LinkedIn here.
Fun fact: if you hold down the clap button, you can give up to 50 claps! Try it! 😉😬
