Overview  

Client specific payment feature componentized as a shareable widget

• Payment feature developed directly into Retail Checkout experience.
• Feature elements redesigned and encapsulated in a stand-alone widget.
• Currency converter now available across Amazon.
• New interaction scenarios created as views within the widget. Configurable.

Supplemental Axure Documents  

Amazon Currency Converter (TFX) – Componentized as a Widget

(some browsers may require plugin)

In Detail  

     As a part of designing the Amazon Payment Experience (APX) there were a variety of stand-alone payment features owned by external teams that were integrated directly into existing client workflows, primarily on Amazon.com retail checkout. Ideally these features could be created as their own stand-alone component so that the functionality could be shared across other client workflows.

     Often a particular feature would have affects spread across different parts of a UI or be incorporated deeply into the client space making it impossible to cleanly encapsulate and would require complex cross-integration to use.

     My challenge was to move as much of the core functionality into the widget boundary as possible and make the component as usable out of the box as possible. I would then attempt to extend the feature (conceptually) across as many use cases as available and redesign it to be more broadly conceived and extensible for future enhancements. I also would standardize the UX patterns.

     Here, we’re looking at Amazon’s Currency Converter feature (TFX).   When a user attempts to purchase with a payment method based in a different currency or perhaps shopping from a different region, the checkout page would present the option to purchase in the native currency and provide the conversion (and collect the fees).

     The product was originally available only on retail checkout and the experience was developed directly into their codebase. When enabled, it altered various aspects of the client-controlled summary area of their checkout workflow. I was able to neatly package the feature in a stand-alone module and update the UX patterns. This new component could then be used on desktop and mobile and across a variety of purchase applications with a consistent experience and functioned for most clients out of the box.  We also created alternative widget views to allow Currency Converter to be toggled on and off from 1-Click workflows. 

     In retail specifically, they needed to retain control of their purchase button and for legal reasons change the wording of the purchase button depending on the state of the component. So, we included a variety of state signaling that clients could listen to for corresponding external changes. By default, APX owns the purchase button and summary so that behavior was incorporated directly and controllable through client settings.