What’s the Problem?

The Constellation design systems team within the Zillow Design organization (ZxD) encountered an issue due to the absence of a well-defined onboarding process. New designers struggled to familiarize themselves with Constellation and Figma libraries, as there was no procedure designed to guide them through. The team was spending a considerable amount of time training new members and repeating refreshers for the existing ones. This ineffective and inconsistent approach led to a high demand for the formulation of an efficient onboarding process and training curriculum.

Goal

The main objective of this initiative was to create a holistic understanding of design systems and the utility of Constellation in accelerating workflows. The specifics of the proposed plan aimed to:

  • Enlighten the general framework of what design systems are (and aren’t).
  • Assist new designers in integrating with Constellation.
  • Enable designers to employ more complex system components effectively.
  • Facilitate collaboration between designers and the design systems team.
  • Evolve a self-service tool to aid designers in resolving commonly asked questions without external assistance.
Work done

The primary action was qualitative research by engaging with the ZxD designers and the design systems team. This step intended to discern what the designers would like to know about Constellation and what specific topics as a team we wanted to highlight. After this, content and outlines were developed for each subject.

To fulfill the project’s goals, I spearheaded the establishment of Constellation University – a specialized segment within our documentation site destined to be the comprehensive repository for our training and educational materials. Upon its launch, Constellation University encompassed an array of rich content:

  • Compilation of 6 video topics as part of a general training program: Constellation 101.
  • Creation of 7 Figma-specific design video trainings that were tailored to utilizing Constellation components and libraries.
  • Production of 8 Constellation web component video demos to guide on handling more intricate components.
  • Demonstration of 3 Constellation email videos on creating an email using the design system.

In addition to content creation, I also managed the YouTube account to host content and oversee the analytics, assisted with content implementation on our documentation site, and guided the design direction for the Constellation 101 content. I also helped design the Constellation University documentation site pages, laying the groundwork for future scalability by establishing a series of video page templates.

Outcome

Although the data is still being analyzed to understand the full impact, initial observations reveal a significant decline in commonly asked questions from new designers regarding the use of Constellation. This implies an improved understanding of the systems and a more efficient onboarding process.

The creation of Constellation University allows for a standard reference point for designers. The availability of recorded video training modules not only makes the information accessible but also serves as a repository for new hires.

The project has streamlined the onboarding process for new designers at Zillow, transforming Constellation from an obscure entity to an accessible and comprehensible resource, ultimately enhancing productivity and fostering a more collaborative and efficient working environment.

 

Where it all started

In order to make this a truly cross-platform initiative, I ensured that all of our platform leads had a seat at the table. Through our collective effort, we crafted a comprehensive project brief. I took the lead in mapping out the tasks to be tackled, setting up two complementary Asana projects. One provided a bird’s eye view of the overarching project milestones and timelines, while the other zoomed in on the progress of individual videos.

Two images taken from Asana project planning highlighting the work to be done in kanban format.
 

Content is King

I pinpointed individuals within the team who were subject matter experts on distinct topics to take the lead in developing the criteria for their respective areas. To promote a collaborative approach, I assigned designers to their areas of expertise. Equipping them with a set of guidelines, I ensured that they had a clear pathway for crafting their topics, including aspects like introductions, training objectives, summary, and so on. This method established a consistent structure, ensuring the cohesion of all the training videos.

Screenshot taken from Google Docs highlighting some of the outlines created for the Constellation 101 training.

Video template explorations

The placement of our content on the documentation site also required careful consideration. Evaluating the content from our outlines, I discerned the need for a variety of video page templates. While developing the ‘Constellation 101’ materials, I observed that the information would be best presented in a video series format, contrasting with other topics that needed standalone presentations. We crafted potential solutions through a series of creative explorations, ensuring regular communication with our engineers to confirm the practicality of our proposed functionalities.

Landing Page Iterations

A series of 3 images showcasing slight variations of the landing page designs.

Video Page Iterations

Two images displaying variations of a single video page template: one previews the content before the video, the other reveals the content following the video.

Video Series Iterations

Two images illustrating variations of a video series page template: one with a large video accompanied by smaller ones below, and another showcasing a scrollable layout of large videos.

Constellation 101

Collaborating with a team member, we crafted the presentations for the crucial ‘Constellation 101’ materials. This series formed an integral part of the onboarding experience we aimed to build. It was a comprehensive resource that encompassed a wealth of information: from our team’s history and the nature of design systems to partnership guidelines, component request procedures, accessibility considerations, and avenues for assistance. I drove the content development, sorting the presentation into vital slides and topics, while my teammate focused on finessing the visuals.

Two images: one provides a bird's eye view of the full content in the Constellation 101 video series, while the other focuses in on a closer view.
Another closer glimpse of content from various sections within the training material.
 

Video recording and editing

Upon finalizing the outlines and visuals, I dove into capturing and editing the content. It was crucial to maintain cohesion across all videos, so in addition to the content outline guidelines I developed, I also created a video recording template. This included a format for intro and outro screens and could be easily tailored for specific topics. To assist my team in navigating this new tool, I recorded a few tutorial videos on how to use the template. Collaborating with my colleague, we crafted the visuals for the intro/outro screens, rounding off a comprehensive guide for my team members.

Additionally, I devised a video inventory document to consolidate all video-related information, streamlining the process for our engineers as they built the corresponding pages. This ensured accuracy and efficient management of assets.

The screenshot on the left displays the video editing tool used for final video creation, while the adjacent image showcases a Google Sheet with rows of content ready for site implementation by the engineering team.

Final screens

Here’s a glimpse at the final iteration of the Constellation University landing page, the Constellation 101 video series, and an individual topic video. We have successfully created a scalable content system that allows us to continually add new content and is well-prepared for future expansion.

Final Landing Page

Showcasing the Constellation University Landing page: housing 'What is it?' and 'Getting Started with Constellation 101 & 102' sections, plus a 'More trainings coming soon' teaser.

Final Video Series Page

The final Constellation 101 video series presents a list of prominent videos, each accompanied by a short description.

Final Video Page

An illustration of the final single video page template, featuring the video prominently and followed by 'About this video', 'What you'll learn', and 'Suggested materials' sections.