Overview:
This project was the most creative
Goal
To push REI to have their very first animated banners within the engineering teams web constraints
Role
UI Designer
Tools
Sketch, photoshop, AE, Media Encoder
Timeline
September 2019
Pushing the limit
Creative always has assets ready for use by the web and print teams, but it was slow and I wanted to make it pop. I talked to the engineer that I worked with at the time about what it would take to have animated banners.
They said it wasn't possible, the file would have to be below 500kb to run and there was no videos that fit within the creative. An engineer and I took on this challenge.
Before:
After:
Process:
1. Create every frame of the moose turning it's head in Sketch
2. Stitch it together with the breath and snow falling in after effects.
3. Export it at a high frame rate into Media Encoder
4. Research color space and optimization
5. Export 30 times until I got the variables right to keep resolution, framerate, and color accuracy
And then I did it again, for every clearance sale of the year at every breakpoint.
January Clearance
End of Season
End of Year
With technical knowledge, a designer can get away with a lot. This is where I learned that learning what your co-workers constraints are, and how to communicate well with partners that may not have the same goals as you is the key to going above and beyond.
Morgan Blair 2025
Seattle, Wa.