Story: Fundamental of Ecommerce

During the pandemic, eCommerce boosts business presence and sales. However, Shopify released a restructuring plan to fire 1000 workers on July 26, 2022. We are facing inflation and many companies are planning to lay off workers, including Shopify, Tesla, Netflix, Lyft, TikTok, OpenSea, Microsoft, Twitter, Substack, StockX, Redfin, BlockFi, Stitch Fix, Clubhouse, Robinhood, etc. Business is tough.

Crunchbase: Tech Layoffs In 2022: The U.S. Companies That Have Cut Jobs

Anyway, when I make a prototype by Figma, I often need to make a checkout flow. A client is mainly a startup and they have an in-house programmer. So, they develop it from scratch. If it’s BtoC clients, they use Shopify and the payment process is installed in the theme.

I checked the checkout flow at Amazon. It is not well designed, but I am sure that Amazon optimizes it over 100 times. It is very high engagement. I cannot deny that.

I searched for the checkout flow and optimization.

Payment Method UX: How to Design the Payment Selector by Baymard Institute

Typical checkout process
Shopping cart > Option(Login, create account or guest) > Billing info > Shipping info > Shipping method > Preview order > Payment > Confirmation(Thank you page)

UX ideas
– Guest option
– Social login
– Promo code
– Order summary
– Process indicator

Reason to drop out during the checkout process
– Extra additional charges
– Forced account creation
– Non-inclusive shipping options and pricing
– Overly complex checkout
– Errors and crashes
– Security and protection
– Performance and load times
– Missing payment options

E-Commerce Checkout Best Practices (Part 1/4)

©Snipcart

Top 3 reasons of drop out
– Showing additional costs in the end, shipping, tax etc (show upfront)
– Require account (guest)
– Too long process or too slow delivery

Shopping cart page
– Product name, image, product option(update/delete)
– Color Blindness

Function
– Guest shopping, social login
– Google autofill
– Secured by …
– Visual cues
– Keep labels
– 0000, MM/YY, etc
– Real-time notification(check mark)
– Thank you page and email(order states, total price, expectation)

Typical process
– Shopping cart → billing(ask at an early stage) → shipping → shipping method → payment method(secure mark) → confirmation
*I checked other videos and billing is usually after shipping info. I also feel that the shipping form is the first in my experience.

eCommerce Checkout Flow Best Practices

©Chris Marrano

– Don’t require creating an account
– User testing
– Autofill
– Popup → cart, but upsell
– Call to action
– Email address
– Customer review
– Chatbots
– Payment option

Lesson 9 | Checkout | Create Your Online Store | Wix eCommerce

©Wix.com

– Slide after clicking the cart button
– Cart page(update, delete, promo code, notes)
– Shipping, delivery and payment as accordion
– Few clicks as much as possible

Designing payment flows for SCA(Strong Customer Authentication)

High-level knowledge even I don’t know when I apply it in my project.

Conclusion: UX/UI design

eCommerce website is a good practice for web/graphic designers. We have to think about UX and learn the latest practice. Then, implement the learning to UI.

Many web/graphic designers have an online shopping experience at Amazon or another website unconsciously. Therefore, we can reflect on our experience, how it was good/bad, intentionally.

My goal as a freelance web/graphic designer is to facilitate the sprint or user interview. So, UI design is not so passionate for me, but it was good to know.

Reference:

bolt: How To Design A Great Ecommerce Checkout Flow
dribbble: Payment Details