Role
Designed and delivered an end-to-end experience to nudge customers to checkout with promotion
Responsibility
Discovered design opportunities; conducted usability tests via rapid prototyping; refined designs with rapid iterations; and oversaw the implementation process
Impact
Exceeded sales target by 2X and impacted 2M+ users. This led to a 13%⬆ in sales growth and a 4%⬆ in conversion rate
Team
1 Product Manager, 1 Marketing Specialist, 2 Software Engineers, and 1 E-operation
OVERVIEW
Introduce dynamic messaging designs to facilitate Black November shopping journey
Rogue Fitness's Black November is an annual major revenue peak, featuring the notable "5 Items Ship for $5" promotion. However, the featured promotion didn't guarantee a seamless user experience. I crafted dynamic messaging designs in the shopping cart to enhance the November shopping journey, making it more intuitive and nudging more customers to checkout with the promotion.
COMPANY
Rogue Fitness:
Leading Strength & Conditioning Equipment Manufacturer and Retailer
Rogue Fitness is an American manufacturer and e-commerce platform for strength and conditioning equipment. With 100K daily traffic and 2M+ active users, Rogue has a global presence in the US, Europe, and Australia.
CONTEXT
5 Items Ship for $5 as Black November's Highlight Promotion
Matte Black November is Rogue's annual revenue peak, bringing in two to three times more than regular months. A key highlight of Black November is the "5 Items Ship for $5" (5 for $5) promotion. This offer allows customers to purchase up to five eligible products, irrespective of weight or size, and have them shipped for just $5.
CHALLENGE
How might we enhance the shopping cart to spotlight the '5 for $5' promotion?
In past Black Novembers, the "5 for $5" deal either escaped the notice of many customers or presented checkout challenges. Recognizing the shopping cart as not just a review space but also a pivotal stage for promoting the deal, Rogue decided to refine its design, aiming to nudge more customers to proceed to checkout with the shipping deal.
DESIGN PROCESS
1.5 months to launch the project
This project has a tight 1.5-month timeline to launch before the 2022 Matte Black November. As a solo UX designer, I went through design, development, testing, and launch with cross-functional teams.
DISCOVERY
What’s the design opportunity in cart?
In the "understand & explore" stage, I benchmarked 7 e-commerce sites to analyze how they promote shipping deals on the shopping cart. Additionally, I audited 52 existing screens of the previous Rogue purchasing process for the "5for$5" promotion to identify design opportunities.
Competitive Analysis
UX Audit Existing Screen - Shopping Cart
Preliminary Research Insight
Superiority of Dynamic Messaging over Static Messaging
Most e-commerce sites use static or dynamic messaging to promote shipping deals. Static messaging is less informative and engaging, whereas dynamic messaging provides immediate feedback and reflects real-time changes. Studies from the Baymard Institute show that dynamic messaging can boost conversion rates and lower cart abandonment by motivating users.
Simplify Visual Feedback and Confirmation
By offering clear indications or simple visual feedback, customers can avoid any sense of uncertainty or confusion regarding the successful addition of items and the number of additional items required to qualify for the deal. Utilizing simple elements can also prevent the feeling of being overwhelmed by a cramped space.
Journey Mapping
Understanding customer needs and behavior patterns
To better understand customer needs and align them with our business goals, I interviewed 6 dissatisfied customers with the help of the customer service team. Through these interviews, I identified 3 main pain points.
Pain Points
Insufficient or missing information
Faced difficulties in identifying ineligible items in the cart and accessing information related to special regional shipping rates and other deal-specific details.
Lack of engagement or motivation
After adding two or three items to the cart, customers struggle to find additional desired or necessary products within the store
Repetitive errors
Even after adding five items to their cart, customers continue to encounter high shipping fees at checkout, causing them to check for promotion eligibility repeatedly
DESIGN PRINCIPLE
Streamline the shopping cart experience to enhance clarity
Based on research insights, I have established that incorporating a cart design that effectively presents relevant information in a limited space simplifies availing the shipping deal.
IDEATION
How might we provide clarity and incentive for customers to leverage the deal in limited space?
During the initial design discussion with stakeholders, the team considered using a static threshold design for the cart. However, I proposed and aligned with the team to add a dynamic messaging design to display real-time differences in reaching the deal.
Initial Design Concepts
Exploring 3 initial concepts of dynamic messaging design
Progress Bar Once an eligible item is added to the cart, the progress bar appears as a visual indicator to explicate and motivate customers to reach the goal.
Pop-up After customers add three eligible items to the cart and click on "Checkout," a pop-up instantly appears, capturing attention and making it hard to overlook. The pop-up can contain additional details, like more information, and recommend other products.
Drawer With a variety of recommended products showcased in the drawer, customers can effortlessly add items to fulfill the deal's requirements.
Proposed User Flow
Merging Progress Bar and Pop-up concepts for maximum results
After reviewing 3 concepts with the leadership team, we decided that merging the Progress Bar and Pop-up approaches would yield the most effective results. Since the Progress Bar provides clear visibility on the progress towards securing the deal, while strategically timed pop-ups can stimulate customers to buy more.
DESIGN DEVELOPMENT
Key Design Decisions and Iterations
By developing final screens and high-fidelity mockups, I conducted 2 rounds of internal usability testing and gather feedback from cross-functional teams. Incorporating design reviews and internal testing feedback, I made 3 rounds of rapid design iterations, resulting in an improved version.
1.Progress Bar + Recommended Products Widget
When customers add an eligible item to their cart, the Progress Bar and 5 for $5 Products Widget appear. The positioning and visibility of these components underwent significant changes during the iteration process.
Progress bar and 5 for $5 products widget
Iteration 1
Position of Progress Bar and Recommended Products Widget
Problem
How can I enhance the Progress Bar's visibility and optimize conversion?
Solution
Given leadership's concerns about the Progress Bar's lack of prominence potentially affecting conversion and revenue when placed at the cart's bottom, I took a holistic approach. I elevated the Progress Bar for better visibility. I replaced the "Customer Also Bought" widget to boost conversions with the "5 Ships for $5 Products" widget. And I simplified deal details by switching from a tooltip to an FAQ drawer.
⇨ Enhanced user navigation + Boosted deal engagement + Simplified information access
Iteration 2
Improve Progress Bar's Visibility in Mobile Version
Problem
How can I ensure the Progress Bar is consistently visible for mobile users?
Solution
Based on internal testing feedback, it became clear that mobile users often overlooked the progress bar when its placement mirrored the desktop version. To address this, I anchored the progress bar to the bottom of the mobile screen, ensuring its constant visibility, before reaching the checkout section.
⇨ Consistent mobile visibility & Streamlined checkout experience
2.Pop-up
When customers add three eligible items to their cart and proceed to checkout, a pop-up appears on the top of the page. Integrating configurable and non-configurable products in a single pop-up underwent multiple rounds of discussion.
Pop-up with recommended products
Iteration 3
Configurable vs. Non-Configurable Products in Pop-up
Problem
How can I efficiently integrate configurable and non-configurable products in the pop-up without causing merchandising or development concerns?
Solution
In terms of technical constraints and listing management challenges, my initial plan to display configurable and non-configurable products separately in a pop-up proved time-consuming. To expedite the process, I took the initiative to help find a way to merge them in the pop-up. Customers can select preferences for configurable products by selecting the 'view details' button before adding items. And non-configurable products can be added to the cart directly.
⇨ Unified product display & Increased development efficiency by 5 days
PROTOTYPE FOR INTERNAL TESTING AND STAKEHOLDER PRESENTATION
Progress Bar + Recommended Products Widget
Progress Bar serves as a visual guide, clearly illustrating the customer's progress towards securing the deal while incentivizing them to enhance their order value. By positioning a '5 Ships for $5 Products' widget beneath the progress bar, we provide customers with a convenient avenue to add items to their cart.
Desktop Version
Mobile Version
Pop-up
When customers add three eligible items to their cart and select ‘Checkout’, a strategically-timed pop-up showcasing recommended products instantly captures their attention. This tactic prompts them to buy more to receive the deal before checkout to complete the purchase.
Desktop Version
Mobile Version
CROSS-FUNCTIONAL COLLABORATION
Facilitate a seamless design handoff
To ensure a seamless launch process, I collaborated with engineers, QA teams, and the marketing team to facilitate a smooth design handoff.
Document comprehensive design specs and conduct a handoff meeting with the engineering team to ensure everything they need to implement the design accurately
UX Audit Review with QA and Development teams of staging version to list issues found and corresponding solutions
Provide promotional assets on social media for marketing team
Design handoff with Engineers
UX Audit with QA
IG Assets with Marketing
RESULTS
Successfully launched and exceeded 2x sales target
“The addition of a progress bar to shopping cart was a game-changer for me. I no longer have to guess how close I am to reaching $5 shipping limit - It’s right there in front of me!” — Customer review
Based on November 2022 data analysis, implementing the dynamic cart messaging design led to a remarkable 13.4% increase in sales growth rate for "5 Items Ship for $5" products compared to last Matte Black November. Additionally, the conversion rate improved by 4.1%.
Building upon these positive results, the leadership extended the dynamic cart messaging approach to other daily shipping deals, such as the "3 Ships Free" offer.
