Force of Nature

REI marketing campaign

User Experience

This talk was originally presented as Disorder to Clarity: Storytelling + Marketing Campaigns at World IA Day Seattle in March 2017. The campaign was launched in April 2017.

Desktop and mobile viewport of the campaign page

At REI, we’ve been recently known for dynamic marketing campaigns such as Every Trail Connects and Opt Outside. My team was tasked to build the digital representation of Force of Nature, a women-focused outdoor marketing campaign. As the user experience lead on this project, I relied on my prior experience of investigative skills, customer empathy, and understanding of how humans behave cognitively when immersed in a meaningful experience with a brand. One of my goals with this new campaign was to change the way we work with marketing in order to improve the process of quickly spinning up digital experiences for future efforts. To begin, we focused on 5 interesting facets of this campaign:

  • The Why
  • The Elements
  • Time
  • Hierarchy
  • Sustainability

The why

Our digital team needed to understand the purpose of this campaign. Why are we doing this campaign? And why should people care? We wanted to understand marketing’s perspective of this campaign from holistic level. Under the guise of a level setting meeting, we ran a group stakeholder interview with the marketing team that dreamed up  the idea. We asked them:

  • What are the goals for doing this work?
  • What do you want people to do after they’ve experienced this?
  • How will you know this campaign is successful?
  • Where do you imagine this digital experience in the site structure?
  • How do you envision this living on in the future?

We came away with 2 tenets for our target audience. This campaign was more of a movement, with engagement as the measure of success:

  1. Make the outdoors possible
  2. Make the outdoors an interesting option

The elements

Our team was trying to make sense of disparate pieces of marketing drivers with this campaign that spanned multiple channels - web, paper catalog, ongoing local events, video, social media, a giveaway, promoted products, and more. We started to define the relationships between all these drivers, both digital and analog, and how someone might reach our online experience.

Incremental delivery

We were originally given two milestone launch dates, a soft launch and a hard launch, but quickly realized that we needed to sequence content on a micro level. We decided to create more milestone dates in order to balance all of the needs that marketing had expressed. If one can imagine one webpage with all of these elements, it was going to be really difficult for users to divide their attention between all the actions and sections of the page to accomplish their tasks. We wanted to explore what was possible with changing states of our landing page over time and started mapping out all of these elements, as content pieces, along a timeline.


Whiteboard and post-it mapping of marketing drivers
Marketing drivers.

Diagram of the launch dates expanded to phases
From 2 launch dates to 5 phases.

Whiteboard visual timeline of the campaign
VIsualizing a timeline.

Diagram timeline of the campaign page changes
User flow: drivers connected and overlaid onto timeline with 5 phases


Next, we tackled the information hierarchy to organize the content in a clear manner. This content included blog posts, a busy schedule of events, featured stories, product teasers, a video, and more. Between our 5 phases in our timeline, we strategized around featuring different and important pieces of content at the top of the landing page. This was important to help minimize any scroll dropoff, esp. as we accounted for responsive breakpoints.

Content structure hierarchy of the page over the campaign timeline
Content structure hierarchy over the campaign timeline


Our team was also challenged by our leadership team to consider ways to reduce technical and digital waste, to ensure that we weren’t creating a digital property that would go away with this campaign once it was over. We decided to re-purpose the URL, to transform the webpage once the campaign ended. The webpage would become a resource for our targeted audience that featured ongoing REI-organized events focused on women, featured stories, links to continuous blog content, an explanation of what this movement is, and other resources. The page is slowly shifted over time and transforms its content specifically tailored for our audience. Our marketing partners were thrilled that we had thought this far ahead and that the core of the campaign would live on in an everlasting format. It wouldn’t go away once the campaign was over.

From there, we then finally started to wireframe very basic content blocks in. After that point, we continued to gain alignment with leadership, evolve the wireframes, progress into higher fidelity mockups, work out specific content details, and collaborate with development through launch.


Medium fidelity wireframe of the campaign page's mobile breakpoint
Wireframe - mobile

Medium fidelity wireframe of the campaign page's desktop breakpoint
Wireframe - desktop

Design of the campaign page's mobile breakpoint
Design - mobile

Design of the campaign page's desktop breakpoint
Design - desktop


Taking a look at these 5 facets in detail resulted in more alignment upfront rather than later in the design process. Our team took marketing along on the journey, so there were no surprises and the digital design process wasn’t a mystery. We were also able to influence marketing partners to come up with answers to questions that they hadn’t considered before about their own ideas. The hope was that this case study could be turned into a repeatable process, allowing us the flexibility to implement digital campaigns quickly, while also balancing our technical abilities with our design sensibilities.


The One Club ‘Gold Pencil’, PR Brand Voice

Cannes Glass Lion for Change, Bronze.