Zillow Marketing Web Design System

In collaboration with a diverse team of marketers, developers, and a principal product designer, I served as the visual designer and supporting product designer to develop a robust design system for Zillow. This initiative resulted in the creation of over 400 design assets and included multiple responsive layouts to support the marketing team’s goals.

Z_Marketing_Web_Hero

The Problem

Marketing

Zillow’s marketing sites lacked consistency with the main product’s visual and UX language. The marketing team needed flexibility to diverge from the primary design system for specific objectives, which hindered brand cohesion and marketing effectiveness.

Development

Zillow’s WordPress development team faced mismanaged code and excessive custom code requests, causing resource strain and delays that hindered marketing initiative execution.

Design

Zillow Group Studios, the internal design agency, lacked visual and UX guidelines to ensure brand consistency and the effective use of web components. Existing design modules failed marketing objectives, and content writers lacked copywriting guidelines.

Overall
Without a centralized repository for design and code documentation, teams faced inefficiencies and struggled to execute a cohesive, agile web-based campaign strategy.

The Goal

Develop a Sister Design System

Create a design system specifically for marketing that allows for experimentation and customization while aligning with the main product’s visual language.

Facilitate Marketing Campaigns

Enable the marketing team to execute fast-paced, web-centric marketing campaigns.

Empower Content Writers

Provide content writers with comprehensive documentation and performance metrics to optimize copy.

Centralize Documentation

Establish a centralized library of design and code documentation accessible to marketers, content writers, designers, external agencies, and developers.

Design Phase

Development, Design QA, Documentation, and Stakeholder Orientations

6 weeks

10+ weeks

Process

Discover_ico

Discover

Stakeholder interviews, program owners, audit of marketing sites 

Design

Design

Design components, assets, multiple responsive sizes

Deliver

Development & QA

Redlines, bug-bashes, QA reporting

Define

Documentation

Detailed documentation, design system workshops

Stakeholder Landscape

Stakeholder_Map-2

Grids

Grids_XXL-L_3
Grids_M-XS_3
Primary-Colors_3
Typography
Spacing_3
Elevation_3
Buttons
Button-States-2
Tertiary-Buttons
Cards
Forms
Heroes

Outcomes

The successful creation of the marketing design system addressed key challenges and achieved the following outcomes:

Consistency and Flexibility

Provided a flexible framework that allowed the marketing team to achieve their specific goals while maintaining brand consistency.

Efficient Campaign Execution

Enabled a faster and more effective approach to web-based marketing campaigns.

Empowered Content Writers

Supplied clear guidelines and performance metrics for optimized content creation.

Centralized Resources

Established a comprehensive library of design and code documentation, improving accessibility for all team members.

Proud member of Queer Design Club Techqueria.

©2024 MIKE PATRUNO DESIGN