Ordering employee cards for a company

The challenge: let a company order an employee card online, without a branch visit, without a duplicate cardholder, and by orchestrating 3 roles invisible to the user.

Desktop interface of the company card ordering flow
Role
Product Designer · UX & UI
Context
B2B Platform
Timeline
Design delivered · in development

Objective

Digitize the B2B card ordering process to make it available 24/7, cut processing time from a month to 10 days, and give companies more complete files right from submission.

Committed targets

~10 days

Target time from order to receipt

vs ~1 month today, a 75% cut

14 participants

2 rounds of testing

Key insights fed directly into design decisions

The Problem

Ordering a bank card for an employee required multiple exchanges with the branch, was limited to opening hours, and could take up to a month. The request was entirely offline.

For the bank: often incomplete files, a risk of duplicates when creating the cardholder, and a significant operational burden for the teams.

The real complexity was invisible from the outside: we had to orchestrate three distinct roles: the card manager who orders, the cardholder who completes their file, and the signatory(ies) who validate, while handling tricky edge cases: the cardholder isn't necessarily a bank customer, the card manager shouldn't know if their employee is one, and all three must have a Luxtrust certificate. Not to mention an anti-phishing constraint: the bank cannot send certain links directly: the card manager must forward them themselves.

Card selection at the start of the ordering flow
Choice of cards to order / start of the flow

Approach

Framing multi-role scenarios with stakeholders

We first identified all possible combinations between the 3 roles and their edge cases before touching the design.

Card manager

Launches the request

Cardholder

Completes their file

Signatory

Signs the contract

Bank

Reviews, processes and signs the file

Behind the scenes, not shown to the user

The card manager/admin follows every step in the track & trace

Modeling the user flow of the 3 roles with their edge cases

We modeled the journey of the card manager, the cardholder, the signatories, as well as the track & trace which allows the card manager to follow progress in real time, and then validated it with PMs, BAs, and devs.

User flow of the journey
Journey user flow: Purple → Card Manager / Pink → Cardholder / Blue → Signatories

Test first on wireframes

We tested two scenarios (ordering for oneself / for someone else) with 7 participants. The main insight: the tutorial page we'd added to explain the roles weighed down the entry into the flow. Users wanted to act, not read. We removed it.

Tutorial page removed after testing
Tutorial page that weighed down the entry into the flow

Designing the UI mockups

Based on the adjusted wireframe, I designed the UI mockups, refining missing data and error cases with the developers.

Final UI mockups
Card manager summary before ordering the card for their employee

Then test on clickable prototype

I tested the prototype with 7 participants on the same scenarios. The insights directly fueled several adjustments presented in the key decisions.

Maintaining consistency through 3 PM changes

Three project managers rotated through this project, and my UX colleague left the team along the way. I took full ownership of the project, maintained the consistency of the design vision, and adapted my communication to each new PM so the project wouldn't drift. When stakeholders change, the designer becomes the project's memory.

Design Quality Check aligning mockups with development
Design Quality Check carried out to align the mockups with development

Key Decisions

Make it clearer that Luxtrust is mandatory

During tests, the information 'Luxtrust certificate required for all 3 roles' was not read enough. I added an alert pop-up at the beginning of the flow and a checkbox to confirm that everyone involved has one before starting the request.

Alert stating the Luxtrust certificate is mandatory Obligation to have a Luxtrust certificate

Handle the anti-phishing constraint with transparency

The card manager must send the link themselves for the cardholder to fill in their information. The initial explanation was too long and deemed tedious in testing. I reduced it to a discreet entry 'Why do I have to send the link by email?', which opens a contextual pop-up when clicked.

Before Before: the long inline explanation
After After: the explanation moved into a contextual pop-up

Clarify the roles directly in the flow

The terms 'cardholder' and 'signatories' were not always understood. I added a contextual definition under each role, at the exact moment the user needs it, rather than on an introduction page.

Create a reusable track & trace

While the cardholder and signatories complete their steps, the card manager has a tracking view to maintain visibility over a request they initiated.

Reusable foundations

I designed the online signature and track & trace as modular bricks, built to be reused on other flows without starting from scratch.

Reusable track & trace Track & trace with a reusable foundation

Results

The design is delivered and the handover complete: mockups, translations, and text/screen links transmitted to the developers, with development underway. Feedback during the presentation to B2B center advisors was positive.

This will greatly improve the customer's autonomy and allow us to have more complete files to analyze.

B2B center advisors, BGL BNP Paribas

Once live, the committed target is to cut the time to receive a card from one month to 10 days, a 75% reduction, and to refocus teams on compliance analysis rather than manual processing.

KPIs to track:
  • Card order volume, to see whether there's an increase before/after
  • Conversion funnel of the flow, to identify whether a step causes conversion to drop
  • Flow conversion rate, to measure the flow's impact
  • NPS via Medallia survey, to take the users' pulse

Key Takeaways

"A simple experience can hide real complexity. Behind a card order, I had to orchestrate three roles, customer/non-customer cases, confidentiality constraints, and anti-phishing rules, without the user perceiving the burden."

"Pedagogy must be contextual. Information too early or too long does not help: it slows down. Testing confirmed the importance of placing help exactly when needed."

"When stakeholders change, it's the documentation and clarity of the design that keep the course. On this project, it became a reflex: every decision logged, every trade-off made explicit, so the next person could pick it up without losing context."

Next case study

I designed the online appointment booking service to connect each customer with the right advisor, a channel that didn't exist before.