FastCheckout
FastCheckout is VTEX's no-code checkout. I worked on the UX and UI for desktop and mobile, and Hearst was the first client to go live. The product later grew into a B2B checkout.
- VTEX
- Hearst
- Product Designer (Junior), UX and UI
- Jul 2023 → Apr 2024
What FastCheckout is
A configurable checkout that a store can launch without custom development. It covers the cart, customer information, delivery and payment, with the same experience on desktop and mobile.
Before and after
The previous checkout on the left, FastCheckout on the right, for three moments: the cart, unavailable items and delivery.
The four steps
Cart, information, delivery and payment. Each step asks for one thing, and the order summary stays on screen from start to finish.
Edge cases
Unavailable items, address search, split deliveries and saved cards are handled inside the step, so the shopper doesn't have to go back.
Testing with clients and partners
We ran five moderated sessions with clients and partners. Each person worked through the whole flow, from adding items to the cart to order complete, while we watched and asked questions.
Most liked the visual design and described the experience as cleaner and smoother. The breadcrumb and the delivery screen got specific praise.
- 5
- moderated sessions with clients and partners
- 8
- tasks per session, from cart to order complete
- 4.3/5
- average score
What people asked for
These tests led us to make the changes FastCheckout needed to end up better than the previous checkout, V6. The requests that came up most:
- Fill it in from the contact details.
- Make it optional.
- Ask only if the order is a gift.
Accessibility
The screens follow WCAG 2.1: contrast, keyboard navigation, screen reader support and error messages. The client also commissioned an external audit to review the result. We ran Lighthouse on mobile and desktop as well, and the scores landed where we expected.
- WCAG 2.1
- the standard behind every screen
- 100
- Lighthouse accessibility score, on mobile and desktop
- 70+
- Lighthouse Best Practices score
Adding pickup
Pickup came in the second release. The cart gets two tabs, Shipping and Pickup, so the shopper chooses how to receive the order before moving on.
From Hearst to B2B
Hearst was onboarded over a few months. After that, we invested in taking FastCheckout to B2B: multiple deliveries, purchase policies and the buying flows of large accounts.
- 1st
- client live on FastCheckout