Constellation Documentation Site

Constellation
Documentation Site

Constellation
Documentation Site

Zillow

Overview

The Constellation Dual Documentation site hosts all documentation content related to the Zillow’s Constellation Web design system and includes integrated component documentation that provides both design guidelines and API usage + code playground. The unified documentation site aims to provide Constellation partners with a comprehensive, consistent, and up-to-date single source of truth for clarity, guidance and technical details on how to build high quality experiences.

Problem Area

Current design documentation issues
When I started Zillow in 2020, I was tasked with migrating our existing web design documentation content from Invision to Figma. I created a Figma prototype that hosted all our component documentation, which was named the “Constellation Storefront”. However, as more Constellation design partners used the Storefront, it became clear that the prototype lacked basic functionality and became more of a hinderance than a resource.

Design & developer culture issues
Before the Constellation Dual Documentation site, our design web documentation and developer web documentation lived in different places. This duality lead to knowledge gaps between partner developers and designers. For example, many Constellation designers had never visited the Constellation API (or even heard of it) while many of our developer partners had never visited the design Storefront.

How might we create a unified documentation site that is easy to navigate, search, and empowers Constellation partners with a comprehensive single source of truth for component guidance and technical details to build high quality experiences?

Current design documentation issues
When I started Zillow in 2020, I was tasked with migrating our existing web design documentation content from Invision to Figma. I created a Figma prototype that hosted all our component documentation, which was named the “Constellation Storefront”. However, as more Constellation design partners used the Storefront, it became clear that the prototype lacked basic functionality and became more of a hinderance than a resource.

Design & developer culture issues
Before the Constellation Dual Documentation site, our design web documentation and developer web documentation lived in different places. This duality lead to knowledge gaps between partner developers and designers. For example, many Constellation designers had never visited the Constellation API (or even heard of it) while many of our developer partners had never visited the design Storefront.

How might we create a unified documentation site that is easy to navigate, search, and empowers Constellation partners with a comprehensive single source of truth for component guidance and technical details to build high quality experiences?