--------------- ------------------ -------------
Increased revenue at the product card level
I helped the product turn the item page into a conversion-driven showcase: strengthened visual content, clarified information structure, and embedded upsell scenarios. The product card began to actively drive average order value, trust, and repeat purchases.
Systems thinking
Information architecture
Scenario design
Unit economics
UX patterns
In-product upsell
The card was treated not as a static description screen, but as a critical funnel step between user interest and adding an item to the order. The goal was to reduce uncertainty, strengthen the emotional appeal of the product, and embed upsell mechanics — allowing the card to both support confident user decisions and drive key business metrics: add-to-cart conversion, average order value, and repeat purchases.
Problem
The card didn’t sell
The card showed only one image, a title, quantity, and weight. Users couldn’t understand what made the item appealing or feel an emotional “I want this.”
Set composition was unclear
Set contents were hidden in plain text. Users couldn’t quickly see which rolls were included or whether they could order them separately. This blocked upsell opportunities and created friction and doubt.
Nutrition info only “per 100 g”
Nutritional values were available only per 100 grams and buried deep in the card. Users either had to calculate manually or order blindly.
No modifiers
Users couldn’t add or remove ingredients. The product lineup includes pizza, wok, and other items where customization is an expected standard. This reduced loyalty and led to missed revenue from paid add-ons.
No contextual upsell
There were no cross-sell or upsell mechanics — just “add to cart and leave.” No soft suggestions, no focus on high-margin items.
Hypothesis
If
  • Turn the product card into a visual showcase with large imagery or video and persuasive copy;
  • Make set composition and nutrition data transparent and easy to scan;
  • Give users control over ingredients through modifiers;
  • Embed soft upsell directly into the card without breaking familiar app patterns;
Then
  • Conversion from card view to add-to-cart will increase;
  • Average order value will grow through add-ons and paid modifiers;
  • Dissatisfaction around ingredients and expectations will decrease;
  • Brand trust and loyalty will increase.
Task
  • Turn the product card into a showcase that sells through visuals and copy;
  • Shorten the path from interest to adding to the order: fewer steps, more clarity;
  • Ensure transparency around ingredients, allergens, and nutrition — no guessing or manual calculations;
  • Integrate modifiers and upsell into a single, cohesive flow without breaking existing UX patterns
Solution
Visual layer of the product card
For key and high-margin items, the visual layer is enhanced with short videos that present the product up close, highlighting texture and presentation. At the same time, static imagery remains the foundation of the card. A unified visual standard preserves pattern predictability and keeps content production costs under control, while video is used as an additional layer where it meaningfully strengthens perception and impacts user choice.
Marketing copy and persuasive description
A compact marketing block explains what the item is, how it differs, and which use case it fits. The copy focuses on taste and value, not a dry list of ingredients.
“Set Composition” module
Each item in a set is displayed as a mini card with an image, name, and deep link to its own product page. Users can navigate from the set to individual items and add them separately — a direct upsell channel.
Transparent nutrition and allergens
Nutrition data is moved to a clearly visible block, visually separated from the description. Two values are shown: per 100 g and per full portion — users immediately see the real calorie impact. A “Composition” button opens a dedicated screen with ingredients and allergens, structured and accessible in one tap.
Native upsell
A recommendation module sits below the main card content: relevant rolls, sauces, drinks, and side items. Items can be added in one tap without leaving the card. Upsell is embedded softly — it doesn’t block the main CTA or disrupt the primary flow.
Flexible modifiers
The card now supports modifiers that were previously missing:
  • paid ingredient add-ons;
  • free removal of unwanted ingredients.
The modifier logic is universal and scales across categories with high customization expectations, without fragmenting the catalog into dozens of separate SKUs.
Design approach
Product-first focus
The goal wasn’t “a prettier card,” but a monetization point. The product card is treated as a revenue and retention tool. Every decision is tied to a metric: add-to-cart conversion, average order value, share of modified orders, repeat purchases through trust. Video is used only where it pays off — popular and high-margin items where content investment is justified by sales growth.
Existing experience analysis
Key loss points were identified: unclear set composition, hidden nutrition data, lack of customization, and no upsell. Based on this analysis, a structure was built that removes blind spots and answers user questions before they reach the cart.
Content and cross-team collaboration
I created guidelines for marketing and content teams:
  • video length, angles, and product focus;
  • background and lighting requirements;
  • criteria for using video (popularity, margin, seasonality).
This prevents content overuse and keeps production efficient. Text structure was standardized: short headline, subheadline, and description — easily editable by content teams without designer involvement.
Product Scalability
The card was designed as a modular system that supports multiple states:
  • set;
  • single item;
  • item with modifiers;
  • video-based card.
One set of patterns covers the entire catalog, simplifying maintenance and future development.
Implementation details
  • Rebuilt the card’s information architecture: media block, title and marketing copy, set composition (for bundles), nutrition and ingredients, modifiers, upsell, CTA;
  • Designed media states: static photo and auto-playing video with controlled duration and safe behavior;
  • Designed navigation flows from “Set Composition” to individual product cards and back, preserving context and quantity;
  • Replaced long text descriptions of sets with a grid of clickable mini cards for each included item;
  • Moved nutrition data into a dedicated visual block showing both per 100 g and per portion values — eliminating mental math and reinforcing transparency;
  • Integrated modifiers into the core card architecture: paid add-ons with clear price impact and free removals. The logic scales across rolls, pizza, and wok categories;
  • Designed the upsell block using the same visual language and CTAs as the catalog, so it feels like a natural continuation of choice;
  • Validated hierarchy and readability on real layouts: first glance — media and price; second — composition and nutrition; third — modifiers and upsell.
Estimated results
  • Higher card-to-cart conversion due to a more persuasive first screen;
  • Increased average order value through in-card upsell, paid modifiers, and transitions from sets to individual items;
  • Reduced uncertainty and negative expectations: fewer support requests about ingredients and allergens, fewer “this isn’t what I expected” complaints;
  • Increased loyalty: transparent nutrition and flexible customization create a sense of control and respect for the user.
The redesigned product card became more than a product page — it’s a conversion-driven showcase. It reduces doubt, sells visually, makes composition transparent, and opens additional revenue channels — all while preserving familiar navigation patterns within the app.
Made on
Tilda