Embedded Files
Context
Senior IxD at Hyatt, collaborating with designers and developers to document component interaction standards across a four-phase process: audit, organize, define, and maintain.
Problem
Without shared standards, designers and engineers lacked a common foundation for collaborating efficiently, resulting in inconsistent digital experiences for guests.
Options Considered
The audit phase identified commonly used patterns versus outliers, which informed the decision to organize components into two groups — Elements (atomic controls like buttons) and Composites (complex patterns like booking widgets) — rather than treating all patterns equally.
Trade-offs
Authoring time was the primary constraint. This was addressed by creating guidance templates and a review process, with each pattern assigned to both a designer and an editor with a deadline to ensure on-time delivery.
Outcome
Coding and design standards were created and continue to be leveraged for Hyatt's rapid development process. The pattern library now lives within Hyatt's Living Design System, including a style guide and a CSS code component library.
Phases
Phases
1. Audit
First we needed to take an inventory of Hyatt's current design patterns. Screens were printed and similar patterns clustered together. We also noted patterns which were commonly used vs. outliers.
2. Organize
From our affinity diagram, we created an IA consisting of 2 main groups; Elements and Composites.
Elements are the discreet atomic level controls such as a buttons which can be reused and combined into Composites.
Composites solve more complex problems such as booking a reservation or site sign-in.
Elements were then grouped into; Actions, Form Controls, Navigation, Messaging and Content.
3. Define
Each pattern consists of the following sections:
A brief description
Usage (when to use vs. when to use something else)
Usability criteria for responsive web and touch
Accessibility for keyboards and screen readers
Examples
4. Maintain
Each pattern was assigned to both a designer and an editor and given a deadline to ensure it would get done on time. We used Google Docs for authoring, reviewing and then exported each document into a markup file so it could be hosted in a stash repository. Progress was tracked using a Google Sheet.
Today, this pattern library resides within Hyatt's 'Living design system' and includes a style guide defining the company's base visual language as well as standards and utilities in the form of a CSS code component library.
Google Sites
Report abuse