Overview
Boyne Resorts, a leading operator of 18 resorts across the U.S., approached us with a monumental challenge: create a robust platform that would allow them to build and manage individual resort websites seamlessly. These resorts spanned diverse offerings, including ski resorts, golf clubs, theme parks, and vacation destinations. The platform needed to integrate their existing APIs for various functionalities while maintaining unique branding for each resort.
Project Goals
- Develop a custom solution for Boyne Resorts to manage and create websites across all 18 properties.
- Engineer a scalable design system capable of handling multiple brands with distinct themes and assets.
- Seamlessly integrate with the APIs powering Boyne’s existing functionalities, such as bookings and event management.
As the art director for this project, I spearheaded the creation of an extensive design system and coordinated the collaboration between design and development teams. My responsibilities included:
- Researching and implementing tools to build a scalable design system.
- Crafting a token-based design system in Figma using Token Studio for seamless integration with code.
- Training and overseeing a team of designers to use the design system efficiently.
- Aligning the design system with technical requirements to ensure smooth handoff to the development team.
The Process
Discovery & Research
- Understanding the Scope: Worked with Boyne Resorts stakeholders to understand their requirements, such as multi-brand support, API integration, and the ability to manage content independently.
- Researching Tools: Conducted extensive research to identify the best approach for a design system of this scale. After evaluating various tools, I proposed using Token Studio, a fairly new tool at the time, to manage design tokens for consistent styling across brands and themes.
Design System Development
- Brand Integration: Built a comprehensive design system that included assets for all 18 resorts while supporting three interchangeable themes. Each theme could be customized to reflect a resort’s unique branding.
- Token Studio Implementation: Created a detailed environment in Token Studio, allowing seamless integration between Figma and the development codebase. This setup ensured consistent styling, rapid updates, and reduced errors during development.
- Scalability: Crafted reusable components and styles that enabled designers to quickly build new layouts while maintaining consistency.
Collaboration with Development
- Worked closely with our director of development and engineering teams to ensure the design system’s token-based setup integrated seamlessly with their workflows.
- Addressed challenges like branch updates and synchronization by refining the token architecture to minimize conflicts.
- Conducted regular syncs to test integrations and resolve bugs during the early iterations of Token Studio.
Team Enablement
- Trained the team of designers on how to leverage the design system and tokens to create components efficiently.
- Delegated tasks to ensure smooth collaboration and oversight while maintaining quality and consistency in designs.
Challenges Overcome
- Pioneering Token Studio: The tool was relatively new and undergoing frequent bug fixes and updates. I worked closely with developers to troubleshoot issues and adapt processes to its evolving functionality.
- Multi-Brand Scalability: Crafting a system to manage 18 unique brands while supporting interchangeable themes required meticulous planning and testing.
- Cross-Team Alignment: Ensuring the design and development teams stayed aligned through such a complex project was critical. Regular communication and iterative updates kept everyone on track.
Outcome
The design system became a cornerstone of the project, enabling Boyne Resorts to quickly build and manage websites for all 18 properties with minimal friction. The seamless integration between Token Studio and the development codebase reduced handoff errors and streamlined the design-to-development workflow. Designers and developers praised the system for its efficiency, making it easier to create new components, implement updates, and maintain consistency across brands.
Takeaways
This project was a testament to the power of research and innovation. Implementing a token-based design system for such a large-scale, multi-brand platform showcased the importance of scalable design and collaboration. It also reinforced my ability to lead a team through uncharted territory, ensuring both designers and developers could work efficiently with cutting-edge tools.
- Categories: Digital Media / Web
- Year: 2023
- Client: Boyne Resorts