REI · Seasonal Clearance

The brief

REI's seasonal-sale events (January Clearance, End of Season, Year-End Clearance) are some of the highest-traffic, highest-stakes campaigns the site runs. The brief, in the fall of 2019, was to land them with more visual punch than the static banners we'd been shipping. Specifically: I wanted REI's first animated banners in production.

The catch: the engineering constraint was a hard 500 KB ceiling per banner, regardless of what we wanted to do inside it.

What I built

A moose. Turning its head, breathing visible breath, snow falling around it. All in under 500 KB.

The pipeline I worked out, eventually:

1. Drew individual frames of a moose turning its head in Sketch
2. Composited the head turn with breath and snow in After Effects
3. Exported at high frame rate through Media Encoder
4. Researched color-space optimization to keep file size sane without visibly degrading the animation
5. Exported 30 iterations, tuning resolution, framerate, and color accuracy on each pass until I had something that fit under the ceiling and still felt like the brand

That treatment carried across the seasonal-sale series (January Clearance, End of Season, Year-End Clearance) with seasonally-adjusted imagery on the same animated-banner system.

Role and stack

UI Designer. Tools: Sketch, Photoshop, After Effects, Media Encoder. September 2019 onward.

What I took from it

"With technical knowledge, a designer can get away with a lot."

The bigger lesson: most of "going above and beyond" is figuring out what your engineering and creative partners are actually constrained by, and designing into those constraints rather than against them. The 500 KB rule is the reason this project shipped at all.

What I'd do differently

I'd loop the creative department in earlier. They had strong opinions about the movement that I only solicited late. Better answer would have been to have them in the room when I first sketched the head-turn.