Design System Documentation Site - Zillow

Role

UX/UI, Visual Design, Content Writing

Platform

Web

Deliverables

Documentation website

Key Contributors

Jimmy Morris, Engineer

Kalini Stansell, Product Designer

Veronica De la Pena, Product Designer

Phil Cho, Engineer

Overview

The Zillow Design Systems team, Constellation, undertook a project to overhaul our outdated documentation resource, which lacked cohesion across web, email, and native app platforms and was hosted in Figma as a prototype, limiting accessibility. We aimed to enhance user engagement by creating an official website that streamlined and updated our design guidelines, ensuring they reflected the current scalability and growth of our tools.

Discovery and Design process

We aimed to create a new unified documentation site featuring more comprehensive content, training videos, and enhanced search functionality. Additionally, we sought to visually incorporate our new team branding into the designs.

User Surveys & Auditing

User Feedback Collection through Surveys

We distributed a survey to various departments, including designers, engineers, PMs, and others, to gather feedback on the existing documentation and preferences for the new site. I played a key role in this process by helping to craft the survey questions, ensuring they effectively targeted the insights we needed to enhance our documentation and shape the new site strategically. The feedback received highlighted several key areas for improvement:

• A need for more unified design and development language

• More detailed component usage guidelines

• The inclusion of additional do's and don'ts

• Enhanced guidance on variant usage

• Prioritization of responsiveness

• Easier access to information

• Sharing of code snippets

Audit of Current Documentation

Team leads conducted a thorough review of the existing documentation prototype, evaluating its strengths and weaknesses. During this session, we discussed what elements were effective and identified areas that required improvement. I took the initiative to audit the entire email platform's documentation site, ensuring a comprehensive assessment of its content and usability to drive meaningful enhancements.

Aligning on content & structure

I collaborated closely with another lead to comprehensively list and organize content. Together, we captured all relevant pages, discussion topics, design elements, and necessary backend development tasks. Additionally, I helped create a framework for how to capture documentation and determine what essential information to include.

Navigation Information Architecture

I took the lead in defining and structuring our navigation bars and site sections. This involved determining how the navigation bar would look and operate, as well as strategizing how to effectively display information for optimal user experience. Additionally, I worked on organizing our content sections to ensure logical flow and easy access, considering user interaction and navigation pathways to facilitate a seamless journey throughout the site.

Page Templates

I led the design and exploration of our page templates and layouts, focusing on visually presenting content to enhance readability and engagement. This involved defining grid systems, typography, and imagery placement for a cohesive look across all pages. By optimizing the display of various content types, I ensured that each template aligned with our branding while providing intuitive navigation and a clear information hierarchy for an improved user experience.

Training Videos

I played a key role in creating training videos by developing detailed outlines to structure content for clarity. Beyond outlining, I led team members during filming, providing guidance to ensure smooth execution aligned with our goals. By collaborating closely with the team, I focused on maximizing video effectiveness and emphasizing best practices to create engaging training materials for our audience.

Visual Design Direction

I collaborated closely with another designer on the team to enhance the visual design of our documentation site. I helped provide creative direction and constructive feedback, ensuring that our team's branding was seamlessly integrated into the visuals. Together, we strategized on key design elements to create a cohesive and visually appealing experience that effectively communicates our brand identity while enhancing user engagement.

Writing & editing content

I wrote documentation for specific component pages and assisted in editing my team members' contributions. This encompassed guidance on how to effectively use each component, best practices and pitfalls to avoid while designing with them, and a detailed breakdown of each component's anatomy.

Handoff, Testing, & Beta Launch

After our team completed the design and content for each page, we handed our work over to the developers for integration into the site. We conducted thorough testing to ensure that images were loading correctly, search functionality was operating smoothly, links were functional, and the content appeared as intended. Following this, we initiated an initial beta launch, sharing the new site with our entire department and key partners to gather additional feedback and conduct further testing before final launch.

Final Execution

Below are the final designs for the fully launched documentation site.

Homepage

Navigation & Search

University (training)

Content

Results

Through collaboration and user testing, we successfully launched a cohesive, user-friendly documentation platform that better supports our users and encourages the utilization of our design resources. It included the following:

• 147 total website pages

  100 of which were component-specific guideline pages.

• New Features

  Including search functionality, live text, training videos, detailed component usage including do’s and don’ts, code snippets, and an overall more responsive experience.

• Cohesive Experience

  Across platforms and between design and engineering content.

Deliverables

• documentation site

• training videos