Reconciling a bank's website and its app

For the same object, the Crédit Agricole website and the Ma banque app each had their own component. The goal: find the right compromise to keep just one, used on both. An assignment for Crédit Agricole Technologies et Services, with Synanto.

An example, not their product. Confidential assignment, recreated visuals.

Example: an account card, from two components to oneBefore: two componentsWebsiteCurrent accountActive•••• €TransferPaymentStatementRectangular badge, plain-text actionsMa banque appCurrent account•••• €TrfPayStmtNo badge, abbreviated actions on greyAfter: one shared componentAccount card, 1 componentWebsiteCurrent accountActive•••• €TransferPaymentStatementMa banque appCurrent accountActive•••• €TransferPaymentStatement

AxelTwo components for the same object: every gap was paid for twice.

AxelAfter the workshop: a single component, on the website and in the app.

The problem

The website and the app had the same business objects. But each team evolved its own component, with its own styles, behaviors and naming. Every gap was paid for twice, first in design, then in implementation.

My decisions

Example: the gap audit on an account card

Element	Website	Ma banque app	Shared component
Account status	Rectangular badge Gap	No badge Gap	Pill badge, color-status token
Actions	Plain text, inline Gap	Abbreviated, grey, no outline Gap	Outlined, action-label token
Structure	Label, amount, badge, actions	Label, amount, actions	Label, amount, badge, actions

Comparing the two components, gap by gap

The audit put the website component and the app component side by side. Each gap is documented and ranked by priority, so both teams start from the same findings before looking for a solution.

Finding the compromise in workshops, with both teams

I ran workshops that brought web and app together around one component: audit presentation, ideation and benchmark, then live co-creation in Figma. On complex components, we iterated until we reached agreement, and every decision was documented.

Diagram: how a workshop runs

Audit presentationeveryone starts from the same findingsIdeation and benchmarkeach team lays out its constraintsCo-creationlive in FigmaDocumented decisionso everyone can refer to it

Example: the shared component, specifiedwebsiteCurrent accountActive•••• €TransferPaymentStatementappCurrent accountActive•••• €TransferPaymentStatementBadge: pill, color-status tokenActions: outlined, action-label tokenOnly the surrounding context changes: page background, grid

One component, adapted to every screen

The component that came out of the workshop is used as is on the website and in the app: same structure, same tokens, same badge. Whatever adapts to the screen is handled around the component, never inside it. Both teams draw from the same source.

Result

What changed

One component where there were two.

The same on the website and in the app: only the context around it changes. Documented Figma components, delivered to the front-end teams.

2 surfaces audited
Documented components
One component for web and app

In hindsight

What I'd do differently

I would have involved the developers from the audit onward, not just in the workshops: they see gaps that Figma doesn't show.

Next caseJuridispoMaking a lawyer easy to find and book2 journeys13 screensAudit, then redesignRead the case study