Redesign Project

Beauty, Simplified

Optimizing the mobile checkout experience for Tica, a sustainable beauty brand.

Mobile-first

Mobile-first

Enhanced Flow

Enhanced Flow

Conversion-driven Design

Conversion-driven Design

Understanding Tica's Users and their Pain Points

The Typical Tica User

Tica’s customers are:

The typical user of Tica Sustentable is:

Environmentally conscious: They value eco-friendly, cruelty-free products.

Health-focused: They prioritize gentle, chemical-free options.

Digital shoppers: They expect seamless, mobile-friendly online experiences.

Value-driven: They want transparent pricing and clear benefits.

The Problem with Mobile E-commerce:

Mobile cart abandonment is as high as 80%. The reason behind such high rates are most of the times due to common design pitfalls:

Product Pages (PDPs):

Product Pages (PDPs):

  • Limited above-the-fold content: Users cannot see product details or CTAs without scrolling. Moving CTAs above the fold can increase conversions by up to 28%.

  • Limited above-the-fold content: Users cannot see product details or CTAs without scrolling. Moving CTAs above the fold can increase conversions by up to 28%.

  • Lack of emotional connection: Images fail to resonate or create aspiration.

  • Lack of emotional connection: Images fail to resonate or create aspiration.

Carts:

Carts:

  • Overloaded information: Crowded designs lead to confusion and distraction.

  • Unclear incentives: Users struggle to interpret free-shipping incentives.

  • Unclear incentives: Users struggle to interpret free-shipping incentives.

Checkout Flows:

Checkout Flows:

  • Long, clunky forms: 69% of users abandon carts due to complicated checkouts.

  • Long, clunky forms: 69% of users abandon carts due to complicated checkouts.

  • Buried CTAs: Poorly placed buttons reduce accessibility and flow.

  • Buried CTAs: Poorly placed buttons reduce accessibility and flow.

Redesigning for Accessibility and Conversions

The Product Detail Page (PDP)

Current Challenges

  1. Missing key information: Product names and key details are buried under the fold.

  1. Weak copy and images: No lifestyle imagery to connect emotionally with users.

  1. Accessibility issues: Poor text contrast.

  1. Hidden CTAs: Important elements like “Add to Cart” hidden below the fold.

Proposed Changes

  1. Above-the-fold information: Name, price, rating, and subtitle moved above the product image to ensure key details are immediately visible.

  1. Immediate access to reviews: According to multiple sources, 89–99.9% of consumers read online reviews before making a purchase.

  1. Lifestyle imagery: Use of images with models as the first image to create emotional connection.

  1. Focus on unique selling points: USPs directly below the image to reinforce the product's eco-conscious benefits.

  1. CTA above the fold: Add to Cart button above the fold to make it highly visible and actionable.

Extra: Enhanced contrast for main CTA and text.

Benefits:

Reduced friction and improved likelihood of conversions. Emphasis on elements building trust, aspiration and emotional connection.

The Cart

Current Challenges

  1. Missing information: No mention of product size.

  1. Lack of hierarchy: Incentives like free shipping and gifts are not organized efficiently and they force the user to make the maths instead of showing clear numbers to reach a target.

  1. External links: Gift offers require users to leave the cart to read terms.

  1. Hidden CTAs: Main CTA is below the fold

What They Nail

  • Ability to calculate shipping cost before reaching the shipping page. However, this could also be improved with better copy: instead of 'Shipping options' this could be 'Let's calculate your shipping cost'.

Proposed Changes

  1. Incentives progress bars: Clear progress bars for both free shipping and the free gift to motivate users to keep shopping.

  1. Informative cards: Mention of product size.

  1. CTAS above the fold.

Benefits:

  • Target-oriented flow: less distractions and clear incentives.

  • Better information hierarchy: The user is guided from top to bottom.

The Checkout Flow

Current Challenges

  1. Navigation: As soon as one lands on the checkout flow, one can see is already on step 2, 1 being the cart, but there is no clear way of going back.

  1. Mixed information: The information asked for does not aligned with the part of the checkout flow the user is in. Coupon codes and unrelated elements clutter every step.

  1. Scrolling instead of clicks: Grouping the review order details before payment details makes the checkout process 'shorter' but forces the user to scroll down to actually complete it.

What They Nail

  • Progress indicator: Use of steppers to show the user how much longer to complete the purchase.

  • Guest checkout: The user does not need to log in to complete a purchase, this removes a lot of friction.

  • Secure checkout: Showcase of safety badges.

  • Price Visibility: Price is visible at all times.

Proposed Changes

  1. Mobile first design: Multi-step click-based navigation (e.g., breaking checkout into Shipping > Payment > Review) simplifies decision-making at each stage by limiting the number of choices visible to the user.

  1. Mobile first design: Multi-step click-based navigation (e.g., breaking checkout into Shipping > Payment > Review) simplifies decision-making at each stage by limiting the number of choices visible to the user.

  1. Sticky CTAs and clearer navigation: Addition of sticky CTAs and "Back" buttons at the bottom for easier navigation.

  1. Sticky CTAs and clearer navigation: Addition of sticky CTAs and "Back" buttons at the bottom for easier navigation.

  1. Decluttering: The options showed are only the ones related to the part of the flow.

  1. Review screen: Dedicated review step before payment to reduce anxiety about errors.

Benefits

Clear steps and shorter chunks of information align with mobile-first design principles and maximize the likelihood of completing the checkout process by reducing cognitive load, confusion or accessibility issues.

Takeaway

By adopting a mobile-first, user-centered approach, this redesign transforms Tica's checkout flow into a streamlined, accessible, and conversion-focused experience. Clear CTAs, emotional connections, and transparent details cater to the modern, eco-conscious shopper while maximizing business potential.

In e-commerce, reducing friction isn’t just good for users—it’s good for business. This project shows how small, thoughtful design decisions can lead to big impacts in both user satisfaction and bottom-line results. 🌿🛒