ONOFFLINE SHOP · Live commerce · Product designer · 2019-2020
Live commerce built for two people shopping at once.
One person walks a store on a live stream while another buys through them. Every screen had to work for both sides of the same call, on iOS and Android, without either of them leaving the app.
- Role
- Product designer. Research to dev-ready UI.
- Timeframe
- 2019-2020
- Team
- PM · iOS team · Android team · Engineers
- Surfaces
- Buyer app · Provider app · Operations dashboard
The short version
The buyer cannot see the final price during a stream and hesitates. The provider is juggling video, chat and notes across three apps. The operations admin finds out about a problem from a complaint. The target: one live session where a shopper hires a provider and checks out inside ten minutes, the provider goes live in under five, and the admin sees it all as it happens.
Borrowing from ride-sharing, not from retail.
I reviewed the pitch deck, sketches, competitor notes and flow drafts, then built a kickoff questionnaire covering KPIs, user value, streaming limits and budget. The competitor analysis covered Taobao Live, Shopee, Uber and Grab. Ride-sharing shaped the map and matching logic; marketplace checkouts shaped the in-stream cart. That combination is the whole product.
Everything that already existed, read first
Pitch deck, sketches, competitor notes and an early flow draft, turned into a questionnaire that set the real constraints, including what streaming could technically do.
Two different industries, two different lessons
Taobao Live and Shopee for live commerce, Uber and Grab for real-time matching. The map logic came from ride-sharing, which is not where a shopping app usually looks.
No clear way to see final price or delivery during a stream, so she hesitates and abandons.Remote shopper
Setting up a stream and a cart at the same time means juggling three apps.Provider
Orders, payments and stream quality live in three dashboards, checked by hand.Operations admin
Problems only surface after a complaint.Operations admin
Wireframes locked the logic before anyone drew a pixel.
Focused wireframes for buyer, provider and admin, covering the map, the cart, the order queue and the dashboard. Getting approval at that fidelity is why the handoff to high fidelity and then to two native teams happened without rework.
Three roles, one live session
Map and provider pick, live stream interaction, in-video cart and checkout, order history. Then the mirror image of it for the person holding the camera.
A UI kit sized for two platforms
Tokens, type, spacing and components in Figma, built to survive being implemented twice by two different teams.
Four things had to work inside one live call.
Each one answers a pain the research had already named. One interface carrying video, chat, item selection and checkout, so the buyer never leaves the stream. A single toolkit for the provider, because camera, cart and order tracker in three apps is why streams took so long to start. Cost, delivery fee and ETA held on screen throughout. And a real-time operations view, so a problem surfaces before a complaint does.
From finding a provider to watching them shop
Map and matching borrowed from ride-sharing, then the live stream itself. Stream setup for the provider dropped under five minutes because everything sits in one toolkit.
Price and ETA stay on screen
Call duration and running charge sit over the video the whole time. The buyer hesitating over an unknown final price was the single most expensive moment in the flow, so it was designed out rather than explained away.
The order, from stream to history
In-video cart and checkout, then the order list and detail the buyer returns to. Cart completion settled around 70 percent once buying stopped meaning leaving the stream.
Specs for two platforms, synced daily.
I provided platform-specific Figma specs and synced daily with the iOS and Android teams, with weekly reviews to keep both apps aligned. Designing once and specifying twice is slower up front and considerably cheaper than reconciling two apps that drifted.
The full specification board
iOS and Android conventions handled separately rather than averaged into something that felt wrong on both. Shown at full size: contained to one screen, the individual specs stop being readable.
Half the shopping time, inside one live call.
The all-in-one live flow halved the time a buyer spent shopping, provider requests converted to accepted streams 25 percent more often, and in-video checkout lifted cart completion to roughly 70 percent. The live-demo MVP is also what won the first mall partnership and the first real users.
