Hilton

A wonderfully Wicked transformation

Hilton is a global leader in hospitality, managing 18 brands across hotels, resorts, and vacation properties. Their “Stories from Hilton” website—built on WordPress using Gutenberg and powered by a Next.js front end—serves as a storytelling platform for brand content and promotions.

In the summer of 2024, Hilton came to us with a bold, time-sensitive opportunity: a full homepage takeover and themed template redesign to promote their collaboration with Universal Studios and the upcoming release of Wicked. The challenge was to deliver a completely rebranded experience in just weeks, in time for a major October announcement and the film’s November release.

Challenge & Approach

The goal was to craft a unique, immersive journey that merged the film’s magic with Hilton’s “Stay Like Wicked” campaign—something visually stunning, interactive, and distinctly different from the rest of the site. Multiple rounds of approvals were required between Hilton and Universal, so agility and efficiency were key.

We began by concepting homepage ideas that would capture the spirit of Wicked while working within the constraints of Hilton’s existing design system. To move quickly, we reused existing components wherever possible. Working closely with the designer on the project, we treated the visual direction like a thematic skin—one that emphasized the unique look of Wicked while preserving core functionality.

Branding like Wicked

The article templates followed a similar approach. While they reused existing blocks, we added styles to give them a custom Wicked-inspired look and feel. We also introduced a new Gutenberg block to let editors insert themed elements—like the signature “gears” found throughout the page. This blend of existing and custom components saved time and ensured editorial flexibility.

Technically, we created a set of new WordPress templates that added a unique class name for us in Next.js. This let us scope custom styles only to the relevant pages, avoiding unintended side effects. It also made the template reusable for future campaigns. Custom React hooks like useTemplate allowed components to adapt specifically for Wicked, without disrupting the rest of the codebase.

Scoping the templates this way was as much a design decision as a technical one — it meant the Wicked takeover could feel like a total brand transformation without risking the rest of the Hilton site’s stability or design consistency. That separation also meant future campaigns could reuse the same pattern without inheriting Wicked-specific styling.

Welcome to Oz intro animation

The centerpiece of the experience was the homepage animation—a scroll-driven sequence built with Framer Motion. The animation took users on a journey through the clouds into the world of Wicked, with visual elements unfolding as they scrolled into the Emerald City. This dynamic storytelling added a sense of immersion and control, while a skip button supported accessibility and remembered user preferences.

Every beat of the scroll sequence was a negotiation between spectacle and usability. We paced the animation so users felt swept into the story without losing control of their scroll, and we made the skip button prominent and persistent rather than tucked away knowing that not every visitor wants a slow reveal, especially on a return visit. Remembering that preference was a small detail, but it mattered: it respected the choice a user had already made instead of forcing them through the sequence again.

I worked closely with the designer throughout, translating their storyboard into a scroll-driven sequence, figuring out where Framer Motion could deliver the visual richness they wanted without tanking performance, and flagging early where a design idea needed to be adapted for how scroll timing actually feels in the browser versus how it looks in a static mockup.

Results & Impact

The results were immediate and impressive. The launch met all deadlines, and Hilton sold out every themed room within five days of the campaign going live.

That outcome validated the core design bet: that a bold, immersive takeover done carefully enough to stay fast and accessible was worth the engineering complexity it required.

Thanks to our scoped design system, Hilton was able to toggle the takeover on and off as needed—relaunching it around the movie’s release in November. While the homepage experience was temporary, the updated article template remains live today on the Stories from Hilton site.