Connecting the dots
“You can’t connect the dots looking forward; you can only connect them looking backward.”
— Steve Jobs
Hardi Jain · AI and SaaS product manager
B2B · STORY 04
One payment platform. Different surfaces. One experience standard.
Different surfaces were expected. Different experiences were not.
01 · THE OPENING
Payment Links powered Web Checkout experiences, while Native SDKs powered payment experiences inside mobile applications.
Different surfaces were expected. Different experiences were not.
02 · THE EXPERIENCE GAP
A customer reaching the same point in the same journey did not meet the same product.
That is the actual product problem, and it is invisible in a static component library.
03 · WHY THIS HAPPENED
A design audit identified inconsistencies across more than 200 live components.
The bigger product question was whether those inconsistencies were merely visual, or whether they changed how the payment journey behaved.
04 · TWO AUDITS
The Design team audited atomic UI elements: colour, spacing, typography, across 200+ components.
I mapped those components onto functional payment journeys, looking at flow, state and recovery rather than appearance.
05 · THE EXPERIENCE GAP MAP
Three examples were enough to make the problem tangible.
Processing feedback, failure recovery, and instrument validation each diverged between the two surfaces.
06 · THE PM INSIGHT
The solution wasn’t to make Web and SDK identical. They are different surfaces, and they should be.
The goal was consistent product behaviour: the same states, validation and recovery principles across both.
07 · THE STRATEGIC CHOICE
Visual standardization would have made the two surfaces look consistent while leaving the behaviour untouched.
Experience standardization meant design plus flow, state, validation, error and recovery.
08 · THE NEW EXPERIENCE MODEL
A component is not an experience. A component enters a state, the state implies a behaviour, and a failed behaviour needs a recovery.
Defining that chain once is what made the standard portable across surfaces.
09 · INTO REQUIREMENTS
I authored epics and user stories for Frontend Engineering on both Web and Mobile SDK, defining functional states, validation logic, error micro-copy, design token usage and cross-platform edge cases.
10 · CROSS-FUNCTIONAL EXECUTION
I translated experience gaps into product requirements, aligned Design and Engineering around common behaviours, defined acceptance criteria, coordinated UAT across Web and SDK, and supported phased rollout.
11 · UAT AS THE QUALITY LOOP
UAT wasn’t only checking whether the screens matched the design. It verified whether the intended payment behaviour remained consistent across platforms and edge cases.
A gap found sent the work back round the loop rather than through to release.
12 · THE SCALABILITY SHIFT
Before, a new payment feature meant custom logic on Web and custom logic on SDK, written twice.
After, a new feature inherited a standard pattern and shared experience principles across both surfaces.
13 · OUTCOME
More than 200 live components were evaluated and standardized, with defined coverage across every payment flow and instrument.
Reported UX inconsistencies fell by 30%.
A product standard tells it how to behave. States, recovery and validation are the part a component library cannot carry on its own.
Product Manager · AI and SaaS
Connecting the dots
“You can’t connect the dots looking forward; you can only connect them looking backward.”
— Steve Jobs