CASE STUDY
Building an Immersive Experience for Jo Malone London’s Sea Salt & Bergamot Campaign
Summary
For the high-profile launch of Jo Malone London's new Sea Salt & Bergamot cologne, 8 West created a cinematic digital campaign experience that translated the energy of the British coast into an engaging online journey.
Built within Jo Malone London's existing Drupal CMS, the page combined immersive storytelling, product discovery, and responsive ecommerce functionality in one connected experience.
The Challenge
Jo Malone London wanted the online launch to reflect the atmosphere and creative ambition of its wider Sea Salt & Bergamot campaign. The experience needed to showcase the new cologne alongside the established Wood Sage & Sea Salt fragrance, helping customers explore the collection online as well as in store.
The challenge was to create a highly choreographed, scroll-led experience within an established Drupal environment. The page needed to work across desktop and mobile, accommodate a large range of media assets, and maintain the precise visual sequencing required by the approved creative direction.
For a campaign like this, standard CMS components alone would not provide the control needed to achieve the intended transitions, overlap effects, and responsive visual storytelling.
The Solution
8 West created an immersive, scroll-led digital journey using Drupal, HTML, CSS, JavaScript, and GSAP's ScrollTrigger and ScrollSmoother tools. Our existing familiarity with Jo Malone London's Drupal environment and approved library versions helped reduce integration risk from the outset.
The solution used a fixed-structure, dynamic-content model. This allowed Jo Malone London's content teams to manage approved imagery, video, audio, and copy through Drupal, while preserving the carefully designed animation sequence in the front-end build.
The experience included:
- A scroll-led hero sequence introducing the Sea Salt & Bergamot story
- A pixel-accurate implementation of the Figma design at key desktop breakpoints
- A connected campaign journey across the hero, fragrance story, and media gallery
- Interactive hotspots and slide panels to support product exploration and seamless purchasing directly within the experience.
- A persistent "Shop the Scent" call to action, which also served as a visual progress indicator throughout the journey
- Responsive desktop and mobile experiences tailored to each interaction model
- Enhanced existing Drupal templates, including the product card and social modules.
Working closely with the brand team, 8 West refined the mobile experience to use animations and transitions optimised for smaller screens and touch interaction.
Because GSAP was new to this build, we validated the approach early by testing it against dummy prototypes before committing to full development. This proof-of-concept step confirmed the library could deliver the required visual quality and reduced technical risk.
Alongside the campaign page, we also updated the existing Scent Layering Tool allowing customers to explore new fragrance pairings with Sea Salt & Bergamot.
The Outcome
The finished experience gave Jo Malone London a distinctive digital platform for launching Sea Salt & Bergamot and celebrating its wider collection of coastal-inspired fragrances.
The project brought complex campaign storytelling, media, fragrance discovery, and shopping journeys into one cohesive page, while remaining manageable within the existing Drupal CMS.
Close collaboration between 8 West and Jo Malone London's brand team supported a smooth programme from concept through to launch, with both teams working iteratively to refine the experience against the approved creative vision.
The result was a responsive, scroll-based experience that maintained the campaign's visual quality across devices and created a direct path from brand discovery to product exploration.
The engagement also reflected a broader trait in how 8 West's technical team’s work: staying personally invested in outcomes, not just delivering to specification.
Conclusion
Immersive campaign experiences do not always require a new platform or a fully bespoke content management system. Where art direction, animation, and media are closely tied together, a fixed front-end structure with controlled CMS content offers the right balance, protecting the creative vision while giving content teams the flexibility to manage it.
The project also highlighted a broader principle: identifying a platform's performance boundaries early enables realistic design, preventing teams from fighting unchangeable constraints later.
Validating GSAP through prototypes ahead of full development reduced risk on a project with a fixed launch date. Just as importantly, the close working relationship between 8 West and Jo Malone London's brand team allowed creative feedback to be incorporated smoothly, resulting in a more polished experience than the original specification alone would have delivered.
To view the experience, visit Jo Malone - Scents Of Adventure
Technologies
| Category | Technology / Component |
| CMS | Drupal |
| Frontend | HTML, CSS, JavaScript |
| Animation | GSAP (GreenSock Animation Platform) |
| Animation plugin | ScrollTrigger |
| Scroll behaviour | ScrollSmoother |
