The Holiday Scramble
The holidays can be a whirlwind. If you’re anything like me, you might find yourself caught in a last-minute scramble, hunting for the perfect gifts with just days to spare. And while a gift card from 7-Eleven is the perfect gift, we wanted to help REI customers find something a bit more… thoughtful.
Many businesses try to help with gift suggestions: “Gifts for Him,” “Gifts for Her,” “Gifts for Adrenaline-Junkie Grandparents.” In 2014, REI’s holiday campaign featured hundreds of products across dozens of categories. It was overwhelming—like staring at a blank slate. We knew there had to be a better way.
That winter, if you were browsing Outside Magazine on your iPad, you might have noticed an REI ad that was more than just an ad. It was a fully functional web app designed to cut through the holiday noise and guide shoppers to the perfect gift for the outdoor lovers in their lives.
A Collaborative Sprint
My team at REI handled our seasonal marketing campaigns, crafting everything from banner ads to billboards. Typically, our process was pretty linear: one task leads to the next, a waterfall if you will. But for this project, I took on the role of lead designer and saw an opportunity to shake things up with a more collaborative approach.
The brief was open-ended: “support the holiday gift-giving campaign.” With such a broad directive, I knew we needed to brainstorm as a team to narrow our focus. I gathered a half-dozen team members, whether they were officially on the project or not, to help me think through the problem and come up with some creative solutions.
In our first meeting, I borrowed from Google Ventures’ design sprint methodology, kicking things off with an exercise called Crazy 8’s. The idea was simple: each person folds a sheet of paper into eight panels and has five minutes to fill them with quick sketches—about 40 seconds per sketch.
Some of the ideas were wild—choose-your-own-adventure stories, product pickers, and even Angry Birds-like slingshot games. This creative burst led to a lively discussion, and we walked away with three strong directions. I sketched out storyboards to visualize the user experience, and we quickly realized that one idea—using a Mad Libs-inspired natural language search filter—stood out as the best fit. This approach aligned perfectly with REI’s reputation for expert advice and customer service.
From Concept to Code
The primary user flow was straightforward: shoppers could filter products based on who they were buying for, the recipient’s favorite outdoor activities, and their budget. The products appeared as a grid of cards, and shoppers could either click through to the REI website or add items to a gift list.
Initially, we wanted the gift list to function like a shopping cart, but technical challenges with REI’s systems forced us to pivot. Instead, we decided to offer a transactional email for later reference—a solution that was simple, effective, and within our means.
Once we nailed down the basic structure with sketches and a static comp, I jumped into coding the final design. Coding directly in the browser allowed me to prototype functionality quickly, speeding up the review process and ensuring leadership buy-in. As they say at IDEO, “If a picture is worth a thousand words, a prototype is worth a thousand meetings.”
A Single Page Ad
The magazine’s publishing platform, essentially a plugin for InDesign, was great for basic interactions like slideshows and 360° product views. But for what we had in mind, it was too limited. Fortunately, the platform allowed us to embed HTML, opening up the full potential of modern web technology.
For this project, I needed a framework that was both powerful and easy to implement. Having spent way too much time manually updating code for a previous project, I knew there had to be a better way. Enter Angular (Angular 1 for you kids out there). After watching a few tutorials, I was blown away by how it streamlined the development process.
Building the ad as a single-page application in Angular enabled us to pull off some pretty cool tricks. We could make asynchronous calls to our product feeds, update pricing and availability in real-time, and highlight featured products. It also saved me a sleigh-load of time—no more copy-pasting code for hundreds of products.
The Dreaded Legal Review
While the coding and design process went smoothly, legal review was another story. The main sticking point was the transactional email feature. Despite my best efforts to meet the FCC’s guidelines—adding the necessary legal language, using a separate IP, and cross-referencing email addresses against our unsubscribe list—the legal team wasn’t satisfied.
On the morning I was set to hand off the finished ad, I got the dreaded news: we had to pull the email functionality due to legal concerns. With no time to find an alternative, the gift list ended up being a simple reference tool. Disappointing, but sometimes that’s just the way the cookie crumbles.
A Holiday Succes
Despite the legal hiccup, the REI holiday campaign was a success. Although this particular project had a small reach, it achieved a campaign-leading 3.8% click-through rate—significantly higher than our other interactive ads. More importantly, my team and I learned the value of formal design exercises and the power of collaboration. We proved that even within the constraints of office politics, it’s possible to deliver innovative, effective solutions.