Barbara | Checkout

Insights

Overview

🏋️‍♂️ Problem Statement

Checkout is a critical trust point in e-commerce. When pricing, shipping, and quantity adjustments feel unclear, users feel excluded and anxious. For businesses, this isn’t just lost sales, it erodes brand trust and loyalty. A transparent, inclusive checkout can reduce abandonment while strengthening fair, user-centered commerce.

🎯 Target Audience:

This design targets diverse online shoppers: ranging from experienced buyers to seniors, non-native speakers, and users with accessibility needs; who all share one expectation: a checkout that is quick, transparent, and respectful of their time and trust.

Approach

Research

📅 GENERAL PLANNER:

This section breaks down individual challenges and provides strategic notes on how to tackle each.

REQUIREMENTS:	NOTES:
This prototype covers two user types: Normal users see the FREE Express Shipping banner, while Pro users do not.	Use Variable Mode (boolean) to toggle between Normal and Pro use cases.
Let users adjust item quantities, automatically updating the total item count in the cart.	Create FloppyDiscCount and WalkmanCount to track item quantities, updating them as they increase or decrease.
Automatically hide an item when its quantity drops to 0.	Use FloppyDiscCount and WalkmanCount to track item quantities and compare them with FloppyDiscAdded and WalkmanAdded to detect updates.
In the Payment column, automatically update the number of items, the chosen shipping method, the shipping fee, and the total purchase amount.	Create totalCartItemCount for item count and totalCartAmount for total cost. Update them when a user clicks + or -, adjusting by the item's price.
When a user selects a shipping method, update the radio button, Shipping Method, Shipping Fee, and Total in the Payment column automatically.	Design a clickable shipping component that updates the method, fee, and total instantly upon selection.

Interaction

Prototype

⚡ REAL TIME ITEM QUANTITY & PRICE UPDATES:

The design emphasizes clarity and autonomy. Item quantities and totals update in real time, reinforcing user confidence. If an item is reduced to zero, it’s removed seamlessly—avoiding clutter and confusion. Every update is visible and reversible, supporting both accessibility and ethical transparency (no hidden costs, no dark patterns).

🚚 SHIPPING METHOD SELECTOR:

Shipping is simplified with a banner for Normal users; clicking Join RetroTech Pro switches to Pro mode and updates shipping options immediately.

👉🏻 Two Figma components manage the shipping options: one for Free users, one for Pro users; with dynamic labels and fees that automatically update the total purchase amount to reflect selected shipping costs.

A UI component in Figma displaying dynamic shipping options for Free and Pro users

Insight

Conclusion

🌱 What I Learned

This project deepened my understanding of Figma variables and conditions, enabling smarter prototypes. I also refined project planning for clearer developer collaboration and tackled fundamental coding logic challenges.

➡️ What’s Next

Next steps include inclusive user testing with diverse groups (seniors, non-native speakers, screen-reader users) to identify barriers and refine accessibility. The goal is not only to reduce cart abandonment but also to foster trust, transparency, and loyalty.

Checkout

Checkout

Checkout

Insights

Overview

Overview

Overview

🏋️‍♂️ Problem Statement

🎯 Target Audience:

Approach

Research

Research

Research

📅 GENERAL PLANNER:

Interaction

Prototype

Prototype

Prototype

⚡ REAL TIME ITEM QUANTITY & PRICE UPDATES:

🚚 SHIPPING METHOD SELECTOR:

Insight

Conclusion

Conclusion

Conclusion

🌱 What I Learned

➡️ What’s Next

‹ wiseBite App

‹ wiseBite App

Enchanted Bloom ›

Enchanted Bloom ›

LET'S CHAT

Get in touch

LET'S CHAT

Get in touch

LET'S CHAT

Get in touch