50% reduction
in time required to design, brand, and theme layouts
Client
Hyatt (Canvas Brands)
Role
Sr. Product Designer
Industry
Hospitality
As a Senior Product Designer at Hyatt, I led the development of a modular, scalable design system and component library that transformed how our digital teams designed across the brand’s lifestyle portfolio. My work helped increase design efficiency, improve brand consistency, and create a more seamless collaboration process between designers, developers, and stakeholders.
🧩 Design System & Component Library Development
I led the creation of a modular, scalable component library in Figma, enabling faster design production across multiple teams and brands. The system included fully responsive UI components, theming capabilities for brand-specific styling, and clear documentation to support cross-functional teams.
By designing a flexible yet structured foundation, we created consistency while allowing each brand's unique expression to shine through. This work laid the groundwork for rapid design, faster approvals, and higher quality across Hyatt's lifestyle digital ecosystem.
🔎 Challenges & Craft Details
As we built the new component library, one of the biggest challenges was maintaining alignment with Hyatt’s standard column grid system across different brands and devices. Since we were creating new modular components from scratch, I had to carefully manage grid structures, aspect ratios, and enforce consistent padding and margins throughout the system.
I paid special attention to creating top and bottom padding rules, setting clear margin standards, and building components that would stay visually balanced even as content varied. Additionally, I built in multiple breakpoints from the beginning to ensure the components worked seamlessly across desktop, tablet, and mobile experiences.
This attention to structure, consistency, and flexibility helped the system scale smoothly across diverse brand needs without sacrificing quality or user experience.
🎥 High-Fidelity Prototyping & Validation
To strengthen collaboration and speed up stakeholder decision-making, I created high-fidelity, interactive prototypes that brought key user journeys and layouts to life. These prototypes helped stakeholders better visualize the flow and behavior of the new components in real-world contexts, making it easier to align and approve work quickly.
Beyond presentations, I also used prototypes to test and validate the components in a real-life context — interacting with layouts as users would, catching spacing inconsistencies, responsiveness issues, and visual misalignments early on. This hands-on validation process helped fine-tune the system before development, saving time and minimizing rework later.
🛠️ Instructional System Creation
After building the core component library, I realized it was just as important to empower the broader team to use it effectively. I led the creation of an instructional system that blended Hyatt’s brand toolkit, developed by Bellhop (Hyatt’s brand team), with the new component structure.
I focused on making the system approachable and practical, providing clear guidance on how to apply the components and maintain brand consistency without slowing down creativity. This helped standardize the process across different teams, ensuring that everyone could work faster while staying aligned to brand standards.
🎛️ Variable Setup & Brand Application
I also leveraged Figma’s variable functionality to organize semantic color systems, typography, spacing, and theming rules into clean, easy-to-use panels. Designers could now quickly adapt layouts by simply adjusting variables — without needing to manually rebuild styles. This setup made the design process more efficient, reduced room for error, and strengthened visual consistency across all projects.
After finalizing the instructional guide and system, I worked directly on applying it to Hyatt’s parent brands, including Destination Hotels, Unbound Collection, JDV, and Bunkhouse. I also helped define and create the refreshed digital look for 7Pines Hotels, using the component library and variable system as the foundation to ensure each site felt distinct yet consistently tied back to Hyatt's overall design standards.
📈 Outcomes
Greater scalability and consistency
across Hyatt’s lifestyle portfolio
Faster stakeholder alignment
through interactive prototyping and real-world validation
Empowered cross-functional teams
with a centralized, easy-to-use design system in Figma
Improved overall speed-to-market
for branded site launches
