Quick Add in Shopping Bag
Led the design of a new shopping bag feature that recommends complementary items for customers, improving key shopping bag and order metrics.
11/2023 - 04/2024
1 Product Designer (me)
1 Software Engineer
Data Scientist
Project Manager
E-Commerce Team
Merchandising Team
Market Research
UX/UI Design
Visual QA
Figma
SASS
React
Primary is a NYC-based kids' clothing brand that makes essential, sustainable, and gender-neutral clothes in a rainbow of colors for babies and kids. As the sole Product Designer on this project, I collaborated closely with 3 teams on designing and shipping a new shopping bag feature that is now live on Primary.com.
Primary was interested in testing a new shopping bag idea
In 2023, as the business continues to grow, Primary was seeking ways to improve its key order metrics such as UPT (unit per transaction) and AOV (average order value). In an effort to support this company goal, the merchandising team and the e-Commerce team decided to explore a new site feature idea that recommends complimentary, low cost products to customers on the Shopping Bag page before they check out.
Unpack the requirements
As the only Product Designer on this project, I started with connecting with the project manager and the Head of eCommerce to gather project requirements and details. I used the 5 Ws + 1 H framework to guide my inquiries:
Research
Learn from the market
After going through over 80 e-Commerce sites, I discovered 10 sites that have a shopping bag recommendation section that was similar to what we invisioned. I summarized the findings and attached screenshots of each example in a Google Slides deck, which was shared with key stakeholders through Slack and in project meetings.
Inspect the existing Shopping Bag performance
Since the existing Shopping Bag already had two product recommendation sections – You May Also Like (YMAL) and Recently Viewed (RV), adding Quick Add in Shopping Bag will make the page even longer, especially on mobile. The market research also showed that most online shopping websites don’t have more than 2 recommendation sections in Shopping Bag. So, I reached out to our Data Scientist to get the performance data of YMAL and RV so that we can decide if both sections are worth keeping.
Although the engagement rate of the two sections aren’t very high, their contribution to the net revenue aren’t negligible. Considering these two sections are at the bottom of Shopping Bag, people didn’t think it’s necessary to remove any of them. But the e-commerce team took my suggestion to display products in a carousel instead of a grid so that the page is easier to scan.
Design Process
4 design iterations: from layout and interaction to UI details
In the first 2 iterations, I focused on answering one question: where is the best place to recommend these products? I explored different location options with various UI treatments based on project requirements and learnings from the market.
I strive for simple and straightforward user interactions. I suggested using our existing Quick Shop modal to allow users to view product details and add items to bag. I also proposed that, after a product is added to bag, the list should refresh so that it doesn’t recommend products that are already in bag.
I presented the options the team believed most promising from iteration 2 to the co-founders for design feedback. Their feedback was very helpful in shaping the feature:
- We would like to limit the number of products in Quick Add to 2 to simplify customers' decision process.
- We would like to make sure customers don't miss this section, so it should be placed above the checkout button.
Based on the feedback, I kept iterating on the designs to simplify and prioritize Quick Add. The updated options were shared with skateholders for internal review before approved by the co-founders in our second design review meeting.
Oh, wait…
While the design was approved by the co-founders in January, 2024, the development work didn’t kick off until April.
While investigating into the requirements, the lead engineer identified a significant challenge: the background color of product images in the Quick Add feature differed from the regular product images. This meant that new images would need to be generated and stored for each color variant of every product, introducing substantial technical complexity and potentially delaying the launch.
After weighing our options, we decided to modify the UI so that no new product images would be required. I conducted a 5th design iteration, maintaining the original image backgrounds, and presented the updated options for approval.
Final Design
Add accessories to bag with just a few clicks!
A shorter Shopping Bag that's easier to scan
I created mockups for mobile (always first!), tablet, and desktop, ensuring an optimal user experience across various devices.
I speak CSS for a more efficient communication with engineers.
The Outcome
The Quick Add feature was successfully launched as an A/B test in June 2024, demonstrating a positive impact on user behavior. Key results include:
- Sessions with feature engagement saw a 10% lower cart abandonment rate.
- 17% of sessions surpassed the free-shipping threshold after engaging with the feature.
- Sessions with engagement experienced a 17% lift in UPT and a 12% increase in conversion rate.
Reflections
Due to time constraints, we weren't able to conduct user testing before launch. I have suggested to conduct a post-launch usability testing to gather direct feedback from customers and understand how the feature has been impacting their shopping experience.
The technical challenges identified late in the process underscored the importance of involving engineers early in design critiques. Moving forward, I will make sure to call out changes that might require extra engineering effort in design reviews, so that we can better anticipate technical complexities and make informed trade-offs early in the process.
Next project: Admin Panel | Primary >>