Social Commerce Checkout
Trell — 2021
Overview
Trell is a social commerce platform where creators share lifestyle content — beauty routines, fashion hauls, recipe videos — and viewers can purchase featured products directly within the app. I designed the end-to-end checkout experience.
How did the social commerce checkout work?
Products were tagged in creator videos, and tapping a product tag opened a frictionless purchase flow without leaving the content experience.
- Checkout needed to feel like a natural extension of content browsing
- Users in tier-2/3 cities needed extra trust signals and payment flexibility
- The flow supported cash-on-delivery, UPI, and card payments equally
The biggest insight was that "adding to cart" was a foreign concept for many of our users. They wanted to buy the product they just saw, right now. The closer the purchase felt to the content, the higher the conversion.
Problem
Users discovered products through creator videos but dropped off when redirected to a traditional e-commerce checkout flow. The context switch from content to commerce was too jarring.
Solution
An in-context purchasing experience where product discovery, selection, and checkout happened within the content feed. No redirects, no cart, no separate checkout page.
Impact
25% increase in checkout conversion and 18% reduction in cart abandonment.
Context & Constraints
Trell's user base was primarily in tier-2 and tier-3 Indian cities — users who were comfortable with social media but often new to online purchasing. The checkout experience needed to accommodate varying levels of digital commerce literacy.
Constraints
- TechnicalMust work on low-end Android devices with limited memory. The purchase flow could not add significant app size.
- UserMany users had limited experience with online checkout. Cash-on-delivery support was mandatory.
Assumptions
- Users trust creator recommendations more than traditional advertising
- Reducing steps in the purchase flow will directly improve conversion
User Research & Journey Mapping
I started by mapping the complete user journey from content discovery to post-purchase. We identified 7 distinct drop-off points in the existing flow and prioritized them by impact.
Key Insights
- The biggest drop-off happened at the redirect from content to the checkout page
- Users in tier-2 cities spent 3x longer on the address entry step than tier-1 users
- Cash-on-delivery was preferred by 68% of first-time purchasers
Decision
Eliminate all redirects — the entire purchase must happen in-context.
Rationale
Data showed that any navigation away from the content feed resulted in 40%+ drop-off. Users perceived redirects as "leaving the app."
Interaction Design & Prototyping
I designed a bottom-sheet-based purchase flow that overlaid the video content. Users could browse product details, select variants, enter address, and choose payment — all within a persistent bottom sheet that kept the video visible in the background.
Key Insights
- Keeping the video visible behind the checkout sheet maintained emotional connection to the product
- A 3-step indicator (Product → Address → Pay) reduced perceived complexity
Decision
Use a progressive bottom sheet pattern with swipe-to-dismiss for each step.
Rationale
Bottom sheets are familiar from other Indian apps (PhonePe, Paytm, Swiggy) and work well on small screens.
Research
Methods
Participants
10 users across 3 city tiers, plus 100K+ session recordingsFindings
Redirect to checkout was the #1 drop-off point
43% of users who tapped a product never reached the checkout page.
Address entry was the biggest friction point for tier-2/3 users
Average time on address step was 4.2 minutes for tier-2 users vs 1.1 minutes for tier-1.
Ideation
Full-Screen Checkout
Traditional e-commerce checkout in a full-screen overlay. Clean but loses content context.
Bottom Sheet Flow
Step-by-step purchase in a bottom sheet overlay. Maintains content connection but has screen real estate constraints.
Chat-Based Purchase
Conversational interface for product discovery and checkout. Novel but potentially slower for repeat purchases.
Selection Criteria
We prioritized context preservation, speed to purchase, and familiarity with existing app patterns. The bottom sheet approach won because it maintained the emotional connection to creator content while being familiar from other Indian super-apps.
Outcome & Impact
In-context checkout significantly outperformed the redirect-based flow.
Simplified address + payment step reduced friction.
Up from 1.3x before the redesign.
Qualitative Outcomes
- Users described the new flow as "feeling like buying from a friend"
- Creator-to-purchase attribution improved, enabling better creator monetization