Rebuilding the experience of online quick commerce with group purchasing from web to a mobile-first experience
Role
Principal UI/UX Designer
Scope
Web-to-App Migration · UX Optimisation
~90%
Task completion rate in usability studies — core flows completed post-redesign.
0%
Drop-off rate on the Group Buy flow — all users completed it without abandonment.
4-5
All tested users rated the redesigned joining and purchase flows as very easy to use.
7min
Average session time shows genuine engagement with complex flows.
OVERVIEW
A startup outgrowing its first skin
The company began as a community group-buying platform, letting Nairobi neighbourhoods pool orders for groceries at wholesale prices. It worked. Investors noticed — $3M in pre-seed later, the product had to grow up fast. What existed was a website-first experience — functional, but not built for the thumb. As they pivoted toward a quick-commerce model, the pressure shifted: users now expected a native app that could absorb the complexity of group buying, direct-to-door delivery, and daily deals, all within a single, fluid experience.
I came in as Principal Designer at an inflection point. The brief was simple: migrate the web experience to mobile. But the reality was a full rethinking of how a Nairobi shopper moves through their week — and where the company could earn a permanent home on their phone.
The dual challenge
This wasn't a lift-and-shift. Two overlapping problems demanded simultaneous attention:
Migration complexity — the web product had accrued interaction patterns that made sense on a browser but actively harmed mobile usability. Re-mapping these without disrupting existing power users required careful ethnographic work.
Resident UX debt — within the existing web experience, there were friction points that had never been properly resolved. The migration was an opportunity to retire them — not carry them into a new medium.
Core model: Company aggregates community orders to secure bulk pricing directly from manufacturers and farmers — bypassing distributors and delivering in as little as 90 minutes. The app had to make this supply chain feel invisible to the shopper.
RESEARCH
What our users told us
Research wasn't a phase that preceded design — it was woven through every decision. Primary user interviews surfaced mental models; heuristic evaluation quantified existing friction; the user journey map revealed where experience fell apart under real conditions.
Stacy Agambe
ONLINE SHOPPER
Age: 20 to 35
Designation: Marketing Manager
Location: Outskirts of Nairobi
Face to Face
Stacy, a 42-year-old Marketing Professional in Nairobi, lives with 2 family members. She shops bi-weekly at Quickmart and Carrefour, with 90% of purchases delivered. She buys meat and vegetables in small amounts but prefers bulk household supplies when on sale.
Digital Access & Fluency
Uses an Android phone and work computer to make orders
Visits supermarket apps and websites to discover the latest offers
Influenced by newspaper ads about ongoing neighbourhood sales
Finds WhatsApp very handy and useful to place and track orders
Pain Points
Group buy limit of 2 kg doesn't offer meaningful savings — she wants 5–6 kg options for certain products
Fluctuating prices on essentials like oil reduce the predictability of savings
Products discontinued without prior notice in supermarkets
Group purchasing options feel confusing without clearer guidance
Has to manually follow up on orders via WhatsApp — wants an integrated order tracking and support feature in the app
Kate Kimutai
COMMUNITY LEADER
Age: 25 to 35
Designation: Storekeeper
Location: Lives in a Gated Community
Face to Face
Kate is part of an ecosystem of Community Leaders who contribute to the supply of produce within her estate. She had been working for an e-commerce firm dealing in household appliances and moved to Company through a referral. Kate is enterprising and works hard for her community members.
Digital Access & Fluency
Owns an Android smartphone
Tech-savvy and able to resolve issues for end customers
Sometimes places orders on behalf of customers who have trouble doing so themselves
Uses WhatsApp as her primary communication tool and occasionally the Facebook Marketplace
Pain Points
Hard to reach multiple locations — she directs customers to a pickup point, but most don't understand the concept and don't turn up
When a delivery location is inaccessible, customers ask her to store goods — causing items to go stale.
Company has no exchanges or returns after sales. Doesn't understand why customers need to sign in with an OTP every single time.
Users in their 50s and 60s make mistakes more often when placing orders, resulting in exchanges that she has to manage
A Heuristic Study
A structured heuristic evaluation of the existing web experience was conducted against Nielsen's 10 usability heuristics, supplemented by mobile-specific criteria from Baymard Institute's mobile UX benchmark. Each issue was rated on a 0–4 severity scale.
The evaluation revealed that the most critical failures were concentrated in three areas: visibility of system status, match between system and real-world language, and error prevention during checkout — each scoring in the high-severity range.
Market and Competition
The heuristic evaluation and review of the quick-commerce landscape in Nairobi and mature markets shaped strategy. Nairobi had various players in group-buying and last-mile delivery, each with unique pricing and delivery models. This review highlighted user needs around transparency, group coordination, and mobile experience expectations. Additionally, India's quick-commerce growth, especially dark stores and community aggregation, offered insights for Company's scalable model and UX requirements.
Findings that surfaced
Savings clarity was a consistent gap — most players stated discounts without showing the comparison that made them meaningful
Group coordination mechanics were either too visible (creating friction) or invisible (creating confusion) — no player had found a clean middle ground
The Indian quick-commerce reference highlighted how community-layer roles (equivalent to Company's leaders) needed dedicated tooling to scale — they couldn't remain informal
Understanding their Journey
Mapping Stacy’s journey from intent to delivery revealed three critical drop-off moments — each corresponding directly to a problem card identified in the heuristic evaluation.
INSIGHTS
What became my North Star in design decisions
Through heuristic evaluation, session replay analysis, and direct interviews with community leaders and end shoppers, a pattern of compounding friction emerged across the shopping journey.
Insight 01
"I always have to follow up on my orders through WhatsApp. I wish the app just did that."
Stacy's manual order-tracking via WhatsApp was the clearest signal of a broken post-purchase loop. Users weren't asking for a new feature — they were compensating for a missing one. The solution had to bring tracking and support inside the app
Insight 02
"Group purchasing is a bit confusing — I'm not always sure what I'm signing up for.""
Stacy found the group-buy mechanic unclear, especially around quantity limits and price fluctuations. The model was the product's core strength — but only for users who understood it. Onboarding had to make the mechanics legible before the first order.
Insight 03
"Customers ask me to store goods when delivery fails. Then they go stale and it's my problem.""
Kate's role as a community leader put her at the collision point between Company's logistics and her neighbours' expectations. The app had no tools for her specific context — no pickup point management, no order delegation, no return flow. She was holding the system together manually.
THE PROBLEM SPACE
Seven friction points. One coherent brief.
Through heuristic evaluation, session replay analysis, and direct interviews with community leaders and end shoppers, a pattern of compounding friction emerged across the shopping journey.
"The web experience was built for a screen with a keyboard. Moving it to mobile without rethinking it would be like taking a highway and making it a walking path — same distance, completely wrong mode."
Navigation architecture
Cart & checkout flow
The cart's visibility also makes it difficult for users to track their selected items, and the limited payment options add to the complexity of the user experience. Additionally, the design completely neglects thumb zones.
Search & discovery
The app lacks a search feature, making it hard for users to find items quickly. With many products, users scroll through irrelevant results, undermining the app's promise of efficiency.
Homepage hierarchy
The homepage emphasised group purchasing, prioritising unit-based transactions over user participation. This focus overshadowed other important features, leaving new users without a clear entry point.
Community leader tools
The app lacks dedicated tools for community leaders, making it challenging for them to track their daily fulfillment turnovers. This absence of clarity obscures their understanding of payouts.
Onboarding & trust signals
First-time users had no contextual explanation of the group-buying model. The value proposition — savings, speed, quality — wasn't communicated until after account creation. Trust was asked for before it was earned.
THE IMPACT
What was at stake — and what changed.
Design decisions at this stage had direct business consequences. Company's $3M raise was contingent on demonstrating scalable growth across Nairobi — which required an app experience that retained users, not just acquired them.
Drop-off rate · Redesigned Group Buy flow
0%
All participants completed the Group Buy joining flow without drop-off. The 0% abandonment rate during onboarding was the key outcome of the redesign.
Post-redesign task completion
~90%
Completion rate across usability studies after redesign — including the Pamoja joining flow, guided onboarding, and Community Leader task studies. Drop-off fell to approximately 10%, down from significantly higher baseline friction in the original web experience.
Task completion
+57%
All tested users rated their experience of the redesigned joining and Pamoja flows at 4 or 5 out of 5 on the ease scale — with 0 responses below 4. No user found the redesigned core flows complicated. This was the clearest signal that the 3-tap principle and simplified navigation were landing.
2x
Search-initiated sessions doubled following the introduction of predictive suggestions, category filters as well as contextual results.
“The biggest impact wasn't a single metric — it was reducing the cognitive load of the group-buying model to the point where it felt like any other grocery app. Simplicity was the unlock.”
THE STRATEGY
Going Mobile-First
The strategic frame was: design for the mental model of a Nairobi shopper, not the technical model of the web product. This meant starting with how people actually think about buying groceries — not how the CMS was structured.
Envisioning the ecosystem
Our focus was on migration along with providing an improved experience for our mobile users on their e-commerce app, further research entailed that to instil confidence in e-commerce services, adoption for most Kenyans are channeled through web based online purchasing before committing themselves to an app. This led us to think about a more cohesive ecosystem that supplemented both platforms through a single in-house management tool.
THE SOLUTION
Specific decisions. Specific reasons.
Each solution was traced back to a named problem and a user insight. Nothing shipped without both.
Bottom tab bar with contextual drawer
The homepage navigation now has five clear tabs: Home, Shop Now, Shop Pamoja, Orders, and Account. 'Shop Now' lets users quickly add items to their cart, while 'Shop Pamoja' serves deal-seekers through community offers. This design makes navigation intuitive and user-focused.
Mini-cart summary + progressive checkout
A sticky cart pill at the bottom of every browsing screen showed item count and total price — allowing users to continue shopping without losing sight of their basket. Checkout was broken into three distinct, named steps (Basket → Delivery → Confirm) with a linear progress indicator, eliminating the "where am I?" anxiety that drove abandonment.
Search with predictive suggestions
Search was elevated to a dedicated experience — not a toolbar element. On tap, it expanded full-screen with predictive category suggestions, recent searches, and trending items. Results included smart filters (price, freshness, deal type) and handled common query variations — so "sukuma wiki" and "kale" returned the same product. For the company's catalogue density, search became the primary navigation path for repeat users.
New Home screen interface with anchored entry moments
The Home screen was rebuilt around a clear visual hierarchy: delivery promise (speed and location) above the fold, followed by the Ksh 300 new-user offer as a high-contrast banner, then curated deals, then category browsing. The community leader local shop discovery — "Shop Local" — was introduced as a distinct section, giving it the prominence it deserved without competing with the primary consumer browsing flow.
THE DESIGN
Principles that held.
Beneath every screen was a set of design principles specific to Tushop's context — a quick-commerce app serving mobile-primary users in Nairobi, where data costs matter and trust is earned through clarity.
PRINCIPAL 01
3 Taps maximum
Any primary action — adding an item, starting checkout, finding a category — had to be reachable in three taps from the home screen.
PRINCIPAL 02
Speed as a UI Signal
The 90-minute delivery promise wasn't just marketing copy — it was a design constraint. Every screen had to move fast: transitions were minimal, loading states were purposeful, and the app never made users wait
PRINCIPAL 03
Nairobi’s First Design
Typography scales accounted for readability on mid-range Android devices. Colour contrast passed WCAG AA under bright sunlight conditions.
PRINCIPAL 04
Trust Through Transparency
Every key moment — pricing, delivery ETA, savings calculations — was surfaced explicitly. No hidden fees, no surprise totals.