Leveraging storytelling to drive +333% cart add revenue and +456% engagement
Overview
As design lead partnering with Product, Engineering, Digital Experience, and Creative services, I led a large cross-functional, multi-quarter initiative to unlock a new storytelling capability for our front-end teams. This strategic work was enabled by our Product Team on the technical side, and in collaboration with my PM and Tech Leads we redesigned and rewrote key backend componentry (across web, iOS and Android) for our internal CMS (named AMP). This technical rewrite utilized Atomic Design Principles and leveraged our new Design System, championing craft and enhanced best practices for our orgs.
Lead Designer
Role
End-to-End UX & UI Design
Content Strategy, Design System Collaboration
Responsibilities
Product Team (1 Product Manager, 3 Tech Leads, 8+ Engineers, 1 QA), Creative Services (graphics + copy), Digital Experience (10+ partners)
Partners
Goals
Front-end: Reduce friction for shoppers to add items to cart
Enable storytelling moments to show value to shoppers, drive cart adds, and invite shoppers into deeper experiences.
Back-end: Update and modernize our technical componentry to support this work and future initiatives, reducing future speed to build without compromising on design or accessibility
The Challenge
Outdated and inaccessible componentry served as a massive roadblock to getting this work live. It was clear that a large technical rewrite and redesign was needed for key components in our asset library.
We found that this was the right moment to redefine and rebuild a durable, flexible system to enable this project and many more ahead.
PROBLEM TO SOLVE
Users have to navigate to other experiences to shop key moments like holidays, leading them off key basket-building experiences like Home.
Initial Testing & Validation
At the onset of this project, we were aware that the full scope of this work would be a multi-team, multi-quarter effort to handle the true end to end needs. With that in mind, early testing and validation was vital to prove the juice was worth the squeeze.
Our team worked with partners to launch an AB Test during a major selling event: our annual Halloween Candy Sale. This test focused on comparing a larger grid design “storytelling” variant, versus our standard control treatment: a simple visual driver to an internal page.
At this time, this effort gained it’s name amongst our teams as “Story Blocking”, and continues to be named as such to this day.
Testing and Results
The goal of this test to was to see if shoppers responded positively to a visual grid, marked by our primary success: engagement (clicks). The test ran for a week, and the results were:
Engagement: +83%
Cart Adds: +0.27%
Orders Placed: No Change — do no harm proven
This test was an early indicator that our hypothesis may be confirmed: shoppers positively respond to storytelling that highlights the value of our products in their lives.
Next Steps
It’s important to note that for this test, we used components that were available to ours teams, as-is. This came with a major hangup: our test was not fully accessible for all of our shoppers, as the text used in the design variant was not live HTML text, but instead was exported as part of the image file itself (and therefore not able to be read by screen readers).
The validation of our hypothesis allowed us to gain stakeholder alignment to run additional similar tests with our current assets and build a case for our larger needed undertaking: a complete rewrite of the componentry enabling this experience (affectionately known in house as “Espot”). A rewrite is timely, and would impact roadmaps for our team for multiple quarters—so testing and validation were essential to confirm we were focusing our efforts correctly.
HOW MIGHT WE
Leverage storytelling to highlight the value of items and inspire & enable shoppers to easily add those items to their cart?
Design & Implementation
Following multiple rounds of validation testing, our team received the official green light to move forward with rebuilding componentry to power this work. This included a complete rewrite of our past “Espot” component — a major technical undertaking.
Technical Requirements
The crux of this work rested on creating an updated Espot component that:
Was flexible, durable, and configurable to power this work and future work
Enabled the ability for text to be (1) overlayed on top of imagery, or (2) enabled text to be “adjacent” to the image instead of layered on top
Upheld WCAG AA best practices
Allowed for a future where layouts could be monetized with CPG partners
Utilized atomic design principles from an engineering point of view
Was powered by our newly released Design System
Consolidated the functionality of various other components into the singular Espot component to lessen the amount of variants for teams to manage
Allowed for the integration of shoppable assets, such as product carousels or coupon carousels
Launch
The following Halloween, we were able to launch a new and improved version of Story Block powered by Espot across web and native app. This work leveraged custom photography which was shot specifically for these placements, and in partnership with Creative Services we worked to tell a cohesive “Halloween Story” across our channels.
This approach of telling a seamlessly story for our users across web and native was a distinct push of this effort, and was a true mix of technical, design, and strategy. Our team was excited to see this cross-functional dream come to life after so many months of work across the org.
By the time the candy sale ended, we saw a dramatic increase in cart add revenue, our main success metric (see numbers below), and looked ahead to immediate implementations for future periods.
IMPACT
Combined Launch Results (App & Web)
+456%
Total Engagement on Home
+333%
Total Candy Cart Add Revenue on Home
+47%
Total End to End eCommerce Candy Sales
App Home
+1,300%
Engagement (Taps)
+1,300%
Candy Cart Add Revenue
Web Home
+36%
Engagement (Clicks)
+62%
Candy Cart Add Revenue
Reflections
The importance of telling a story
Customers clearly resonate with storytelling and strong visuals to push the value of what we are selling
Reducing friction matters
Shoppers are looking for ways to cut down on time spent shopping—meeting them where they’re at with quick-add moments is key
We eat with our eyes
Rich visuals and copy matched with easy shoppability serve as quick actionable moments where inspiration turns to impact