Sarah Chu
newauto.png

Constellation Web: Autocomplete [Zillow Group]

 

Autocomplete

Constellation Web is one of the four design libraries that make up Zillow's comprehensive Design System. As a designer on the Systems team, I contributed to quite a few components and patterns. In this Autocomplete case study, I will go over my standard process when contributing components to the Constellation Design System.

Duration: 3 months
Team: Brian Stone (Developer)
Role: Competitive analysis, internal audits, hypothesis framing, best practices research & synthesis, UI design, Figma component construction, documentation

 

Problem Area

I conducted a site-wide autocomplete internal audit and identified that every web page handles this component differently. Zillow is a heavy input driven platform, so the vast amount of autocomplete inconsistencies creates a jarring and incohesive experience.

How might we create a multi-purpose autocomplete component that can serve different use cases & functionality in Zillow’s many lines of business while standardizing visual design, micro-interactions, and interaction states?

DISCOVER PHASE

Internal Audit

Through my site-wide internal audit, I was able to identify the product areas, designers or teams who might need this component.

 

DISCOVER PHASE

Internal research

After identifying the product teams teams who might need this component, I connected with the representative (usually a designer or engineer) of each product area so I could get a better understanding of their use case, team restrictions, and design/dev history behind their existing autocomplete component.

 

DISCOVER PHASE

Competitive Analysis

 

DEFINE PHASE

Conceptualizing Flows and States

 

CONCEPT PHASE

Component Work & Ideations

 

DESIGN PHASE

Final Designs & Variants

 

INTEGRATION PHASE

Component Work & Documentation

Snapshot of the Figma component variants and a sample of the written documentation.

 

Reflection

It’s always a lot of fun contributing to Constellation’s design system libraries. It’s rewarding to see other Zillow designers use the components in their products and empower them to move faster and design at a higher quality bar.