Case study · SugarBox Networks · 2022

Redesigning e-commerce for SugarBox

A hyperlocal content app on 500+ Wi-Fi zones had brands lining up — but almost nobody was buying. This is how we found out why, and redesigned discovery to fix it.

Role: Director of Design
Year: 2022
Platform: Web app
Scale: 500+ Wi-Fi zones
Method: Double Diamond · Lean UX

SugarBox WebApp shop screens on two phones

01 · Problem

The problem

Over the recent weeks, not only have we seen e-commerce traction in onboarding brands, but we are also seeing initial traction in terms of transactions. It makes sense now to define an overarching and coherent strategy for e-commerce on the SB platform to guide business, product and design decisions moving forward.

Multiple approaches were used to identify the problems with the e-commerce category, to address two fundamental questions:

Why is there a low conversion rate for e-commerce in the SugarBox App?Question one · Conversion

What strategies should we implement on business, product & engineering level to ensure e-commerce succeeds as a category?Question two · Strategy

02 · Objectives & goals

Objectives & goals

The project started with the context set by the business head: the business goals we wanted to achieve with the e-commerce category, and the challenges identified about its value proposition and market positioning.

Strengthening our brand positioning

The experience of finding your next favourite brand previously unknown to you, and getting amazing deals on it exclusively on SugarBox.

New user acquisition & engagement

Ensure users are acquired through great deals, but kept engaged by a lasting incentive to come back — e.g. loyalty programs.

Gather consumer insights

Analyse consumer browsing & purchase behaviour and use it in more effective marketing strategies and more personalised experiences.

03 · Scope of work

Scope of work

My Role & Skills

Experience strategySecondary researchUX designUI designPrototyping

User experience strategy
Stakeholder management
Project planning & allocation
Facilitate output-oriented primary research
Conduct design thinking workshops
Guide & co-design UX/UI outputs
Proposal to the CEO & all function heads, based on real insights, to fine-tune business strategies and discuss product roadmap prioritisation

04 · Design process

Design process

I applied a framework based on the Double Diamond theory and the Lean UX process with my team. There was an opportunity to discover problems and user needs, and define the scope of the product, before designing the actual solution.

05 · Phase 01 · Discover

Understanding the business requirements

The project started with the business head setting the context, the business goals we wanted to achieve with the e-commerce category, and the challenges identified around its value proposition and market positioning.

Business context

Over the recent weeks, not only have we seen e-commerce traction in onboarding D2C brands, but we are also seeing initial traction in terms of transactions. It makes sense now to define an overarching and coherent strategy for e-commerce on the SB platform to guide business, product and design decisions moving forward.

Brand positioning for e-commerce category

The experience of finding your next favourite brand previously unknown to you, and the possibility of encashing your engagement in our platform to get amazing deals, builds into the magical digital experience brand positioning of SugarBox.

06 · Phase 02 · Research

Secondary research & product experience analysis

We started by looking into data about what our users were doing. An extensive exercise of existing e-comm event tracking and funnel mapping was done with Product and Marketing stakeholders, and the following results surfaced.

Research findings

2 / 70

Among 70 product taps averaged in a week, only 2 reached the order-checked-out stage.

Successful orders in total in the month since the e-comm category launched.

High

Drop-offs across captured events — insights into the effectiveness of UX, and tech issues in the app.

Analytics dashboard for the e-commerce discovery widget, showing drop-off at each step

Daily funnel spreadsheet from app open to payment success

Heuristics evaluation

We did a heuristics evaluation as UX/UI experts to find usability issues, anticipating user behaviour and empathising with reasons for drop-offs. Earlier analytics for events like “Carousel” and “Shop icon tap” told us which user flows to focus on.

Home page

01 / 11

Low tap rate

There were hardly any clicks on the Shop tab. The only way users went deeper into the e-comm funnel was through content rails on the homepage.

Most users never discovered 95% of our product catalogue.

Primary research

User research

Methodology · User surveys

A Google survey form was sent as a direct mailer to existing SugarBox users to learn key information about them and their e-commerce shopping behaviour.

Objectives

Find triggers and influencing factors that lead users to visit e-comm sites and buy.
Study behaviour and derive shopping patterns in discovering, considering and purchasing different categories.

Google survey form sent to SugarBox users about online shopping

Key results from research

Top reasons why people Shop Online

Ease of shopping86%
Return Policies83%
Discounts/Offers73%
Reviews/Ratings73%
Wide range70%
Compare Products43%

Impulse Buying Index

Sometimes66%
Never23%
Quite Often10%

Top pain points

Bad quality, damaged or wrong products delivered.
Product description differs from the actual product.
Refund-related hassles.
Delayed deliveries; no return or replacement policies.
Poor customer service for order issues.
Trust issues of being a fraud e-commerce site.
Confirmed orders cancelled due to out of stock.
Belief that platforms carry many fake reviews.

Secondary research

Consumer shopping behaviour varies from digital to traditional shoppers. Younger, digital consumers seek personalisation and technology over promotions, whereas the traditional, older generation values true savings.

Source: skai.io/blog/consumer-shopping-behavior

Illustration of a young shopper buying online on a laptop

Digital Consumer

18 to 37 years old

Illustration of a shopper holding up a pair of jeans in a store

Traditional Consumer

38+ years old

Phases of the Consumer Funnel

Research

Digital Consumer

62% — Build a shopping list
59% — Compare prices
44% — Look for offers & discounts
49% — Check customer reviews

Traditional Consumer

57% — Build a shopping list
64% — Compare prices
57% — Look up offers & coupons
42% — Look up product information

Purchase & Expectations

Digital Consumer

77% — Same-day delivery
84% — Free delivery
71% — Prefer automated pick-up and return processes
Look for personalisation

Traditional Consumer

57% — Same-day delivery
64% — Free delivery
41% — Automated pick-up processes may be nice, but not necessary
Focus on availability; pay via COD

Transaction & Delivery

Digital Consumer

65% — Want personalisation
61% — Want a curated selection of products from SMEs
60% — Want recommendations based on what is closest to their choice
Free delivery is good, but not necessary

Traditional Consumer

63% — Want an app to notify them when out-of-stock products are available
60% — Want to search in-store inventory
Prefer free delivery

Social Satisfaction

Digital Consumer

61% — of shoppers share a positive experience on social media
56% — of shoppers share a negative experience on social media
100% — All shoppers said they would stop shopping at a retailer altogether after a bad experience

Traditional Consumer

29% — of shoppers share a positive experience on social media
27% — of shoppers share a negative experience on social media
100% — All shoppers said they would stop shopping at a retailer altogether after a bad experience

Competitive analysis

We looked at various e-commerce platforms and identified a high-level user journey for our initial brainstorming of journey maps and product ideation.

01Awareness
02Discovery
03Consideration
04Purchase & use
05Loyalty & advocacy

01 / 04

Pinterest home feed arranged from pre-selected interests and past searches

Discovery of products & services

A user sees new posts and reels based on pre-selected interests.

Pins below are arranged from previous searches and browsed categories.

07 · Phase 03 · Define

User personas

Type of users

User type	Shopping behaviour	Key goals
Product focused	Know exactly what they want	Clear identification of each product through descriptive names and clear images An effective search to quickly locate items and pick the right one Easy access to previously purchased items for simple reorder A streamlined checkout
Browsers	Go to favourite or new sites for inspiration or to kill time	Listings of new, popular and sale products Easy access to new inventory through related links and recommendations Ability to share products they like
Researchers	Plan to purchase — today, next week, or in six months	Clear, detailed product descriptions Definitions of unfamiliar terms in context, in easy language User reviews Easy comparison between products Easy-to-edit carts that retain products between visits
Bargain hunters	Look for the best deal possible	Sale items alongside full-priced inventory, plus a clear discount section Prices with associated discounts and savings Easy coupon redemption, or discounts applied automatically
One-time shoppers	Visit once, for a one-time need	Clear site navigation Complete product descriptions Clear, trustworthy company information Checkout without registration

Personas

The browsing shopper

“I enjoy browsing the internet for inspiration and purchasing items when I like what I see.”

I’m Ritika Agarwal, a 32-year-old teacher from Bangalore. Once a month, I do grocery shopping. Making a list, going shopping, carrying the items home, and everything in between takes time, effort, and is frustrating.

Main goals / what do they want?

To get my household groceries delivered monthly, with least effort.
To discover offers and discounts and ensure I get the best price.

Pain points

Offline shopping takes time — locating items, queues, carrying everything home.
I want to keep tabs on my spending and get the greatest deal.

Apps frequently used

ZomatoSwiggyZepto

Product of interest

Grocery itemsApparels

The researching shopper

“I have a need your product may solve, but I won’t buy it until I’ve thoroughly compared it to all of the other possibilities.”

I’m Gaurav Sharma, a 25-year-old self-made businessman from Delhi. I routinely shop online for convenience and time savings — researching products, cross-buying and finding the best discounts.

Main goals / what do they want?

To buy a high-standard product; willing to pay.
Value for money.
Support for post-purchase issues.

Pain points

Not getting clear product details.
No option to compare products.
Customer reviews too limited to validate quality.

Apps frequently used

AmazonAjioFlipkart

Product of interest

ElectronicsApparels

Slide 1 of 2: The browsing shopper — Ritika Agarwal

User journeys

Bargain hunter

Prashant19 years · Male · HyderabadGoal: On the metro, wants to buy a gift for his father. Challenge: Limited time & budget to buy the gift.

Stage of journey	Motivation	Connected to SB app	Browses the app	Evaluates products	Purchase	Delivery	Support
Activities	Wants to buy a Father’s Day gift for his father.	Entered the metro station and saw an SB advert. Downloaded the app. Boarded the metro and connected to SB Wi-Fi.	Landed on the SB homepage. Tapped the e-comm product category.	Opens a product page to check details. Opens more product pages to compare prices and details.	Added the product to the cart to buy later.	Wants free shipping and home delivery.	Drops an email to customer care with delivery instructions.
Experiences	Excited to give a surprise to his father.	Happy to see SB’s free Wi-Fi for exploring gifts on the metro. Downloaded the app in dual connectivity. Connected to SB Wi-Fi without any challenges.	Unsatisfied — categories are exclusively OTT, not e-commerce. Happy with the shopping category but unsure how to find the best product & price.	Will my father like this product? How do other customers feel about it? Is the cost reasonable compared to similar products?		Will the product be delivered in line with my preferences?	Will there be a refund if my father doesn’t like it?
Customer expectations	Never receives discount updates, hot deals, upcoming sales or coupons.		Occasion-based categories to consider gifts, and what others buy for the same occasion. Occasion-based categorisation to simplify buying.	The product’s unique value proposition. Reviews, ratings, photos and videos from buyers. Price comparison across partners and platforms.		Pin-code-based delivery timeline, tracking and cost.	Refund, cancellation and installation policies.

Bargain hunter

Rekha35 years · Female · ChennaiGoal: Travelling on the metro, wants to order an organic product for herself. Challenge: An online store selling original organic products at an affordable price.

Stage of journey	Motivation	Connected to SB app	Browses the app	Evaluates products	Purchase	Delivery	Support
Activities	Wants an organic product to maintain her diet plan.	Entered the metro station and saw an SB SALE advert. Downloaded the app. Boarded the metro and connected to SB Wi-Fi.	Landed on the SB homepage. Tapped the Praakritik partner category.	Taps a product to check details. Opens more product pages to compare prices and details.	Taps “Add to Cart” to order.	Wants delivery within 48 hours.	Wants to view the refund and cancellation policy.
Experiences	Unhappy about finding organic products at an affordable price.	Happy to see SB’s free Wi-Fi for exploring products on the metro. Excited to scan a barcode to download the app. Connected to SB Wi-Fi without any challenges.	Unsatisfied — categories are exclusively OTT. Can’t find product varieties at affordable prices.	Can’t find the product’s uniqueness and price. How do other customers feel about this product? Is the cost reasonable compared to similar products?		Is there an express delivery option?	Will there be delivery charges if she returns it in time?
Customer expectations	Find authentic, certified organic produce online. An app with a sale running on organic products.	The easiest way to download the SB app.	Explore organic products that suit her body, diet plan and budget. Multiple product rails — unique value, best deals, trending.	Product authenticity and nutritional information. Reviews, ratings, photos and videos from buyers.	A better price during the sale.	Short delivery so she can start her diet plan.	Clarity on who bears return delivery charges.

User story

The browserPrakash browses SugarBox and discovers a product he could buy as a gift for Eid. He decides by discussing it with his wife.

Stage	Onboarding	Discovery	Consideration	Decision	Delivery & use	Loyalty & advocacy
Customer activities	Boards the metro for a 30-minute daily commute. Learns about SugarBox and its positioning, and opens the WebApp.	Browses and discovers content — a latest movie, some products, various categories.	Considers a product to gift. Product showcase and other catalogue trigger consideration. Looks at colour, aesthetics, specs, price and discount.	Wants to discuss it with his wife. Shows it to her at home; she suggests something else. They browse SugarBox together and buy.	Out of scope	Out of scope
Customer needs	Here to pass time. Be intrigued by something.	Pass time; browse with no objective. May be biased towards watching a movie.	Pass time; browse with no objective.	Needs to discuss with a family member before deciding.
Business goals	Excite users about SugarBox and onboard them to try it once. Easiest learning curve to onboard.	Intrigue users with some content as fast as possible. Ensure users discover all categories and partner content.	Promote purchase with information, persuasive campaigns and trust.	Get one or more purchases. Otherwise, get items into the cart and remind later.
Touchpoints	Billboards on and in the metro Flyers In-metro announcements Video standees	Homepage Content pages of interest Category landing pages Subcategory pages	Homepage Category landing pages Brand catalogue pages Cart & wishlist	Homepage Brand catalogue pages Cart & wishlist
Thoughts & emotions	Wow! I’m interested to try this. Free, uninterrupted content from the internet.	There are movies I can pass my time with. Not interested — no need to buy any of these.	This content seems interesting. This product may be good to purchase.	Let me add it to my cart and decide later. It might go out of stock — I’ll buy it now.
Pain points	No seat until major stops. The metro is crowded and noisy.	Some content is irrelevant to me. What all does SugarBox offer?	Is it sensible value-wise? Will it do its job? Is it well priced?	When will it be delivered? Is my money safe? How do I pay? Is it a genuine company?
Business problems		Discovery of relevant content: how do we ensure users discover relevant content and convert?

Slide 1 of 3: Bargain hunter — Prashant

08 · Phase 04 · Design

Potential product ideas

Opportunities across the journey

User story · The browser

Opportunities for onboarding

We followed the browsing shopper's first visit and marked the moments where onboarding could set expectations early and bring them back. The next five ideas come from these moments.

Android phone showing a web app’s prompt to allow notifications

Opportunities for onboarding · Idea 1

Get push notification permissions for the web app

When a user logs in to the mobile web app, ask them to accept notification permissions.

Flipboard saw 75% growth in mobile active users — “Bringing Push Notifications to the Mobile Web”

ImpactOpens an engagement channel with the user.

Flow from opening the app to triggering Add to Home Screen, beside two examples: Twitter’s home-screen banner and an Add to Home screen dialog

Opportunities for onboarding · Idea 2

Add to home screen overlay

The overlay should only appear after at least one successful task.

Open the app
Give notification permission
Browse content
Finish consuming one piece of content
Trigger “Add to Home Screen”

ImpactBrand recall, and users coming back — more monthly active users.

Instagram post with its Save to collection sheet open

Opportunities for onboarding · Idea 3

Onboard the key interactions

Teach the interactions we’d like users to know, so expectations are set early — a mental model for the app, a habit, and data towards consumption, conversion and engagement goals.

Teach users to like content
Teach users to dislike content, with objective feedback — not interested, or the wrong language (video only)
Teach users to curate items in a favourites list

ImpactBetter content discovery, hence better consideration and conversion.

A wishlist recommendations screen beside a Croma category page with its breadcrumb highlighted

Opportunities for onboarding · Idea 4

Onboard the e-commerce interactions

The same idea for shopping: introduce the interactions that lead to more products.

Promote favouriting, and adding items to the cart
Power features that discover more products from the listing page
Encourage discovery of category landing pages from the home and listing pages
Point out breadcrumbs on category pages, which lead to a brand or category page

Tata Neu screen celebrating a milestone with NeuCoins

Opportunities for onboarding · Idea 5

A get started guide

Build the app around a loyalty program: every positive activity earns users virtual coins.

Coins for data consumption
Coins for purchases
Coins for successful referrals
Coins for creating a profile

ImpactUser demographic data, engagement, more conversion and more monthly active users.

Slide 1 of 6: Opportunities for onboarding

User story · The browser

Opportunities for discovery

We mapped where the browsing shopper loses interest and marked the moments where better discovery could change the outcome. The next eight ideas come from these moments.

Opportunities for discovery · Idea 1

Homepage first fold

Choose top content from all categories and showcase it on the first fold.

ImpactMaximum visibility (impressions) for any content we want to promote.

Concept: real-time feed that refreshes from likes and lists

Opportunities for discovery · Idea 2

Like or dislike — Top 100

Discover Top 100 as a category: explore 100 pieces of curated content to find out what’s new. It works opposite to likes and dislikes — more of an exploring tool.

ImpactShowcases new content outside user preferences, and gives more like/dislike data for the recommendation engine.

Concept: explore screen showing every category and subcategory upfront

Movies

TV Shows

ElectronicsEarphonesHealth & Sports TechSmartscalesBadminton TrackerFitness Trackers

FashionWomen’s Jewellery

Food & HealthOrganic FoodPraakritik OrganicFood Gift Box

GiftingFood Gift BoxMen’s Grooming

Beauty & BathMen’s GroomingBath Salts

Opportunities for discovery · Idea 4

Emphasise discovery of all categories

Showcase e-commerce subcategories upfront — more partners would come in future and get discovered this way.

ImpactDiscovery of subcategories along with main categories.

Concept: interest picker for choosing favourite categories

Opportunities for discovery · Idea 5

Know your user’s interests

Display 75% of the content type users selected; the rest is for discovering new categories. Users pick keywords on every category landing page to curate their first set of content.

ImpactRelevancy of content leads to better conversion.

Opportunities for discovery · Idea 6

Promote brands with the right visual merchandising

Users wouldn’t know what products brands offer — help them with the right visual or copy.

ImpactBetter discovery of product and category offering, hence a positive reaction to brand taps.

Concept: category landing page with subcategory chips

Movies / TV showsBy languageBy genreBy timeBy year

By languageHindiEnglishMarathiTeluguTamil

By genreActionAdventureComedyRomanceThrillerHorror

By timeLatest2000s90s80s70s60s

Opportunities for discovery · Idea 7

Subcategories on category landing pages

Enable subcategories and experiment with multiple touchpoints for adoption.

ImpactIdentify which touchpoints drive adoption.

Concept: recommendations based on past purchases

Concept: recommendations based on browsing history

Opportunities for discovery · Idea 8

Recommend products from browsing history

Build a recommendation engine mapping complementary products. Save browsing history and past purchases so users can resume shopping, and show wishlist items.

ImpactUsers pick up where they left off.

Slide 1 of 9: Opportunities for discovery

User story · The browser

Opportunities for consideration

We followed the browsing shopper to the product page and marked the moments where they weigh whether to buy. The next ten ideas come from these moments.

Opportunities for consideration · Idea 1

Remind users to curate items in lists

A like button on every post, with feature onboarding, and a way to add any content to a list or folder of the user’s own.

ImpactCurated products can be bought later, recommended to others, and trigger a reminder when an offer launches.

A Weddings occasion banner beside a Xiaomi beard trimmer offer page

Opportunities for consideration · Idea 2

Occasion and discount categories

Occasion- or discount-based categories that help users consider gifts others are buying for the same occasion.

A headphone specification table beside an annotated bicycle product image

Opportunities for consideration · Idea 3

Compelling product descriptions

Unique product descriptions that describe the product’s proposition accurately while enticing users to buy.

A bed’s product gallery with customer photos, beside red headphones with colour options

Opportunities for consideration · Idea 4

Product photos with options

Product photos with various options.

A booking price breakdown with fees, beside a TV’s size options and offers

Opportunities for consideration · Idea 5

The full price

Price, including any additional product-specific charges.

A delivery-by-pincode panel beside a Wakefit product page with a free-delivery date

Opportunities for consideration · Idea 6

Availability and delivery time

Product availability and delivery time.

Item added to cart confirmation with recommended products

Opportunities for consideration · Idea 7

Clear add-to-cart feedback

A clear way to add the product to the cart, and clear feedback when it has been added.

A hostel listing with a rating badge, breakfast included and “Only 1 bed left at this price”

Opportunities for consideration · Idea 8

Social proof and urgency

Bestseller tags, ratings and how many people rated, how many customers are interested, “selling fast” and low-stock warnings, free cancellation. Reference: fomo.com.