Project Type: Interaction Design / Prototype (Concept)

Role: UI/UX & Interaction Designer

Tools: Figma (Variables & Conditional Logic)

Timeline: 2025

Checkout is where e-commerce loses the most users.

This concept prototype tackles the most common friction points: quantity adjustments, price updates, and shipping selection.

Using Figma's variables and conditional logic to simulate a fully dynamic, realistic flow. No static screens, no click-through illusion. It behaves like a real product.

Most checkout prototypes show the happy path. This one was built around the moments that cause drop-offs: updating a quantity and not seeing the price change instantly, choosing a shipping method without understanding what it actually costs, making a change and losing your place in the flow.

Quantities can be increased or decreased with totals recalculating instantly. When an item reaches zero it disappears automatically, keeping the cart clean without a separate "remove" action.

Users toggle between Normal and Pro modes, each showing different shipping options and pricing with a seamless transition. The design makes the cost implications of each choice immediately visible.

Both interactions are powered by Figma variables and conditional logic, not manually linked frames. This means the prototype responds to user input the way a real product would, making it genuinely useful for developer handoff and stakeholder presentations, not just visual review.

A checkout that gives users real-time feedback reduces hesitation and drop-offs. This prototype demonstrates that with the right Figma setup, you can test and validate dynamic interactions before a single line of code is written.