WS / FLIGHT LOG

01 / Departure

Good work.
A little space
to explore.

I’m Will Saunders. I build front-end experiences where marketing, technology, and imagination meet.

Explore my work

Click to set a waypoint, or hold and move the pointer to fly. Links and controls remain interactive; release to coast.

Scroll to explore. Tap the flight arrows to visit a section, or hold to cruise and release to coast.

02 / Commerce & marketing

Five years.
Three platforms.
One evolving experience.

Building BODi’s product and service landing pages as the tools behind them changed.

Try the content rules Explore carousel & video
My role
Front-end development within Marketing
Collaboration
Marketing & Engineering
Focus
Landing pages, custom components & experimentation

The context

Over five years at BODi, I built landing pages for products and services. The work spanned three platforms and two replatforms, connecting marketing experiences with the engineering behind them.

What I contributed

I helped with both replatforms and built custom components with HTML, CSS, JavaScript, and Shopify Liquid. I extended shared React and TypeScript components for conditional content and experimentation, and improved carousel and video behavior alongside Engineering.

Follow the platform journey

  1. Contentful & Cloudinary

    CMS-driven React pages with Cloudinary media, including the Harmony application.

  2. Builder.io

    I helped with the move to Builder.io and continued building marketing experiences.

  3. Shopify

    I helped with the next replatform and built custom components using Shopify Liquid alongside HTML, CSS, and JavaScript.

Experimentation & measurement

I worked on A/B experimentation in Optimizely and later Amplitude, and helped manage tags in Google Tag Manager. Experimentation and measurement were part of the implementation work alongside page and component development.

The through line

My contribution extended across the platform changes: building landing pages, implementing custom components, and collaborating between Marketing and Engineering.

  • HTML / CSS / JavaScript
  • Shopify / Liquid
  • React / TypeScript
  • Optimizely / Amplitude
  • Google Tag Manager
01 / Conditional contentReact · TypeScript
Preview of the editable rules panel and sample storefront offer.
Content that knows its audience.Configure cart, campaign, and experiment rules. See the decision update live.Open the playground ↗
02 / Carousel & videoReact · Media state
Preview of a centered video card, neighboring clips, and synchronized backgrounds.
Selection. Motion. Playback.Swipe between clips and explore how video and carousel state stay coordinated.Explore the interaction ↗

Standalone portfolio recreations with original-code excerpts, sample data, and new demo media.

03 / Product-page experienceBODi storefront
BODi Energize product page with product imagery, serving-size and flavor selectors, and subscription or one-time purchase options.
Energize product pageProduct details, variant selection, and purchase options. Open the image for a closer look.

03 / Entertainment & awards

A spotlight
on the stories.

Disney awards campaign websites that brought films, campaign materials, and media together in one experience.

Guild demo AMPAS demo
Project
2018 Guild & AMPAS campaign sites
Focus
Film navigation, responsive layouts & media interfaces
Format
Multi-film awards campaigns

The context

Awards campaigns have more to share than a trailer. Each film needs a home for its story, consideration materials, press, and media, within a site that lets visitors move between titles.

The front-end experience

The archived sites bring together a shared film menu and title-specific pages. Films including Black Panther, Incredibles 2, and Bao sit within a common navigation structure while keeping their own artwork and campaign content.

Navigation & responsive behavior

The Guild implementation tracks the selected film and page in the URL, allowing direct links into individual sections. Its layouts adapt between mobile and desktop, with film content and navigation arranged for the available space.

Media & campaign content

The archive includes film galleries, video interfaces, and score and song sections, alongside press and consideration materials. The available sections vary by title rather than forcing every film into an identical set of pages.

What makes it interesting

A shared front-end structure supports very different films. The interaction connects them; the imagery gives each title its own identity.

Selected work from the archive. The images shown are original campaign assets; full interface captures will follow.

  • Responsive front end
  • Film navigation
  • Media interfaces
  • Awards campaigns
Black PantherArchived campaign artwork
Black Panther title artwork recovered from the Disney Guild campaign site.
A shared site. A distinct film identity.Original film-selection artwork from the campaign archive.
BaoArchived gallery image
A woman and the little dumpling character at a kitchen table in Bao.
Space for the smaller stories, too.Original gallery image from the same multi-film campaign.

04 / Animation & interaction

Two shorts.
Two little worlds.

A playful awards campaign site for DreamWorks Animation’s Bilby and Bird Karma.

View archived demo
Project
DreamWorks Animation Shorts FYC 2018
Focus
Film selection, transitions & exploration
Content
Clips, photos & filmmaker profiles

The experience

The site starts with a choice: two film posters, each opening its own world. Selecting a short transforms the header into a film menu and reveals that film’s artwork and content.

The interaction details

The preserved front end uses a flipping header, film-to-film transitions, and photo selection to make browsing feel playful. Inside each film, visitors can explore clips, stills, and the people behind the story.

Keeping each film’s state in order

Switching films resets the selected subpage and gallery state. Photo thumbnails update the main image, filmmaker navigation switches profiles, and closing a media panel pauses and resets its videos.

Adapting the experience for mobile

The original implementation changes how film subpages open on smaller screens, using separate content views for the selected section. The same films and materials remain the center of the experience.

Why it belongs here

It brings together the parts of front-end work I enjoy: character, motion, and small interactions that invite someone to keep exploring.

The film switcher here previews recovered artwork. Open the archived demo to explore the original site’s transitions, galleries, and filmmaker profiles.

  • jQuery
  • CSS transitions
  • Photo galleries
  • Responsive layouts
Choose a little worldArchived campaign artwork
Bilby and a fluffy baby bird on a rock against a blue sky; original campaign artwork.
Bilby — a little courage, a little company.Original landing-page artwork. This preview is not a capture of the full interface.
Bird Karma’s long-beaked bird watching a leaping orange fish; original campaign artwork.
Bird KarmaOriginal landing-page artwork from the campaign archive.

05 / Interactive campaign

A countdown.
A code.
A reason to return.

24: Live Another Day — a social-to-site campaign that turned a home-entertainment release into twenty-four days of discovery.

Client
FOX Home Entertainment
Agency
NWE
Format
24-day campaign leading up to the DVD release

The mission

Codes hidden in images on the 24 social channels brought fans back to the campaign site. Each code unlocked another moment, building toward an exclusive video when all twenty-four were collected.

  1. 01 / DiscoverFind a code on social.
  2. 02 / UnlockReveal a moment on the site.
  3. 03 / ReturnShare the reward. Find the next code.

The front-end experience

A grid of twenty-four moments made the campaign’s progress visible. Locked tiles became revealed content, with a closer look at each reward and a way to share it. The final “Mission Accomplished” reveal gave the collection a clear destination.

Small states, bigger experience

The archived front end distinguishes locked and unlocked days, animates reward tiles into place, opens sharing panels, and reveals the final video when all twenty-four days are unlocked. Those states connect the individual interactions into one ongoing mission.

Taking the mission onto mobile

The preserved screenshots show both desktop and phone layouts: the same reward collection, content panels, and final video in a narrower format. Keeping that loop available on mobile mattered for a campaign whose clues began on social channels.

Why it belongs here

The campaign gave the interface a role in the story. Finding a clue, revealing a tile, and completing the collection made browsing feel like taking part in the world of 24.

Explore the 24 Moments demo ↗

Original campaign screenshots from the portfolio archive. Open an image to explore its details.

  • JavaScript / jQuery
  • GSAP animation
  • Responsive layouts
  • Unlock states
  • Social sharing
01 / The mission boardOriginal campaign screenshot
24 Moments campaign overview with Jack Bauer artwork and a grid of daily rewards.
Twenty-four moments. One mission.A collection of locked and revealed rewards gives the campaign its structure.
02 / The rewardDesktop & mobile
Desktop and phone views of 24 Moments, showing an unlocked reward panel and sharing controls.
A reveal worth sharing.Unlocked moments open into content panels, with sharing built into the reward.
03 / Mission accomplishedThe final reveal
Mission Accomplished video reveal in the 24 Moments desktop and phone layouts.
The collection pays off.The completed mission reveals the exclusive video across desktop and mobile.

06 / Open channel

Let’s build something
worth exploring.

I’m Will — a front-end developer with a soft spot for interactive experiences and a good story.

Have a project in mind? I’d love to hear about it, whether it’s a marketing site, a custom component, or an idea that needs a little figuring out.

Send a transmission
GitHub ↗LinkedIn ↗Resume (PDF) ↗

Behind the keyboard

I got my start making websites for friends’ bands. These days, I build experiences for the web — and still make room for the playful stuff. Hence the spaceship.

Away from the screen, I write, watch movies, and do improv. My golden retriever, Ser Davos, also gets a fair amount of my attention.

Ready for departure