This UI/UX Redesign Will Teach You More Than 100 Tutorials Combined

Main ideas / lessons conveyed

• Treat a product page as part of a real “system,” not a single mockup: designs must remain readable and consistent across different real-world content (e.g., different product images, catalogs, and states).
• Use UX principles to support decisions quickly: place key information (like ratings and price) where users need it most, and reduce uncertainty.
• Improve clarity through visual hierarchy: manage contrast, spacing, typography, icon consistency, and color saturation so users can scan fast and trust the content.
• Design for the full purchasing flow: don’t stop at fixing “broken” visuals—make the entire buy process more convenient and resilient during scrolling.

---

Detailed methodology / “fixes” presented (Mistakes + Solutions)

Mistake 1: Icons lost against image background

Problem

• Navigation/product icons sit directly above an edge-to-edge product image.
• Works only when the image happens to be dark enough; fails with lighter images.

Solution

• Add a subtle background container behind icons.
• Ensure sufficient contrast and add a thin outline to keep icons readable on any image.

---

Mistake 2: Product image choice/layout inconsistency

Approach

• Compare six visual options (A–F) for how the product image should look and integrate with the overall catalog.

Key critique points

• Too busy/congested → unclear focus (Option A).
• Focus shifts to hands → feels like a lifestyle photo rather than a product shot (Option B).
• Misleading representation (single unit vs sold-by-weight) (Option C).
• Artificial look / unnatural background (Option D).
• Looks good alone, but won’t scale in a grid due to varied backgrounds/lighting/props (Option E).

Solution / principle

• Choose an image style that preserves authenticity while keeping a consistent clean background so the catalog remains visually unified.
• “Design once” for a consistent visual system, not just a single product card.

---

Mistake 3: Alignment/grid inconsistency

Problem

• Text/icons/prices/buttons/sections not aligned consistently.
• Indents are inconsistent; elements drift left/right.

Solution

• Define consistent indentation (example given: 24px from the left) and apply it across the page using a layout grid.

---

Mistake 4: Color too bright/saturated

Problems

• Harder to read.
• Weaker hierarchy because too many elements compete for attention.

Solution

• Switch to a softer, more natural palette that creates calm, highlights the product, and improves focus.

---

Mistake 5: Typography too many styles / not cohesive

Problem

• Too many font styles; no cohesive type system.

Solution

• Use one reliable font family (specifically mentions Lato).
• Build hierarchy using size, saturation, color, and line spacing.

---

Mistake 6: Labels (spacing + discount icon overload)

Problems

• “Fruit” label looks cramped due to tight letter spacing.
• Discount label is visually overloaded: text + icon together in a small area.

Solutions

• Increase letter spacing for small lowercase text so it “breathes.”
• Simplify discount UI: use something like “-20%” (icons should be instantly readable and not distracting).

---

Mistake 7: Title hierarchy unbalanced

Problem

• Boldness doesn’t match the intended hierarchy; title doesn’t scan cleanly.

Solution

• Adjust size and saturation so the product name stands out without looking “screaming” or overemphasized.

---

Mistake 8: Paragraph text cramped

Problems

• Line spacing too tight → description feels cramped and harder to read.
• Contrast likely too strong for quick comfort reading.

Solution

• Increase line spacing.
• Slightly reduce main-text contrast for quicker readability.

Rule stated

• Headlines attract attention; paragraphs provide understanding.

---

Mistake 9: Reviews rating located too far from product name

Problem

• Users must search for rating and trust signal.

Solution

• Move rating closer to the product name so users instantly see:
  • what it is
  • its rating
  • whether others trust it

Underlying UX idea

• Place information where users need it most to support the decision.

---

“Guidance layer” (platform mention)

• Mentions UX Peak Plus as explaining not just what looks good, but why it works and how to apply the logic.

---

Error 10: Benefit/function icons inconsistent

Problems

• Too many colors.
• Icons vary in style/weight (heavy vs light, filled vs outlined).

Solution

• Simplify icon colors.
• Standardize icon visual logic.
• Reduce inconsistent indentation.

---

Error 11: Dividing lines too dark/massive

Problem

• Overly prominent lines break cohesion into harsh blocks instead of seamless sections.

Solution

• Make dividers lighter/sophisticated/clean for a more premium, integrated look.

---

Error 12: Indentation balance (too much whitespace in wrong places)

Problem

• Excess spacing makes the layout feel disjointed.

Solution

• Reduce indents slightly so blocks feel closer and the interface looks more cohesive.

Principle

• White space should create the correct relationships between elements, not just add emptiness.

---

Error 13: Redundant “price” label

Problem

• “Price” text before the number is superfluous because currency/number already conveys it.

Solution

• Remove the “price” label.
• Keep sign/format consistent and consider the quantity selector placement for consistency.

---

Error 14: Product name includes “1 kg” (misleading)

Problem

• Name implies fixed weight (“1 kg”), but users can change quantity.

Solution

• Make product name describe the product (not the selected quantity).
• Handle quantity separately in the purchase area.

Additional improvement

• Move price higher / make it visible earlier in the user’s scanning path so users learn what it is and costs sooner.

---

Error 15: Add to Cart button too aggressive + poor layout with quantity

Problems

• Button appears overly loud (“screaming”): capital letters + large size + aggressive styling.
• Quantity selector too far from “Add to Cart,” breaking the buying workflow.

Solutions

• Soften the “Add to Cart” button styling (make it more elegant).
• Place quantity selector next to the button (users typically set quantity then add).
• Include unit of measure (kilograms) directly in/near the selector.
• Show the total price inside the “Add to Cart” button so cost is known before clicking.

---

“Take it further” improvements (not just visual fixes)

Improvement 1: Convert content into a scrollable card

What changes

• Wrap content into a rounded card with subtle shadow.
• The product image has its own dedicated space.

Behavior during scroll

• As the user scrolls, the card slides over/overlays the image while the product remains visible initially.
• Once the image stops being the focus, the product name moves to the top navigation and becomes pinned.

Benefit

• Users don’t lose context while scrolling deeper.

---

Improvement 2: Add a pinned bottom action bar

What stays visible

• Quantity selector + “Add to Cart” remain visible during scrolling.

Why it matters

• Users may scroll to read details, compare items, or browse related products before deciding—so actions must remain accessible.

---

Improvement 3: Predefined quantity options

Example options

• 500 g, 1 kg, 2 kg.

UX behavior

• Users can select common quantities with one tap instead of repeatedly adjusting.
• Options can be derived from real purchase data (what most users buy).

Flexibility

• Still allow manual quantity selection for cases outside defaults.

Outcome

• Scales across products with consistent layout, predictable scanning, and easier information retrieval.

---

Speakers / sources featured

• Speaker/Creator (unnamed): the person giving the UX/UI redesign walkthrough and commentary.
• Source/Platform mentioned:
  • Mobbin (used to explore real-world product UI patterns; sponsorship/discount mentioned).
  • UX Peak Plus (platform mentioned for analyzing UX/UI solutions and “why it works”).