B2B
B2B
B2B
Fintech
Fintech
Fintech
New product
New product
New product

Credit cards

Product designer @Circula

Designed our in-house credit card solution, leading the design efforts for the credit card cardholder feature, covering responsive web, iOS, Android, and integrations with Google and Apple Pay, along with email and in-app notification design. 

  • Platforms: Native mobile apps and supported web app.

  • Skills: Research, user interviews, wireframes, usability tests and prototypes.

  • Tools: Figma, Userbrain, Jira and Asana.

Context

Overview

The company previously offered credit cards through a third-party provider and their associated app. However, as we expanded into serving medium-sized corporate clients with unique needs, relying solely on third-party solutions limited our ability to integrate fully and tailor the user experience. To address this, we made the strategic decision to develop an in-house credit card solution. This approach allows us to enhance integration capabilities and customize features to better meet the specific requirements of our corporate clientele, ultimately improving the overall user experience.

My role

Initially, I joined the project as a Product Designer focused on mobile design. However, over time, I took on the role of leading the design efforts for the credit card cardholder feature, covering responsive web, iOS, Android, and integrations with Google and Apple Pay, along with email and notification design. This project has been the most challenging and fulfilling experience of my career, requiring extensive research, usability testing, and close collaboration with the product, development, and QA teams. Gathering early feedback from developers was essential to ensure smooth implementation and handoff, as this is a huge topic.

Process

When the project began, our primary focus was on web designs, which another team member was already tackling. So, I jumped into the mobile environment, eager to craft seamless experiences on smaller screens. This involved delving into existing web flows, researching competitors, and testing various mobile approaches to see what resonated best with users.

After experimenting with different concepts and gathering insights, it was time to collaborate closely with our development team. Their feedback was instrumental in shaping our MVP and ensuring feasibility. Once we had aligned with all stakeholders, I polished up the designs and delivered high-fidelity designs and added prototypes to showcase key interactions.

Throughout development, I remained a supportive presence, providing guidance and ensuring alignment with our vision. Now that the project is coming to life, we're eagerly awaiting user feedback to further refine and enhance our product.

Ideating and testing

Since the web designs were already in progress, we could use some learning already for mobile too, mainly about credit cards use, needed information and strict requirements. My primary focus was on testing various approaches and flows to ensure optimal usability and functionality across our mobile platforms.

12

12

prototypes

25

25

participants

Tests focus:

  • How users perceive company credit cards and main actions.

  • Test different flows and UI to ensure optimal usability and functionality.

  • Evaluate minimal version we would need to provide for the MVP version to consider a good usability.

User insights

MVP Focus

In developing the MVP, we prioritized simplicity while ensuring optimal usability. We streamlined features to their essentials, creating an intuitive user experience without unnecessary complexities. The goal was to deliver core functionalities that met user needs efficiently.

Card activation

To ensure security, users must complete a quick security check before accessing our credit cards. Currently, we're using 2FA via SMS code, which may not be the fastest method. However, we've streamlined the process by automatically prefilling the SMS code. For physical cards, users also need to provide the last four digits of the card.

Cardholder

Everything users need to know about their cards is right here. From card details to quick actions, limits, spending, and transactions, it's all easily accessible in one place.

Quick actions

Find all the essential actions conveniently grouped together for easy access. Plus, each card comes with its own set of quick actions tailored to users needs.

Card limit

Quickly grasp the available balance, track spending, and stay informed about card limits—all at a glance! Plus, we've added visual cues to alert you when your credit card balance is running low.

Transactions

We've created a transaction list where users can quickly spot their purchases by merchant name, date, and amount. Plus, it's easy to see which card was used, especially handy for employees with multiple cards.

Notifications

We've added handy notifications for purchases, making it easier to add receipts and speeding the expense submission process. Plus, you can choose to turn them on or off in your settings for added control.

User flows

Below, you'll find a detailed breakdown of the primary user flows, illustrating how users navigate through the app's features and interact with its various functionalities. By comprehensively understanding these flows, we can optimize the user experience to meet and exceed our users' needs and expectations effectively.

Adding phone number

Display card details

Locking card

Terminate card

Google and Apple Pay

With Google and Apple Pay integration, users can seamlessly make payments using their preferred mobile payment platforms, eliminating the need to carry physical cards or manually input payment details. This streamlined process not only enhances convenience but also offers a secure and efficient payment solution, ultimately transforming the user experience into one that is effortless and modern, impacting a lot employees with high use of company's credit card.

Enhanced Security with Two-Factor Authentication (2FA)

To meet Apple Pay requirements and ensure robust security, we implemented two authentication methods: SMS and email verification. This approach guarantees accessibility for all users across desktop and mobile platforms.
Key design decisions:
• SMS as primary method: Enables auto-complete, streamlining the user experience.
• Email as secondary option: Provides flexibility for user preferences.
• Future-proofing: Laid groundwork for biometric verification in subsequent iterations.

Enhanced Password Security with User-Friendly Guidelines

We implemented a proactive approach to password security, aligning with Apple Pay's stringent requirements while improving user experience. This user-centric design not only meets Apple Pay's strict security standards but also streamlines the account creation process, reducing friction and potential user drop-off.
Key improvements:
• Visible password criteria: Displayed requirements upfront, allowing users to create compliant passwords on the first attempt.
• Real-time feedback: Implemented instant validation to guide users as they type.
• Frustration reduction: Eliminated post-submission errors by providing clear guidelines from the start.

Future improvements

As we crafted the MVP version, we brainstormed numerous potential ideas for new features and enhancements to improve the credit card experience. Currently, we're in the process of launching this feature and gathering user feedback to pinpoint areas for enhancement. However, one improvement stands out: enabling users to request credit cards directly within the app.

Requesting credit cards in app

For the MVP, we made the strategic decision to exclude this idea from scope due to the potential complexity it would introduce to the project. Currently, when employees need a new card, they must coordinate with their managers/supervisors outside of Circula. What requires more effort, increases the chances of miscommunication, losing track of the request and issuing wrong cards.

In the proposed solution, employees will have the capability to request new cards directly from the cardholder section. They can specify the type of card, card limit, and reason for the request. Supervisors will then receive these requests with all necessary information to approve or reject them, streamlining the process and reducing potential errors.

Biometric and face recognition

Introducing biometric and face recognition adds an extra layer of security and convenience for our users. With these features, users can quickly and securely access their credit card details without the need to enter verification codes. It streamlines the login process, making it faster and more intuitive, while also enhancing the overall security of their accounts.

WORK

WORK