Introduction

Primer is an end to end automation platform for payments. It allows merchants to build sophisticated payment flows with no engineering effort, through a world-class checkout integration that developers love. I was interviewing for a role at Primer and this was the design task they assigned to me as a take-home assignment. I didn't get the role but it was a good experience as I got proper feedback on my shortcomings.

Design Brief

Interact with the prototype here

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FVfAIDOrndUEiVJ1y3pfPDC%2FPrimer-Checkout-Case-study%3Fpage-id%3D1%253A7977%26node-id%3D1%253A9542%26viewport%3D389%252C220%252C0.1321503072977066%26scaling%3Dscale-down%26starting-point-node-id%3D1%253A9542

In short

I had to add a new step in the Primer checkout experience and improve the current UX along the way.

Constraints

There were a few constraints I had to keep in mind before going forward:

• Scale: Primer is an international product, so the product needs to be usable for merchants from any country.
• Control: The Checkout API cannot control anything before the checkout button is interacted with and after the payment is completed.