Team
Content Enablement & House of Creative (Brand)
Role
Lead Web Designer
ABOUT
BUSINESS PROBLEMS
Rigid layouts that limited creative flexibility.
Non-responsive images and padding issues on mobile.
Accessibility gaps (contrast, heading hierarchy, focus states).
Brand fragmentation as sites hacked components differently.
Risk of breaking global content when editing legacy modules.
PROJECT OUTCOMES
Flexible Layouts
Supports text-only, text with media, side by side, and video options; all in one component.
Global Consistency
Adopted across Create, Business, and Newsroom; enabling responsive, brand-aligned design.
Editorial Control
Empowers teams to publish quickly without engineering support, reducing bottlenecks.
My Role
TEAM
GOALS
The goal was to create a future-proof storytelling component that could:
Unify multiple legacy modules into one flexible system.
Adapt to hero banners, landing pages, and campaigns.
Scale across regions and languages without developer support.
Improve Experience with refined hierachy and responsive, accessible layouts.
Future-Proof partner sites as Pinterest’s brand evolved.
STRATEGY
We approached the Masthead as both a design system component and an editorial tool.
Modular content modeling in Contentful for flexible layouts.
Mobile-first design using CSS Grid/Flexbox.
Accessibility by default (contrast, headings, focus states).
Editorial usability with inline help text, validations, and templates.
Engineering alignment to ensure performance and maintainability.
SOLUTION
The Masthead was designed as a single, flexible framework that consolidated outdated modules into one scalable component. Empowering global teams with versatile layout options while ensuring responsive, accessible, and brand-consistent design across Pinterest’s partner sites.
Component structure & flexible layouts
Background layers — Image, video, or color with optional overlays.
Layout options — One- or two-column, split-screen, full-bleed, or text-only.
Media & text blocks — Rich text, CTAs, images, or video assets.
Flexible storytelling — Supported hero banners, campaigns, and landing pages in a single reusable system.
Design & development
Mobile-First & Accessible
Built with CSS Grid/Flexbox, optimized for performance, and compliant with accessibility best practices (semantic hierarchy, alt text, focus states, color contrast).
CMS & Design system integration
The Masthead wasn’t just a CMS module, it was also formalized in Figma as part of Pinterest’s design system. I created reusable Figma components and detailed documentation to ensure designers and editors could confidently apply the Masthead across Create, Business, and Newsroom. This dual integration (Figma + Contentful) ensured alignment between design intent and editorial execution.
Figma documentation and variants ensured consistent adoption across teams.
Cross-functional collaboration
I partnered closely with engineers throughout design and implementation. Together, we resolved issues around breakpoints, text scaling, and image sizing to ensure responsive layouts and consistent typography across devices. This iterative testing process made the Masthead more reliable, performant, and accessible at scale.
IMPACT & INSIGHTS
Efficiency & Sustainability
One Masthead replaced three modules, cutting redundancy and long-term maintenance.
Flexibility for Storytelling
Editors gained full-bleed, split-screen, and media-rich layouts without custom builds.
Accessibility as a Baseline
Inclusive by design with semantic hierarchy, focus states, and contrast compliance.
Brand & Global Consistency
Unified framework ensured consistent identity across Create, Business, and Newsroom.
Editorial Empowerment
Figma components, CMS validations, and docs enabled fast, independent publishing.
Cross-Functional Learnings
Early engineering alignment prevented regressions and reinforced scalable design.
To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Pinterest.