TIFFANY & CO.
Content-Driven Commerce and The Story Teaser Component
I redesigned the mobile homepage content architecture to replace a clunky legacy carousel with a minimalist, visual-first storytelling framework. This high-performing component captured a 1.73% click-through rate and successfully doubled the e-commerce purchase likelihood for engaged luxury shoppers.
Role
Manager, Digital Product Design
Focus
Content-Driven Commerce, Conversion Optimization, Data-Informed UX, Design Systems
Timeline
2022
Team
Product Management, Engineering, Content Strategy, Creative
The Challenge
Bridging Content and Luxury Storytelling
Tiffany & Co. produces world-class editorial content, and our historical data proved that users who engaged with these brand stories demonstrated a significantly higher conversion rate. However, this rich storytelling was buried deep within the site structure, entirely hidden from the mobile homepage where 70% of our web traffic originated.
The legacy mobile homepage relied on a cluttered, text-heavy swipe carousel that rendered poorly on smaller viewports. Because it was visually clunky and difficult to interact with, users consistently ignored it, causing us to miss a massive opportunity to connect with high-intent shoppers. As Manager of Digital Product Design, I partnered with our product, engineering, and content strategy teams to replace this fragmented experience. The goal was to design a dedicated homepage Story Teaser component that would bring these heritage narratives to the forefront without cluttering the mobile site, transforming passive content into a primary driver for product discovery.
The Approach
Cross-Functional Co-Creation and Layout Testing
Instead of making subjective creative choices, I established a strict, data-driven framework to validate our layout hypotheses through live, on-site A/B/C testing.
Gathering Insights & Aligning Partners
Competitive Intelligence: I initiated the project by auditing the luxury digital landscape and analyzing how top-performing global brands successfully integrated storytelling blocks into their commerce funnels.
Collaborative Design Reviews: I hosted regular cross-functional meetings to share my competitive findings, present early layout concepts, and gather real-time feedback. The content strategy team was incredibly open to innovation and aligned with the goal, as they were eager to drive higher traffic to their editorial features.
Proving the Commercial Flow: I mapped out user flows that illustrated the direct behavioral correlation between storytelling engagement and bottom-of-the-funnel performance. These flows demonstrated that a more inspired, educated customer ultimately spends more, providing clear strategic alignment for the entire team.
UX Rigor
Stripping Away Friction & Usability Heuristics
Our optimization strategy was heavily anchored in Nielsen Norman usability heuristics, applying Aesthetic and Minimalist Design (Heuristic #8) to challenge standard e-commerce interface conventions.
Traditional layouts rely heavily on prominent buttons and explicit instructions. However, my core design hypothesis for this project was that less is more. I engineered a specific layout variation, Challenger C, that completely stripped away traditional button components, clunky borders, and dense text descriptors. We relied instead on impactful photography and a clean, premium title layout. By making the entire large portrait block fully clickable, we lowered cognitive load. The luxury imagery itself acted as the intuitive gateway into the content, creating a seamless, deeply immersive mobile interaction.
Technical Collaboration and Design Agility
Because this new component was beautifully simple, it allowed for an exceptionally agile and iterative development cycle with our engineering partners.
An Embedded, Real-Time Feedback Loop
At Tiffany & Co., I maintained an incredibly close working relationship with the frontend development team. Rather than waiting for a formal handoff or a final staging build, the developers would send me the components incrementally as they were writing the code. This tight feedback loop allowed me to test the responsiveness live on mobile devices, giving them immediate feedback and quick design revisions when minor technical constraints arose. This collaborative approach ensured that Challenger C rendered flawlessly and loaded instantly, entirely eliminating the performance defects that plagued the legacy carousel.
Scaling the Global Component Library
Once our live A/B/C test data proved the immense commercial value of the winning visual-first design, I pivoted to scale its long-term governance. I collaborated with engineering to finalize the Story Teaser as a highly flexible, standardized component. We embedded the component and its layout variations directly into the global design system, ensuring that internal teams could autonomously deploy these high-converting blocks across different categories of the site without creating design drift or technical overhead.
Impact & Results
2X
Increase in Purchase Likelihood achieved by users who engaged with the storytelling content.
1.73%
Click-Through Rate delivered by the Challenger C version.
+8%
PDP Reach delivered by the Challenger C version.
By replacing a clunky legacy carousel with a highly optimized, visual-first component, we proved that minimalist design principles can dramatically accelerate mobile engagement while respecting the premium aesthetic of a luxury heritage brand.
Doubled E-Commerce Purchase Likelihood: Proved that editorial storytelling actively drives revenue, as users who engaged with the winning Challenger C layout were twice as likely to make a purchase and eight percent more likely to advance to a Product Detail Page.
Validated Layout Victory: Outperformed the legacy swipeable control (1.58%) and Challenger B (1.49%) in an on-site live test, with Challenger C capturing the highest engagement at a 1.73% click-through rate.
Frictionless Visual Immersion: Demonstrated that removing explicit button friction elevates premium engagement, shifting users away from transactional elements to large, stacked portrait blocks that maximized mobile click-through.
Commercialized Editorial Content: Connected the brand's heritage and craftsmanship stories directly with bottom-of-the-funnel performance by ensuring all style guides were tightly integrated with shoppable content links.
Global Standardization: Expanded the design system by establishing a permanent, highly effective responsive component template that empowers marketing and content teams to highlight trends autonomously while driving business growth.