Immersive Photo Gallery
I created a fullscreen gallery format for immersive multimedia, editorial content, and shoppable products. Using snap scrolling, each image, video, or loop has its own dedicated moment, enhancing engagement and pacing beyond passive scrolling.
The goal was to boost article completion, increase reader interaction, and seamlessly integrate product embeds for a premium, shoppable storytelling experience.
Pain Points
Standard galleries allow quick scrolling, making it hard to focus on key moments. They lacked a way to link shoppable products directly to gallery highlights, disconnecting commerce from editorial content.
Caption and title overlays often lack accessible contrast on photos and videos. The format doesn’t support both short, punchy captions and longer editorial copy, limiting versatility.
Exploration & Validation
I examined scroll-driven storytelling examples, including the New York Times' interactive pieces and a snap-scroll Codepen prototype, to analyze how pacing and transitions impact reader focus.
Vertical vs. horizontal snap scrolling for focused, one-item-at-a-time viewing
Tested caption overlays to ensure readability on diverse high-contrast images without flattening visuals
Compared fade, parallax, and staggered transitions to add depth without sacrificing speed.
Key Decisions &
Tradeoffs
Snap Scroll - Snaps the next item into view, encouraging deliberate, one-at-a-time engagement. Flexible Copy Support - Optimized for short captions but works with longer text, suitable for quick stories and detailed narratives. Full Screen Hero Media - Each gallery item features a fullscreen image, loop, or video as its hero, based on the standard gallery data model to minimize CMS and engineering effort.
Shop the Look
Gallery
I felt shoppable products should exist beyond a dedicated gallery, to include standard articles and longforms where commerce content could also benefit.
Learnings
The response was overwhelmingly positive from both design and editorial teams.
However, the project stalled after this stage due to disagreements with the ads team over how the format would coexist with existing ad placements and revenue models. While the design proved the UX solution, successful implementation requires buy-in from all stakeholders involved in monetization, not just editorial and design.
