Microsoft
Rich media campaign for Microsoft featuring interactive product demos and feature showcases. GreenSock animation with cross-browser compatibility across the product portfolio.
Overview
Rich media campaign for Microsoft featuring interactive product demos and feature showcases across the product portfolio. Built for cross-browser reliability with GreenSock animation driving all transitions.
Enterprise tech accounts required strict brand compliance: Microsoft's design language, typography, and interaction patterns had to be followed precisely.
How It Works
Brand
Page Grabber expands. Microsoft logo animates in with brand-standard motion curve. Hero product imagery loads.
Features
Tabbed navigation presents product features. Each tab loads a new content section with animated transitions via GreenSock.
Demo
Interactive demo sections let users explore product capabilities. Animated UI mockups show features in context.
CTA
Learn more and trial CTAs with click attribution through the ad platform SDK.
Engineering
Product Tour Architecture
Tabbed sections function as mini product pages. Each tab manages its own content lifecycle: load, animate in, interact, animate out on tab switch.
Brand Compliance
Microsoft's design language enforced in CSS: exact hex values, Segoe UI font stack, standard spacing grid, and motion curves per their ad toolkit spec.
Interactive Demos
Animated UI mockups built with layered PNGs and GreenSock. Users interact with simulated product interfaces that respond with animated state changes.
Cross-Browser
Zepto for modern browsers (smaller footprint), jQuery fallback for IE8/9. Feature detection determines which library loads, keeping the runtime lean.
Engineering Decisions
Enterprise users want control over what they see. A linear animation forces them through features they may not care about. Tabs let them jump to what's relevant.
Video is passive. Interactive mockups let users feel the product: hover states, click responses, and animated transitions create the impression of using the real software.
Brand compliance was non-negotiable. Segoe UI was specified in the brief, loaded via @font-face with fallbacks to ensure rendering matched the brand toolkit.
UA strings are unreliable and spoofable. Feature detection (CSS support, JS APIs) determines the actual rendering capability and loads the appropriate library.
Project stack
More projects
LG OLED
Display technology showcase with split-screen comparison tool, pixel-level color demo, and product feature cards
Garmin
GPS product showcase with outdoor activity demos, route visualization, and fitness tracking highlights
iRobot
Interactive product demo for Roomba with cleaning path visualization, model comparison, and feature breakdown