ZILLOW MARKETING WEB DESIGN SYSTEM

Partnering with a team of marketers, developers, and a principle product designer, I took on the role of visual designer and supporting product designer to build a design system with over 400+ designs created and several responsive sizes included. 

Z_Marketing_Web_Hero

Problem

Marketing:
The marketing sites for Zillow contained a lack of consistency with the main product’s visual and ux languages. The marketing org needed wiggle room to depart from the main product’s design system in order to achieve marketing business goals.

Production:
Zillow’s WordPress dev team faced many challenges in building these sites from mismanaged code to a constant influx of requests requiring custom code. This lead to their team often maximizing their bandwidth and unable to meet Zillow’s business goals. 

Design:
Zillow Group Studios, Zillow’s internal agency, lacked visual/ux guidelines in order to create sites that maintained brand consistency but also utilized web components that were tested for business efficacy. Previously, product design modules were being utilized and they often did not perform well when trying to achieve marketing goals. The content writers on this team also lacked any uniform guidance from their design partners on character counts as well as testing from marketing on what character lengths and variables proved to be successful. 

Overall:
All three of these team’s also did not have a centralized location for code and design documentation. 

During a revamp of Zillow’s marketing org, the marketing ops team realized they needed to overcome  these previously mentioned hurdles in order to reach their new integrated web-based campaign landscape.

Business Goals

Allow the marketing org to test certain modules designed for marketing vs their product counterparts towards marketing specific goals. Clear the path toward a fast-paced web-centric campaign marketing strategy. 

Allow the marketing org to test certain modules designed for marketing vs their product counterparts towards marketing specific goals. Clear the path toward a fast-paced web-centric campaign marketing strategy. 

Give content writers the correct documentation and performance metrics to optimize copy created. 

A library of documentation for all of these designs and code that is easily accessible to marketers, content writers, designers, external agencies, and devs. 

Objective

Timeline

Create a sister design system to Zillow’s main product design system. 

6 weeks for design, 10+ weeks for dev, design QA, documentation, stakeholder orientations

Stakeholder Landscape

Stakeholder_Map-2

Grids

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

All housed and documented using Invision's Design System Manager tool and plugin for Sketch.

Invision_DSM-2
Zillow_Marketing_Web_DS_Iphone_mock

Proud member of Queer Design Club Techqueria.

©2022 MIKE PATRUNO DESIGN