The Problem
The client’s checkout experience team faced a critical blind spot: key UX metrics across the profile management and card management flows were not traceable, measurable, or managed consistently. Despite growing expectations around improving performance and user experience, product managers and developers lacked a standardized method to instrument KPIs or define experience-level SLAs.
Custom event tracking requests were being routed inconsistently via the data team, with overlapping efforts and no common schema - resulting in data that was unreliable, incomplete, and non-actionable.
This hindered the team’s ability to improve strategic metrics like:
- Task Success Rate: Were users completing actions like adding a card successfully?
- Time on Task: How long did common interactions in the checkout experience take?
- Cart Abandonment Rate: Could friction in UX be directly tied to lost conversions?
- Customer Effort Score (CES): How easy was it to complete steps in the checkout process?
- User Error Rate: Were confusing flows leading to frequent user mistakes?
Without traceable, real-time data across these dimensions, product decisions lacked evidence, and engineering efforts could not prioritize experience improvements with confidence.
Our Approach
We partnered with engineering leaders to design and implement a standardized observability framework for UX instrumentation, based on the organization’s internal “Atomic Events” schema.
Our solution involved building a set of TypeScript-based Higher-Order Components (HOCs) within the Next.js framework. These wrapped common UI elements such as buttons, inputs, and dropdowns ; and automatically logged events following a strict Flow > Page > Task > Action hierarchy.
This approach delivered:
- Strong typing of observability logic, removing ambiguity in event naming.
- Default instrumentation of all interactables, reducing cognitive load on developers.
- Full traceability of user flows, enabling business teams to measure defined KPIs.
By shifting event generation to the component level and tying it directly to UI rendering and user interaction, we removed guesswork from instrumentation and eliminated drift between the product design and the telemetry that supports it.
Challenges
While building forward-looking observability support, we also had to maintain 100% backward compatibility with the existing instrumentation that was already in use by downstream data systems.
The system had to coexist with legacy event schemas while preparing for the rollout of the company’s next-generation observability library. Additionally, the initiative had to scale across teams, making architectural clarity and reusability critical.
Engagement Model
- Team Size: 5 Engineers
- Tech Stack: Next.js, TypeScript, Custom Observability Middleware
- Delivery Process:
- Authored a Technical Design Document
- Peer-reviewed in cross-functional forums
- Changes merged after a structured Mob Review and approval by key stakeholders
Results
- 100% event coverage achieved for the “Add Card” flow in the Checkout Dashboard
- Retrocompatibility maintained across all existing event pipelines
- Approved implementation patterns adopted by Data Platform, Observability, and Checkout Architecture teams
- Enabled measurement of UX KPIs that were previously undefined or inconsistently tracked
Strategic Impact
With this implementation, the client now has real-time, reliable data to evaluate and improve core checkout experience KPIs. This not only helps reduce checkout friction and churn, but empowers teams to prioritize features that truly enhance the customer journey.
Moreover, developers now spend less time deciding how to instrument, and more time building meaningful improvements, driven by data they can trust.