Top-up flow

When a feature becomes a foundation

Designed in 2021. Live today, used by ~20M WindTre customers.

Recharge flow on web and mobile, sharing the same system after the redesign

Recharge on web and mobile — same product, same system.

THREE PROBLEMS, ONE BROKEN EXPERIENCE

The recharge flow had three distinct but interconnected problems — each one damaging the experience in a different way.

A flow problem

The CTA was always active — tappable at any moment, regardless of state. The microcopy below it promised a next step (“Premi Ricarica per inserire i dati della carta”) that the system never delivered: tap, transaction, done. No review, no confirmation, no friction before an irreversible action.

WindTre app — recharge screen with always-active CTA and no confirmation step

Recharge screen — CTA always active, no review step between tap and transaction.

An accessibility problem

Primary orange CTAs failed WCAG contrast requirements. Small grey text on white backgrounds compounded the issue. Both were structural — orange is a brand colour, so touching it meant negotiating well beyond UX.

Primary orange CTA failing WCAG contrast check

Primary orange CTA — Stark contrast check

A usability problem

The phone number picker layered three failures. Touch targets sat below the 44px minimum. The picker docked at the bottom of the screen — the hardest zone to reach with a thumb. And only four numbers were visible at once, with no direct input: long contact lists meant long, precise scrolls on a sub-44px target.

iOS phone number picker with sub-44px touch targets, docked at screen bottom

Phone number picker — sub-44px targets, docked at screen bottom, four items visible.

Underneath, web and mobile had evolved independently. Same product, but completely different components, visual language, and interaction patterns.

The cover at the top of this case is the after — same chips, same primary, same system.

Ricarica Online — public web, same product, different design

Comparison: WindTre web Ricarica Online and mobile app

KEY DECISIONS

Three design moves, each one closing a problem and setting a new standard for the system.

Moving primary CTAs to purple

Orange fails WCAG AA on white — it's a physics problem, not a style choice. Rather than fight the brand colour, primary actions were redirected to purple, WindTre's secondary colour that passes contrast requirements.

Orange wasn't removed — it was disciplined. Darker tokens for text, reserved for contextual moments like warning states where its visual weight carries meaning. This decision seeded a broader refactor — the full semantic palette that later shaped the system's states.

ricarica

Premi “Ricarica” per inserire i dati della carta e completare il pagamento

2.93:1 FAIL

ricarica

Premi “Ricarica” per inserire i dati della carta e completare il pagamento

9.82:1 PASS

Chips for amount selection

Dropdowns are compact but opaque — and the iOS picker they opened was the same fat-finger problem of the phone selector. Chips make all available amounts visible at once, with a clear visual hierarchy between Standard and Special through colour and labelling. Orange itself was disciplined into a dual scale: darker for text (WCAG-passing), lighter for visual chrome. Same colour, two semantic roles.

Dropdown opens iOS picker — same fat-finger problem

Seleziona importo da ricaricare

IMPORTO SPECIAL

IMPORTO STANDARD

Introducing a confirmation modal

The simplest fix to the biggest risk — any action triggering a transaction now requires explicit user confirmation. One pattern change, one problem closed.

Confermare la ricarica?

Stai per effettuare una ricarica di 15€

SYSTEM IMPACT

The recharge redesign didn't end at shipment.

Same chip, same modal, same primary — across Singola, Autoricarica and Con codice.

Three decisions — chip-based selection, confirmation gate, purple primary — held across all three top-up variants. The a11y check joined the Definition of Done. What started as three fixes for a recharge flow became three rules for the system.

And the next surface picks up where the system left off.

Widget iOS

Bringing the answers out of the app.