Place Coffee Orders 2× Faster on Blue Tokai
Place Coffee Orders 2× Faster on Blue Tokai
Redesigned the checkout experience from 4 steps to 2 —improving clarity, trust, and speed
Redesigned the checkout experience from 4 steps to 2 —improving clarity, trust, and speed
Before
Before
Overview
Overview
Blue Tokai is a leading specialty coffee brand in India, but its mobile app provides a poor buying experience. This project focuses on redesigning the checkout journey - from product selection to payment to create a faster, smoother user experience.
Blue Tokai is a leading specialty coffee brand in India, but its mobile app provides a poor buying experience. This project focuses on redesigning the checkout journey - from product selection to payment to create a faster, smoother user experience.
Understanding the problem
Understanding the problem
As a regular customer, I often find the ordering process frustrating, which sometimes leads me to abandon purchases.
Despite strong products, the app likely faces high cart abandonment due to hidden costs like GST, confusing navigation, unclear CTAs, and weak trust signals.
As a regular customer, I often find the ordering process frustrating, which sometimes leads me to abandon purchases.
Despite strong products, the app likely faces high cart abandonment due to hidden costs like GST, confusing navigation, unclear CTAs, and weak trust signals.
App Store review analysis revealed recurring checkout friction—location issues, repeated attempts, redundant inputs, and a weaker UX than the website—indicating major usability gaps.
App Store review analysis revealed recurring checkout friction—location issues, repeated attempts, redundant inputs, and a weaker UX than the website—indicating major usability gaps.
Why solve this problem
Why solve this problem
For Users
Hidden charges erode trust
Redundant and multiple steps slow down eager and loyal buyers
Poor hierarchy makes user struggle with key details
Confusing CTAs lead to slowed buying process
For Users
Hidden charges erode trust
Redundant and multiple steps slow down eager and loyal buyers
Poor hierarchy makes user struggle with key details
Confusing CTAs lead to slowed buying process
For Business
Cart abandonment = massive revenue loss
Low AOV from no cross-sell in cart
Repeat purchase rate declining
Customer acquisition cost wasted
For Business
Cart abandonment = massive revenue loss
Low AOV from no cross-sell in cart
Repeat purchase rate declining
Customer acquisition cost wasted
Design solution
Design solution
Optimizing product catalog
Gaps Identified (Before)
The product catalog lacked a quick-purchase path for high-intent users, visible trust signals such as ratings and reviews, clear CTA labeling, and transparent tax disclosure - creating friction and reducing purchase confidence.
Optimizing product catalog
Gaps Identified (Before)
The product catalog lacked a quick-purchase path for high-intent users, visible trust signals such as ratings and reviews, clear CTA labeling, and transparent tax disclosure - creating friction and reducing purchase confidence.
Before
Before
Redesign Optimizations (After)
In the redesign I enhanced product discovery and conversion by adding trust signals (ratings & reviews), improving pricing transparency (“+ taxes”), introducing a frictionless "Buy Now" path for high-intent users, retaining "Add to Cart" to support AOV growth, and aligning cart placement with standard e-commerce navigation patterns.
Redesign Optimizations (After)
In the redesign I enhanced product discovery and conversion by adding trust signals (ratings & reviews), improving pricing transparency (“+ taxes”), introducing a frictionless "Buy Now" path for high-intent users, retaining "Add to Cart" to support AOV growth, and aligning cart placement with standard e-commerce navigation patterns.
After
After
Optimizing cart experience
Gaps Identified (Before)
The checkout experience included a multi-step flow, unclear CTAs, low visibility of delivery ETA, an oversized discount section, limited upsell opportunities, and less accessible payment switching - collectively adding friction to the purchase journey.
Optimizing cart experience
Gaps Identified (Before)
The checkout experience included a multi-step flow, unclear CTAs, low visibility of delivery ETA, an oversized discount section, limited upsell opportunities, and less accessible payment switching - collectively adding friction to the purchase journey.
Before
Before
Redesign Optimizations (After)
I redesigned checkout into a single-page flow with a clear hierarchy (Delivery → Order Details → Bill → Payment) to improve scannability. Delivery ETA was highlighted, discounts were compressed into an expandable module to reduce clutter, and contextual upsell was added to support AOV. Free shipping and trust badges reinforce purchase confidence, while payment selection was optimized with a bottom sticky bar inspired by quick-commerce patterns for faster switching.
Redesign Optimizations (After)
I redesigned checkout into a single-page flow with a clear hierarchy (Delivery → Order Details → Bill → Payment) to improve scannability. Delivery ETA was highlighted, discounts were compressed into an expandable module to reduce clutter, and contextual upsell was added to support AOV. Free shipping and trust badges reinforce purchase confidence, while payment selection was optimized with a bottom sticky bar inspired by quick-commerce patterns for faster switching.
After
After
Optimizing payment modal
Gaps Identified (Before)
The payment flow does not prioritize the user’s previously used method, increasing decision effort before gateway redirection. The primary CTA is also unclear, affecting checkout progression.
Optimizing payment modal
Gaps Identified (Before)
The payment flow does not prioritize the user’s previously used method, increasing decision effort before gateway redirection. The primary CTA is also unclear, affecting checkout progression.
Before
Before
After
After
Redesign Optimizations (After)
Redesigned the payment modal to highlight the previously used method and added a contextual CTA within the selected payment card to avoid scrolling. UPI was prioritized at the top based on dominant payment behavior in India.
Redesign Optimizations (After)
Redesigned the payment modal to highlight the previously used method and added a contextual CTA within the selected payment card to avoid scrolling. UPI was prioritized at the top based on dominant payment behavior in India.
Conclusion and expected impact
Conclusion and expected impact
This project reinforced that effective checkout design is less about adding features and more about removing friction at high-intent moments. Improvements in hierarchy, clearer CTAs, stronger trust signals, transparent pricing, and smarter payment prioritization are expected to significantly influence user confidence and decision speed.
In practice, good design directly supports business outcomes—every reduced step, clearer label, or better default would contribute to higher conversion and retention.
This project reinforced that effective checkout design is less about adding features and more about removing friction at high-intent moments. Improvements in hierarchy, clearer CTAs, stronger trust signals, transparent pricing, and smarter payment prioritization are expected to significantly influence user confidence and decision speed.
In practice, good design directly supports business outcomes—every reduced step, clearer label, or better default would contribute to higher conversion and retention.