Factorial Cards in digital wallets

Company

Factorial HR

Date

Jan 23 - May 23

Role

I worked on this project as a Product Designer and Product Manager. Main areas of responsibility:

  • Research and Discovery (interviews with card providers, cost of opportunity and ROI)

  • Management (scoping workload into phased deliverable milestones, weekly reviews)

  • Design (end to end experience, align requirements with teams involved)

  • Prototyping (user testing and validation, communication with stakeholders)

  • QA (ensuring 1:1 quality with designs through user story acceptance criteria)

Summary

Building upon the success of our card-first expense management solution, this release emerged as a strategic response to the evolving needs of our users.

We identified a pain point customers had been reporting in interviews and to their Account Managers: In the manual process of spending, they had to save receipts and upload them. This was adding friction in the spending lifecycle since they needed to enter all information manually (expense category, vendor name, currency, amount, document date and type, payment method, etc.).

Because of this, some customers were churning due to competitors offering this feature. For them, the ability to make payments through digital wallets was a decisive factor

This prompted us to enhance the user experience. By seamlessly integrating Factorial cards with digital wallets, we successfully addressed this challenge and provided a more efficient solution for automated spending.

Challenge

Integrating Factorial credit cards into digital wallets was tough, posing a learning curve for the entire team. To make things trickier, we had limited resources on our side and our cards provider didn't provide the support we hoped for, leaving us to figure out a lot on our own.

Moreover, while getting set up with Google Wallet was relatively easy, Apple Pay threw some unexpected hurdles our way, adding more time to the process.

Unfortunately, we couldn't stick to our original timeline because we were missing engineers in the team, and we had to keep at it for an extra quarter. It was a tough ride, but overcoming these challenges highlighted our team's determination in delivering a user-friendly solution for our expense management product.

Solution

Our solution journey for integrating Factorial cards into digital wallets was largely about handling technical aspects. However, before getting the cards into digital wallets, we first had to bring them into our mobile app. This part was design-heavy, requiring close teamwork with the mobile team for a seamless look and feel. To make things efficient, I prepared an MVP with only the essential functionalities. This helped us stay focused and laid the foundations for a solid and user-friendly solution.


Click on the image to see the Figma file


Research

  • Business context: Customer and market inputs - Closed lost deals, churn reasons, MRR impacted

  • User pain points: Need to use mobile to pay in POS (Points of sale)

  • Competitive audit: PLEO, Payhawk, OKTicket, Spendesk, Revolut Business, Captio

Strategy

  • Technical study: Read functional requirements provided by our cards provider to understand implementation and design constraints

  • Product Requirements: Gather customer and market input to justify what and why we were doing; formulate hypothesis and success metrics; define design and functional requirements from the technical study together with engineers

  • Product alignment: Kick-off and weekly reviews to align the team on the status of the work

Ideation

  • Diagrams and user journeys: Understand how the end to end solution should work

  • Wireframes: First representations of the solution for fast validation

  • Proof of concept and prototype: A usable prototype to validate with users with final look and feel

Validation

  • Stakeholder reviews: Sales cycle (Account executives and managers), C-Level

  • Design critiques: PDs, PMs, Engineers

  • User testing: Small groups of users (promoters and detractors


Phases (Scoped deliverables)

Phase 1: Sign Apple Pay & Google Pay contracts

In this phase, we needed stakeholders to sign the contracts to establish legal relationships with Apple and Google Pay services, to ensure compliance with security, privacy, and integration standards. These agreements outlined technical specifications, financial arrangements, and branding guidelines, providing Factorial access to the platforms while committing to uphold standards set by Apple and Google.

Phase 2: Cards Art Requirements

During this phase, I started to work on the card art requirements, filling a template to provide clarity on what card features should look like once in the wallet apps. These design requirements included the card artwork, card icon, background and foreground colors, label color, and card name.

I also ensured to provide contact information and terms and conditions information, including contact name, customer service phone number, contact website, terms and conditions file, and url privacy policy.

Phase 3: Bringing cards to Mobile app

In phase three, my focus was on designing how Factorial cards would work into the mobile app. While this phase had its limitations, as users could only make online purchases by copying the card number and manually entering it on the retailer's website until cards were integrated with wallets, it marked a necessary initial step for the full integration. This design-centric phase laid the groundwork for the final wallet integration.

Phase 4: Wallet integration & in-app visibility

This phase consisted purely on the technical implementation to integrate cards with digital wallets. This involved intricate coding, system configurations, and ensuring compatibility between our platform and the digital wallets infrastructure.

Once successfully integrated, we needed to ensure we provided ways to make the wallets feature visible in-app, through a splash screen announcing the release, and the buttons to add card to wallet, among others.


Some features

Cards section

I introduced a dedicated space within the app for users to easily view their active cards. To streamline the user experience, I chose to display only active cards, considering that managers were typically responsible for issuing cards to their employees. This helped us reduce scope by only showing cards eligible to be added to digital wallets (active cards).

One challenge I encountered in the early phases was the limited discoverability of this section, mainly due to constraints in the existing information architecture that I needed to adhere to. Despite this constraint, the Cards Section provided a convenient hub for users to manage and keep track of their active cards within the app.

Card details

I designed a detailed yet simple view offering users a digital representation of their cards within the app. This space provided users with three sections: a card preview, a section to trigger actions on the card, and a space to check the current amount left to spend from their card limit.

Card actions

In the card details, users could perform various actions like viewing card information (card number, expiry date and CVV), and visualize the amount left to spend from their card limit, a parameter set up by their managers in advance.

A limitation derived from compliance reasons with our cards provider API, was that users could not view details of their physical cards, only the PIN number. In the virtual cards, users could show details, and copy card number.

Card status

Additionally, users could temporarily freeze or unfreeze their card, enhancing control and security over their financial transactions, something managers could do as well.

Splash screen

To increase visibility and comply with Apple requirements, I designed a splash screen that presented users with the new possibility to add their cards to their digital wallet. Users with an active card could now effortlessly add their cards into their wallet, to make frictionless payments in a matter of seconds.

Business impact

Integrating Factorial cards into digital wallets was a game-changer. It helped us boost our monthly used unique tokenized cards from 7 to 390 in a span of around 11 months. This release solved a big problem: customers were leaving because competitors offered digital wallet payments, and now we had a solution. It not only kept our existing users happy and helped us revert churn, but also proved to be a sales enabler, making our solution more appealing to new customers.

We revamped our subscription plans, allowing us to charge 8 EUR in the Business plan and 12 EUR in the Enterprise plan for each card issued, annually. This move not only helped us increase revenue faster but also made Factorial a more appealing choice in the expense management industry.

Unique Cards Used With Both

Unique Cards Used With Both


Unique Cards Used With Apple Pay

Unique Cards Used With Apple Pay


Unique Cards Used With Both

Factorial Cards in digital wallets

Company

Factorial HR

Date

Jan 23 - May 23

Role

I worked on this project as a Product Designer and Product Manager. Main areas of responsibility:

  • Research and Discovery (interviews with card providers, cost of opportunity and ROI)

  • Management (scoping workload into phased deliverable milestones, weekly reviews)

  • Design (end to end experience, align requirements with teams involved)

  • Prototyping (user testing and validation, communication with stakeholders)

  • QA (ensuring 1:1 quality with designs through user story acceptance criteria)

Summary

Building upon the success of our card-first expense management solution, this release emerged as a strategic response to the evolving needs of our users.

We identified a pain point customers had been reporting in interviews and to their Account Managers: In the manual process of spending, they had to save receipts and upload them. This was adding friction in the spending lifecycle since they needed to enter all information manually (expense category, vendor name, currency, amount, document date and type, payment method, etc.).

Because of this, some customers were churning due to competitors offering this feature. For them, the ability to make payments through digital wallets was a decisive factor

This prompted us to enhance the user experience. By seamlessly integrating Factorial cards with digital wallets, we successfully addressed this challenge and provided a more efficient solution for automated spending.

Challenge

Integrating Factorial credit cards into digital wallets was tough, posing a learning curve for the entire team. To make things trickier, we had limited resources on our side and our cards provider didn't provide the support we hoped for, leaving us to figure out a lot on our own.

Moreover, while getting set up with Google Wallet was relatively easy, Apple Pay threw some unexpected hurdles our way, adding more time to the process.

Unfortunately, we couldn't stick to our original timeline because we were missing engineers in the team, and we had to keep at it for an extra quarter. It was a tough ride, but overcoming these challenges highlighted our team's determination in delivering a user-friendly solution for our expense management product.

Solution

Our solution journey for integrating Factorial cards into digital wallets was largely about handling technical aspects. However, before getting the cards into digital wallets, we first had to bring them into our mobile app. This part was design-heavy, requiring close teamwork with the mobile team for a seamless look and feel. To make things efficient, I prepared an MVP with only the essential functionalities. This helped us stay focused and laid the foundations for a solid and user-friendly solution.


Click on the image to see the Figma file


Research

  • Business context: Customer and market inputs - Closed lost deals, churn reasons, MRR impacted

  • User pain points: Need to use mobile to pay in POS (Points of sale)

  • Competitive audit: PLEO, Payhawk, OKTicket, Spendesk, Revolut Business, Captio

Strategy

  • Technical study: Read functional requirements provided by our cards provider to understand implementation and design constraints

  • Product Requirements: Gather customer and market input to justify what and why we were doing; formulate hypothesis and success metrics; define design and functional requirements from the technical study together with engineers

  • Product alignment: Kick-off and weekly reviews to align the team on the status of the work

Ideation

  • Diagrams and user journeys: Understand how the end to end solution should work

  • Wireframes: First representations of the solution for fast validation

  • Proof of concept and prototype: A usable prototype to validate with users with final look and feel

Validation

  • Stakeholder reviews: Sales cycle (Account executives and managers), C-Level

  • Design critiques: PDs, PMs, Engineers

  • User testing: Small groups of users (promoters and detractors


Phases (Scoped deliverables)

Phase 1: Sign Apple Pay & Google Pay contracts

In this phase, we needed stakeholders to sign the contracts to establish legal relationships with Apple and Google Pay services, to ensure compliance with security, privacy, and integration standards. These agreements outlined technical specifications, financial arrangements, and branding guidelines, providing Factorial access to the platforms while committing to uphold standards set by Apple and Google.

Phase 2: Cards Art Requirements

During this phase, I started to work on the card art requirements, filling a template to provide clarity on what card features should look like once in the wallet apps. These design requirements included the card artwork, card icon, background and foreground colors, label color, and card name.

I also ensured to provide contact information and terms and conditions information, including contact name, customer service phone number, contact website, terms and conditions file, and url privacy policy.

Phase 3: Bringing cards to Mobile app

In phase three, my focus was on designing how Factorial cards would work into the mobile app. While this phase had its limitations, as users could only make online purchases by copying the card number and manually entering it on the retailer's website until cards were integrated with wallets, it marked a necessary initial step for the full integration. This design-centric phase laid the groundwork for the final wallet integration.

Phase 4: Wallet integration & in-app visibility

This phase consisted purely on the technical implementation to integrate cards with digital wallets. This involved intricate coding, system configurations, and ensuring compatibility between our platform and the digital wallets infrastructure.

Once successfully integrated, we needed to ensure we provided ways to make the wallets feature visible in-app, through a splash screen announcing the release, and the buttons to add card to wallet, among others.


Some features

Cards section

I introduced a dedicated space within the app for users to easily view their active cards. To streamline the user experience, I chose to display only active cards, considering that managers were typically responsible for issuing cards to their employees. This helped us reduce scope by only showing cards eligible to be added to digital wallets (active cards).

One challenge I encountered in the early phases was the limited discoverability of this section, mainly due to constraints in the existing information architecture that I needed to adhere to. Despite this constraint, the Cards Section provided a convenient hub for users to manage and keep track of their active cards within the app.

Card details

I designed a detailed yet simple view offering users a digital representation of their cards within the app. This space provided users with three sections: a card preview, a section to trigger actions on the card, and a space to check the current amount left to spend from their card limit.

Card actions

In the card details, users could perform various actions like viewing card information (card number, expiry date and CVV), and visualize the amount left to spend from their card limit, a parameter set up by their managers in advance.

A limitation derived from compliance reasons with our cards provider API, was that users could not view details of their physical cards, only the PIN number. In the virtual cards, users could show details, and copy card number.

Card status

Additionally, users could temporarily freeze or unfreeze their card, enhancing control and security over their financial transactions, something managers could do as well.

Splash screen

To increase visibility and comply with Apple requirements, I designed a splash screen that presented users with the new possibility to add their cards to their digital wallet. Users with an active card could now effortlessly add their cards into their wallet, to make frictionless payments in a matter of seconds.

Business impact

Integrating Factorial cards into digital wallets was a game-changer. It helped us boost our monthly used unique tokenized cards from 7 to 390 in a span of around 11 months. This release solved a big problem: customers were leaving because competitors offered digital wallet payments, and now we had a solution. It not only kept our existing users happy and helped us revert churn, but also proved to be a sales enabler, making our solution more appealing to new customers.

We revamped our subscription plans, allowing us to charge 8 EUR in the Business plan and 12 EUR in the Enterprise plan for each card issued, annually. This move not only helped us increase revenue faster but also made Factorial a more appealing choice in the expense management industry.

Unique Cards Used With Both

Unique Cards Used With Both


Unique Cards Used With Apple Pay

Unique Cards Used With Apple Pay


Unique Cards Used With Both

Factorial Cards in digital wallets

Company

Factorial HR

Date

Jan 23 - May 23

Role

I worked on this project as a Product Designer and Product Manager. Main areas of responsibility:

  • Research and Discovery (interviews with card providers, cost of opportunity and ROI)

  • Management (scoping workload into phased deliverable milestones, weekly reviews)

  • Design (end to end experience, align requirements with teams involved)

  • Prototyping (user testing and validation, communication with stakeholders)

  • QA (ensuring 1:1 quality with designs through user story acceptance criteria)

Summary

Building upon the success of our card-first expense management solution, this release emerged as a strategic response to the evolving needs of our users.

We identified a pain point customers had been reporting in interviews and to their Account Managers: In the manual process of spending, they had to save receipts and upload them. This was adding friction in the spending lifecycle since they needed to enter all information manually (expense category, vendor name, currency, amount, document date and type, payment method, etc.).

Because of this, some customers were churning due to competitors offering this feature. For them, the ability to make payments through digital wallets was a decisive factor

This prompted us to enhance the user experience. By seamlessly integrating Factorial cards with digital wallets, we successfully addressed this challenge and provided a more efficient solution for automated spending.

Challenge

Integrating Factorial credit cards into digital wallets was tough, posing a learning curve for the entire team. To make things trickier, we had limited resources on our side and our cards provider didn't provide the support we hoped for, leaving us to figure out a lot on our own.

Moreover, while getting set up with Google Wallet was relatively easy, Apple Pay threw some unexpected hurdles our way, adding more time to the process.

Unfortunately, we couldn't stick to our original timeline because we were missing engineers in the team, and we had to keep at it for an extra quarter. It was a tough ride, but overcoming these challenges highlighted our team's determination in delivering a user-friendly solution for our expense management product.

Solution

Our solution journey for integrating Factorial cards into digital wallets was largely about handling technical aspects. However, before getting the cards into digital wallets, we first had to bring them into our mobile app. This part was design-heavy, requiring close teamwork with the mobile team for a seamless look and feel. To make things efficient, I prepared an MVP with only the essential functionalities. This helped us stay focused and laid the foundations for a solid and user-friendly solution.


Click on the image to see the Figma file


Research

  • Business context: Customer and market inputs - Closed lost deals, churn reasons, MRR impacted

  • User pain points: Need to use mobile to pay in POS (Points of sale)

  • Competitive audit: PLEO, Payhawk, OKTicket, Spendesk, Revolut Business, Captio

Strategy

  • Technical study: Read functional requirements provided by our cards provider to understand implementation and design constraints

  • Product Requirements: Gather customer and market input to justify what and why we were doing; formulate hypothesis and success metrics; define design and functional requirements from the technical study together with engineers

  • Product alignment: Kick-off and weekly reviews to align the team on the status of the work

Ideation

  • Diagrams and user journeys: Understand how the end to end solution should work

  • Wireframes: First representations of the solution for fast validation

  • Proof of concept and prototype: A usable prototype to validate with users with final look and feel

Validation

  • Stakeholder reviews: Sales cycle (Account executives and managers), C-Level

  • Design critiques: PDs, PMs, Engineers

  • User testing: Small groups of users (promoters and detractors


Phases (Scoped deliverables)

Phase 1: Sign Apple Pay & Google Pay contracts

In this phase, we needed stakeholders to sign the contracts to establish legal relationships with Apple and Google Pay services, to ensure compliance with security, privacy, and integration standards. These agreements outlined technical specifications, financial arrangements, and branding guidelines, providing Factorial access to the platforms while committing to uphold standards set by Apple and Google.

Phase 2: Cards Art Requirements

During this phase, I started to work on the card art requirements, filling a template to provide clarity on what card features should look like once in the wallet apps. These design requirements included the card artwork, card icon, background and foreground colors, label color, and card name.

I also ensured to provide contact information and terms and conditions information, including contact name, customer service phone number, contact website, terms and conditions file, and url privacy policy.

Phase 3: Bringing cards to Mobile app

In phase three, my focus was on designing how Factorial cards would work into the mobile app. While this phase had its limitations, as users could only make online purchases by copying the card number and manually entering it on the retailer's website until cards were integrated with wallets, it marked a necessary initial step for the full integration. This design-centric phase laid the groundwork for the final wallet integration.

Phase 4: Wallet integration & in-app visibility

This phase consisted purely on the technical implementation to integrate cards with digital wallets. This involved intricate coding, system configurations, and ensuring compatibility between our platform and the digital wallets infrastructure.

Once successfully integrated, we needed to ensure we provided ways to make the wallets feature visible in-app, through a splash screen announcing the release, and the buttons to add card to wallet, among others.


Some features

Cards section

I introduced a dedicated space within the app for users to easily view their active cards. To streamline the user experience, I chose to display only active cards, considering that managers were typically responsible for issuing cards to their employees. This helped us reduce scope by only showing cards eligible to be added to digital wallets (active cards).

One challenge I encountered in the early phases was the limited discoverability of this section, mainly due to constraints in the existing information architecture that I needed to adhere to. Despite this constraint, the Cards Section provided a convenient hub for users to manage and keep track of their active cards within the app.

Card details

I designed a detailed yet simple view offering users a digital representation of their cards within the app. This space provided users with three sections: a card preview, a section to trigger actions on the card, and a space to check the current amount left to spend from their card limit.

Card actions

In the card details, users could perform various actions like viewing card information (card number, expiry date and CVV), and visualize the amount left to spend from their card limit, a parameter set up by their managers in advance.

A limitation derived from compliance reasons with our cards provider API, was that users could not view details of their physical cards, only the PIN number. In the virtual cards, users could show details, and copy card number.

Card status

Additionally, users could temporarily freeze or unfreeze their card, enhancing control and security over their financial transactions, something managers could do as well.

Splash screen

To increase visibility and comply with Apple requirements, I designed a splash screen that presented users with the new possibility to add their cards to their digital wallet. Users with an active card could now effortlessly add their cards into their wallet, to make frictionless payments in a matter of seconds.

Business impact

Integrating Factorial cards into digital wallets was a game-changer. It helped us boost our monthly used unique tokenized cards from 7 to 390 in a span of around 11 months. This release solved a big problem: customers were leaving because competitors offered digital wallet payments, and now we had a solution. It not only kept our existing users happy and helped us revert churn, but also proved to be a sales enabler, making our solution more appealing to new customers.

We revamped our subscription plans, allowing us to charge 8 EUR in the Business plan and 12 EUR in the Enterprise plan for each card issued, annually. This move not only helped us increase revenue faster but also made Factorial a more appealing choice in the expense management industry.

Unique Cards Used With Both

Unique Cards Used With Both


Unique Cards Used With Apple Pay

Unique Cards Used With Apple Pay


Unique Cards Used With Both

© Designed by Rafa

© Designed by Rafa