Lead Product Designer
Designed a responsive, scalable long-form article template used across 30+ Meredith brands, balancing a unified backend structure with flexible UI patterns that supported each brand’s unique identity.
Overview
Role: Lead Product Designer
Focus: My focus as lead designer was to define a scalable, platform-wide article experience that balanced system-wide consistency with the flexibility required for 30+ brands to express their unique identities.
With the migration of all Time Inc. brands onto a unified backend platform, our team was responsible for developing a comprehensive suite of white-label templates for nearly every page type. These templates needed to support more than 30 Meredith brands, offering a single scalable structure while remaining flexible enough to accommodate each brand’s unique voice and visual identity.
For this initiative, I designed the long-form article template—a core content experience used across all Meredith properties. I delivered fully responsive designs for desktop, tablet, and mobile, ensuring consistency, adaptability, and brand-appropriate customization across the entire portfolio.
Problem
Meredith’s existing white-label article template was being used across all brands, but stakeholders identified a gap: there was no template optimized for extended, long-form content. Editors needed a more expressive layout with richer design capabilities, while product teams noted that bounce rates increased significantly once articles exceeded a certain length. The challenge was to create a template that improved long-form readability, supported deeper engagement through visual breaks and media, and remained flexible enough for 40+ brands operating within a shared backend and design system.
Solution
As lead designer, I created a scalable long-form article template that could be adopted across all Meredith brands while preserving opportunities for brand-level customization. Through iterative reviews with the VP of Design, product managers, editors, and engineering, I delivered a modular solution that provided editors with configurable layout options while upholding system-wide consistency, accessibility, and ease of implementation.
Sketches & Early Exploration
I began with rapid sketches and wireframes to visualize options and accelerate early decision-making. Using insights from stakeholder interviews, business goals, and design-system constraints, I explored how the existing article structure could evolve to support richer storytelling. A key differentiator for the long-form template was a redesigned header, with variations that included hero images, multiple images, or no imagery at all—each offering distinct editorial and visual opportunities.
Low-Fidelity Designs
I translated my sketches into low-fidelity wireframes in Sketch, creating defined layouts suitable for peer and leadership review. The initial presentation included roughly ten header variations that demonstrated different approaches to hierarchy, media, and brand expression. These concepts highlighted the range of possibilities available while grounding the designs in feasible, scalable UI patterns.
Initial lo-fi wireframes based off of initial sketches and design inspiration. At this stage, the VP of design asked for more exploration to be done.
Feedback, Iteration & System Refinement
Following initial reviews, I expanded the explorations to think more holistically about how each header concept could evolve across a modular system. I defined three primary header types—no-image, single-image, and multi-image—and explored a progressive evolution between them to ensure coherence and flexibility across use cases.
A major focus during iteration was ensuring editors had meaningful customization options while preventing accessibility or implementation risks. I introduced color-based customization within controlled parameters and collaborated closely with engineering to build backend restrictions that prevented editors from selecting non-compliant color combinations.
Throughout this phase, I delivered multiple rounds of refined header variations for continued peer and stakeholder review.
Early explorations revealed that a single template wouldn’t accommodate the full range of user journeys, editorial goals, and brand variations.
This round of iteration raised the question of whether a single template would sufficiently support editor workflows. We began evaluating how to structure a family of templates that offered progressively richer customization while remaining cohesive and predictable within the design system.
Exploring how each header design could progress into another so that they evolve in complexity and features on both desktop and mobile.
Article Features & Modular Content Blocks
Stakeholders also requested new, more dynamic content blocks that could be plugged into the long-form template to break up text and support richer storytelling. I began by analyzing the core atoms in our existing design system—primarily text and image styles—and mapping all possible combinations.
By creatively recombining existing components, I designed seven new content blocks that editors could select on the backend. These modules increased engagement, offered greater editorial flexibility, and distinguished long-form articles from standard templates while remaining fully aligned with the established design system.
Final Designs
After multiple rounds of iteration and cross-functional alignment, the following header templates were approved for development:
No-image header (no color background)
No-image header (color background)
Full-width image header (with optional background color)
Full-bleed image header
Although the initial scope called for a single long-form template, evolving needs led to the approval of four flexible layouts that addressed a wide range of editorial and brand requirements. Each design was intentionally crafted to integrate seamlessly with the existing design system, reuse established components, and minimize development overhead—while delivering a more engaging, modern long-form reading experience across 40+ brands.
Reflections
After multiple rounds of iteration and cross-functional alignment, the following header templates were approved for development:
No-image header (no color background)
No-image header (color background)
Full-width image header (with optional background color)
Full-bleed image header
Although the initial scope called for a single long-form template, evolving needs led to the approval of four flexible layouts that addressed a wide range of editorial and brand requirements. Each design was intentionally crafted to integrate seamlessly with the existing design system, reuse established components, and minimize development overhead—while delivering a more engaging, modern long-form reading experience across 40+ brands.