Laptops displaying R+F's checkout page

E-commerce Checkout Experience

R+F encountered an issue with some of their skincare products being restricted from shipping to certain areas in the US. The solution will reduce expenses, replace manual processes to manage shipping restrictions and improve customer experience.

Timeline

    March - June 2023

Role

    Lead UX Designer
    Visual Designer

Tools

    Figma
    Adobe Illustrator
    Adobe After Effect

Design Strategy

    Web Design
    Visual Design

Responsibility

  • Led end-to-end redesign for items with shipping restrictions
  • Collaborated with PM to define product vision
  • Led UX discussions with stakeholders
  • Facilitated user testing for validation
  • Created Design Components for our system

Result

  • Decrease dropped cart rate by 25%.
  • Save potential extra cost by over $180,000 in one quarter
  • Drastically reduced customer complaint calls

Product Overview

Challenges with Previous Solutions

Rodan and Fileds is a B2C e-commerce company specializing in premium skincare and haircare products. This project aims to improve how we handle shipping restrictions throughout our customer's journey. However, the old solution is under performed and caused lot issue.

Frustrated user slumped over keyboard

Poor customer experience

Frustrated user slumped over keyboard

Intervention incurred extra costs.

Frustrated user slumped over keyboard

Over $18,000 of fines in 1 Week

Main Pain Points

Lack of awareness and Limited support for customers decision-making

After analyzing our previous shipping restriction solutions, I identified two main user pain points and they are including late notifications and unclear identification, as well as communication gaps resulting in increased customer support interactions and missed sales opportunities.

User Groups

Catering to Three Distinct User Groups

Rodan and Fileds is a B2C e-commerce company specializing in premium skincare and haircare products. This project aims to improve how we handle shipping restrictions throughout our customer's journey. However, the old solution is under performed and caused lot issue.

Guest Customers

Guest Customers

  • No account
  • Limited awareness
  • High-international shopper
Loyal Customers

Loyal Customers

  • Has an active subscription
  • Higher expectations
  • Exclusive  treatment.
Classic Customers

Classic Customers

  • At least one order
  • Efficient shopping experience.
  • Limited tolerance

Problem Statement

How might we effectively adhere to shipping regulations, while also enhancing user satisfaction?

Research

Competitive Analysis

I began my research by examining various platforms such as REI, Sephora, and CVS. Analyzing how these platforms communicate information about shipping restricted items at different shopping stages, I gained valuable insights.

  • Early Notification

    Inform users about potential restrictions early in the shopping journey.

  • Targeted communication

    Only alert users directly affected by restrictions to avoid disrupting casual browsing.

Design research from competitor implentations

Secondary Research

Capturing attention play a crucial role in enhancing awareness. So Finding the sweet spot in seeking the right amount of attention is key as we refine our strategy. To achieve this, I conducted secondary research to gain insights on effectively striking the balance when notifying our customers about shipping-restricted items.

  • Consider urgency and user actions

    Tailor communication based on importance and what users can do.

  • Guide users to solutions

    Provide clear pathways to resolve issues.

  • Utilize color and variation

    Employ strategic color choices and diverse approaches for better engagement.

Design Discovery

Analyzing User Needs for Shipping Restrictions Communication

My design discovery process involves analyzing user needs at different stages of the shopping journey to gain insight into how we should communicate information about shipping-restricted items.

Design discovery process

Design Exploration

Enhance awareness during different stages of the shopping process

Based on research insights, I designed solutions to keep customers informed about shipping restrictions throughout the shopping journey. This involved exploring various UI options and A/B testing indicator placements to optimize user awareness.

🟡 Moderate Urgency

For moderate restrictions, we explored contextual and passive notifications. The language used is purely informative, avoiding instructions.

Design Explorations
Least aggressive approach design exploration
Final Design
Least aggressive approach design implentation

🔴 Most Aggressive

For moderate restrictions, we explored contextual and passive notifications. The language used is purely informative, avoiding instructions.

Design Explorations
Most aggressive approach design exploration
Final Design
Most aggressive approach design implentation

🟠 Aggressive

In the post-purchase stage, where restricted information is moderately urgent, this design treatment primarily targets loyal customers with an active subscription cart. Clear communication of restrictions is crucial after auto-purchase, particularly for customers making future decisions based on shipping limitations.

Aggressive approach design exploration
To avoid banner blindness and differentiate from promotions, we opted for a modal window. This targeted approach allows users to focus on the shipping limitations immediately upon login, with a clear call to action for managing their subscriptions.
Aggressive approach design implementation
For moderately urgent post-purchase scenarios (e.g., subscription updates), emails need provide comprehensive information about shipping restrictions with a clear action button for resolving any issues.

Design Exploration

Enhance Awareness from Type of Product in Question

My design discovery process involves analyzing user needs at different stages of the shopping journey to gain insight into how we should communicate information about shipping-restricted items.

Example of awareness enhancing implementation.

Using different language for product type.

Bundle

Customization Process

In the post-purchase stage, where restricted information is moderately urgent, this design treatment primarily targets loyal customers with an active subscription cart. Clear communication of restrictions is crucial after auto-purchase, particularly for customers making future decisions based on shipping limitations.

Example of awareness enhancing implementation.

Post-Launch

Impacts

$180,000

Potential extra costs saved in one quarter

<25%

Decreased drop cart rate

<39%

Drastically reduced amount of customer complaint calls.

Retrospect

What we'd do differently

Risk Assessment and Contingency Planning

Conduct a risk assessment to identify potential challenges and uncertainties that may impact effort requirements. Develop contingency plans to address such risks and allocate additional resources or adjust timelines accordingly.

Anticipate Change

Recognize that stakeholder turnover is a possibility and build flexibility into the project plan. Be prepared to adapt and adjust course if necessary, and communicate the potential impact of stakeholder changes to the team and other stakeholders.

Other Projects

Marketing
UX/UI Design
Accessibility Design

View Project
B2B Website Redesign

B2B Website Redesign

Prototyping
Component Libraries
Responsive Design

View Project
User-Friendly Design System for Streamlined Web Operations

User-Friendly Design System for Streamlined Web Operations