Designing Vogue Business' Gen Z report: interactive editorial website

When Archrival and Vogue Business came back for part two of their Gen Z report, a thought-leadership piece that marketers still quote, share, and argue about 18 months after launch, they needed more than another long article. They wanted an interactive editorial experience that felt as scrollable and chaotic as Gen Z's feeds, but still as sharp and credible as a Vogue feature.

The first report challenged the classic marketing funnel and became a reference point across the fashion and marketing industry. Marketers still share it in Slack channels, present it internally, and use it to sell in new strategies.

For chapter two, the stakes were higher. It had to feel like a "second album" that lives up to the first, but doesn't repeat it. It needed a visual story that could handle fewer but deeper sections, with more copy and more nuance.

Noomo collaborated with Archrival and Vogue Business to design and build a WebGL-powered, story-driven page that visualizes how Gen Z shop in a world of "doom-shopping," infinite scroll, and over-engineered convenience. The result is a new digital universe that lives comfortably between fashion editorial, experimental web design, and social-native content.

View the live experience →

Why this report needed a new universe.

Part one of the Gen Z report became a cultural artifact in the marketing world — the kind of piece that gets referenced in presentations, saved in strategy folders, and shared in team channels months after launch.

For chapter two, we had to:

• Create a "second album" that lives up to the first without repeating it
• Handle denser research and more nuanced editorial content
• Feel more native to today's social and shopping behaviors
• Be less "pretty website," more "internet artifact" people want to react to and dissect

The editorial story itself pushes an important tension: shopping has become so optimized, convenient, and data-driven that it has lost its soul. Gen Z want friction, meaning, and magic back: through IRL experiences, curation, and community. The web experience needed to make that emotional shift tangible, not just readable.

Noomo's answer was to create a universe built on contrast: calm vs chaos, editorial vs glitch, physical vs digital, friction vs frictionless. The layout, motion, and visuals literally walk the user from doom-scroll fatigue into a more intentional, magical way of shopping.

Understanding the brief: editorial sophistication meets Gen Z chaos.

The brief from Archrival was clear:

Build a visually rich, hyper-engaging report that mirrors the chaotic, fragmented energy of Gen Z internet culture.

Make dense research and editorial copy feel approachable, scannable, and actually fun to scroll through.

Design "screenshot-ready" moments, cards, and layouts that look great behind talking-head videos on TikTok, LinkedIn, and Reddit, and encourage organic sharing.

Honor Vogue Business' editorial sophistication while carving out rebellious pockets of Gen Z culture within the page.

For fashion houses, luxury brands, and media companies, this represents a new model: how to create editorial experiences that work as both authoritative research and shareable social content.

The discovery process: aligning three teams on one vision.

A two-hour remote workshop in Figma brought the Archrival, Vogue Business, and Noomo teams together to unpack goals, audiences, constraints, and references.

The group mapped what worked in the first edition, what felt outdated, and where this sequel should evolve: from shorter, snappier content blocks to more 3D, spatial layouts and better social shareability.

What we discovered in the workshop:

The tension we needed to express

Gen Z's shopping experience lives in constant contradiction: they doom-scroll through product feeds while craving meaningful discovery. They want convenience but also friction. They're digital natives who yearn for physical retail magic.

The audience shift

While the first report spoke primarily to marketing strategists, part two needed to resonate with C-suite fashion executives, media leaders, and brand directors — people making decisions about retail experiences, not just campaigns.

The social reality

This report would live beyond Vogue's site. Creators would screenshot it, LinkedIn strategists would quote it, Reddit threads would debate it. Every layout decision had to work when cropped, covered by a talking head, or reposted out of context.

Here you may see some of the early experiments and mood boards:

Guiding principles that emerged:

Editorial frame, chaotic windows

The page uses Vogue's black-and-white minimalism and generous negative space as a "wall," with windows that open into Gen Z's messy digital and physical life: closets overflowing with clothes, stacked boxes, lo-fi social captures, and pixelated noise.

Contrast as a core design tool

Quiet, almost gallery-like sections contrast with dense, object-filled scenes that evoke overconsumption and doom-shopping. This rhythm keeps the experience readable while still dripping with attitude.

Playful typography with serious content

Body copy stays clean and accessible, while headlines and key stats use a deliberate font clash: classic serif for Vogue heritage, modern sans for clarity, and expressive script or pixel fonts to inject raw, internet energy.

Designing for chaos and clarity: the visual system.

The visual language leans fully into contrast instead of perfection.

Font mashup: editorial meets internet

A deliberate clash between refined serifs, Vogue sans serif, and ornamental scripts sits alongside pixel-driven UI elements, echoing the way Gen Z mix archive fashion, streetwear, and meme aesthetics in one look.

This isn't random. Each typeface carries meaning:

• Serif = Vogue heritage, editorial authority, timelessness
• Sans serif = Clarity, accessibility, modern luxury
• Script/pixel fonts = Gen Z energy, internet culture, irreverence

Nature vs glitch: hybrid imagery

8-bit illustrations of leaves, flowers, and landscapes appear next to realistic photography and product shots. This hybrid imagery mirrors a generation living with one foot in the physical world and one in the digital, thrifting IRL while shopping via influencers and algorithms.

The natural elements aren't just decoration. They represent the "magic" Gen Z is searching for: organic discovery, serendipity, connection to physical objects and spaces.

Lo-fi editorial photography

The experience balances Vogue-level studio shots with raw, social-native imagery: unretouched faces, cluttered closets, packaging piles, and behind-the-scenes moments that break the glossy surface.

This mirrors the duality of Gen Z's media diet, they consume high-production content on streaming platforms while creating and sharing raw, unfiltered content on TikTok and BeReal.

UI-inspired graphic elements

Instead of trendy "Gen Z stickers," the interface borrows from real product UI: pills, buttons, tags, cursors, and windows to feel more like a live operating system of shopping rather than a poster.

This approach makes the experience feel functional and native rather than designed "at" Gen Z from the outside.

Turning dense data into interactive storytelling.

The report is heavy on stats, comparisons, and emotional insights: doom cycles, guilt, FOMO, and the hunt for meaning in shopping again. Simply embedding charts wasn't an option.

For fashion and media brands, this challenge is universal: how do you make research feel premium, authoritative, and shareable all at once?

Our approach to data visualization:

Legible first, delightful second

Each data visualization starts from a clear, repeatable language: consistent shapes, scales, and labels across the report, so readers don't have to "decode" every graphic from scratch.

This is crucial for executive audiences who need to grasp insights quickly without sacrificing depth.

Scroll-triggered emphasis

Key comparisons (e.g., Millennials vs Gen Z, doom vs magic, mindless vs meaningful) animate into view as the user scrolls, drawing attention to the punchline of each stat without overwhelming the page.

The animation timing is carefully choreographed, not so fast that it feels frantic, not so slow that it breaks reading flow.

Cards that want to be screenshotted

Stats, quotes, and frameworks live in self-contained cards and layouts that still look strong when cropped or partially covered by a creator's talking head on TikTok, or when reposted on LinkedIn and Reddit.

Each card is designed to:

• Work as a standalone visual
• Maintain Vogue's brand identity even when cropped
• Include enough context to be understood out of context
• Look premium in any social feed or presentation deck

The result: data that reads like a "secret playbook" marketers can quickly share with their teams, not just a wall of numbers.

Motion and interaction: making emotion feel tactile.

From the start, the goal wasn't just to illustrate friction, overwhelm, or magic. It was to make users feel these states through motion.

This is where interactive web design moves beyond decoration into storytelling.

From doom-scroll to discovery

Early sections lean into linear, almost exhausting scroll, echoing the "shopping in a cycle of doom, guilt, and FOMO". Than they are gradually opening up into more spacious, exploratory layouts that reward intentional clicks and drags.

The pacing shift is deliberate: readers experience the exhaustion of endless feeds before arriving at moments of calm, clarity, and intentional discovery.

Tactile interactions

Imagery, glitch overlays, and cards respond to hover, drag, and scroll with a sense of physicality: stretching, shaking, revealing, or "snapping" into place as if the user is manipulating real objects, not just pixels.

This physicality references the IRL shopping experiences Gen Z craves: touching fabrics, discovering hidden vintage pieces, feeling the weight of quality products.

Micro-chaos, macro-control

Micro-animations and hover states inject surprise and delight (think: flickering glitches, looping GIFs, directional parallax), while the overall scroll remains smooth and controlled so long-form reading never feels like a chore.

The balance is critical: too much chaos and the experience becomes exhausting; too much control and it feels corporate and lifeless.

Social-native behaviors

Certain sections mimic familiar patterns like Pinterest-style grids, swipeable carousels, and stacked tweet or TikTok cards to feel instantly intuitive while keeping the experience firmly in the Vogue Business world.

This isn't about copying social platforms. It's about acknowledging that Gen Z's muscle memory is shaped by these interfaces, and using that familiarity to make complex research feel approachable.

Technical execution.

Under the hood, careful performance work keeps all of this fluid on a long, interaction-heavy page.

Performance optimization strategies:

Asset optimization

• Compressed images and videos without visible quality loss
• WebP format for all photography
• Strategic use of blur-up placeholders
• SVG for all iconography.

Lazy loading

• Content loads progressively as users scroll
• Heavy animations don't initialize until in viewport
• 3D elements render only when needed

GSAP timeline optimization

• Tight animation timelines that don't overlap unnecessarily
• Smooth scrolling with minimal repaints
• Hardware-accelerated transforms

The result: the experience feels seamless rather than heavy, even on mid-tier devices and slower connections.

For fashion brands considering interactive editorial projects, this technical foundation is non-negotiable — beautiful design means nothing if the experience lags or crashes.

Collaboration model: working as one creative team.

The experience grew directly out of shared thinking with Archrival and Vogue Business.

How we structured the collaboration:

Initial alignment session

A regroup at the start aligned on editorial direction, what needed to evolve from part one, and where custom interactions would provide the most value within scope and budget.

Design workshop

Both teams mapped the content into narrative "chapters," identified emotional beats (doom, guilt, FOMO, magic, meaning), and prioritized the highest-impact visuals and transitions.

Translation to production

Noomo then translated this alignment into detailed UX flows, art direction, motion prototypes, and ultimately a production-ready WebGL build.

For media companies and fashion brands this collaborative approach ensures the final experience authentically represents both the brand's editorial voice and the technical possibilities of modern web design.

Early impact and industry response

It's still early after launch, so the long-term metrics are just starting to come in. But the project has already achieved several key outcomes:

A distinct Gen Z visual universe that feels fresh compared to the previous report, while still recognizably Vogue Business.

A research hub built for sharing: from TikTok reactions with the site behind creators' heads, to Slack screenshots and design blog features.

Strengthened industry positioning for both Archrival (as the go-to youth culture partner) and Vogue Business (as a forward-thinking editorial brand that understands interactive storytelling).

New inbound conversations from fashion houses, beauty brands, and lifestyle companies curious about creating similar research-driven editorial experiences.

The hope is the same as with part one: that this experience keeps circulating long after launch—sparking debate, inspiring brand teams, and demonstrating what's possible when editorial rigor meets experimental web design.

What media and fashion brands can learn from this project.

Interactive editorial is the new white paper

Traditional research reports sit as PDFs in download folders. Interactive experiences live as bookmarks, shared links, and social content that keeps generating value months after launch.

Design for shareability from day one

Every section, card, and data visualization should work when:

• Cropped in a screenshot
• Covered by a talking head in a TikTok video
• Reposted to LinkedIn with commentary
• Dropped into a presentation deck

Embrace contrast over perfection

The most memorable editorial experiences don't try to be flawless — they embrace tension, contradiction, and the messy reality of how audiences actually experience brands.

Make emotion tactile through interaction

Motion and interaction aren't decoration, they're storytelling tools that can make abstract concepts (doom-scrolling, FOMO, discovery) feel physically real.

Collaborate as creative equals

The best work emerges when client teams and design teams shape the vision together from the start, rather than working in sequence.

Creating editorial experiences.

This project represents a new model for how fashion houses, magazines, and lifestyle brands can create thought leadership that's both authoritative and genuinely engaging.

Whether you're launching a research report, building a brand manifesto, or creating an editorial experience around a collection or campaign, the principles remain the same:

• Start with emotional truth, not just information
• Design for how content will actually be consumed and shared
• Use motion and interaction to make concepts tangible
• Balance editorial sophistication with internet-native energy
• Build experiences that reward both quick scans and deep dives

At Noomo, we specialize in translating complex brand stories into immersive digital experiences—for companies who need to balance editorial authority with experimental design.

Technologies and tools.

Design:

• Figma for collaborative workshops and design system
• Adobe Creative Cloud for asset creation
• Krea AI and Midjourney for visual exploration

Front-end development:

• WebGL for performant visual effects
• GSAP for animation timelines
• Custom JavaScript for scroll and interaction systems
• Responsive layout system optimized for mobile

Performance:

• Asset optimization and compression
• Lazy loading strategies
• Progressive enhancement
• Hardware-accelerated animations

Related projects and insights.

More fashion and editorial work:

• Vogue Business Gen Z Report – View the complete case study
• Digital storytelling in web design – Our approach to narrative-driven experiences
• Best storytelling websites – Examples and principles for editorial web design
• 3D and immersive web experiences – Technical capabilities for premium brands
• Interactive brand activations – Conference and event experiences

Interested in creating an interactive editorial experience for your brand? Connect with us to discuss how we can help tell your story through design, motion, and technology.

Written by the Noomo team

Design and creative technology studio specializing in interactive editorial experiences, 3D web design, and immersive brand storytelling for tech, product, and media brands including Vogue Business, Salesforce, Red Bull, AMD, and Coinbase.