REI Adventures — Mobile App Design Concept

Over the past few years REI has developed and acquired a suite of apps that allow it’s members and customers to shop for gear and connect to the outdoors. However, a key part of REI’s business that doesn’t have a dedicated app is REI Adventures — REI’s adventure travel division.

This is my design concept for a REI Adventures app that is story-focused and encourages exploration of REI’s adventure travel offerings.

The Current Site

REI Adventures uses a mobile-enabled WordPress site. The main page content is divided into cards sorted by region and the individual adventure pages use accordion menus to manage categories of itinerary, gear, etc. However, for a mobile site this creates very ‘deep’ vertical scrolling with lots of screen management.

All of the reviews are stacked beneath each adventure’s content so the page starts out very deep, but as you expose more information through the accordion menus the page can easily double in depth.

More importantly it isn’t a compelling introduction to a life-changing adventure.
REI Adventures — the Redband Trailer.

Challenge

The unique challenge for this app is to create a desire for adventure or fernweh through story-telling that is compelling enough to convince someone to purchase a trip that could cost upwards of $8,000.

My goal with this concept is to foster this desire by creating a layered, story-focused experience that encourages exploration.

Scope

Since this is only a design concept and a dedicated app self-selects for people who are already interested in adventure travel I decided to scope the project around storytelling and removing friction on the front-end and not on conversion at checkout.

Research

I started by interviewing people who are frequent international travelers (one who has traveled with REI Adventures multiple times) and initially focused on the websites they used and their motivations for traveling. I then began asking them about their motivations for traveling. What was interesting was how the person began telling a specific story about one of their trips.

They immediately began relating a *memorable story* about a specific trip followed by further highlights.

I followed this up with some quick visual research. I used travel magazines, travel guidebooks and apps, as well as REI’s own short films for inspiration.

Oh, look! It’s paper!

Key takeaways from my research:

  • Story!
  • Video
  • Pull quotes
  • Maps
  • Dynamic photography (varied angles and lenses)

Exploration

I always start out by writing and sketching. I have found that writing forms a structure for later visual concepts and it provides a sense of direction in the early stages of a project. Some guidelines from my sketchbook:

  • Feelings > Facts
  • Images > Words
  • Mystery vs. Security
What developed was a hierarchy of visual storytelling that I could use to bring someone into the story of a particular adventure trip.
Visual Hierarchy of Adventure Travel Stories

Sketches and Wireframes

Staying with the concept of storytelling I wanted to get some rough draft ideas down first before writing my outline.

It’s called a ‘rough’ draft for a reason.

After I had a design direction I created an outline (wireframes) that laid out the overall structure of the app.

Main Navigation

I wanted to lead with photography or video wherever possible because these are some of the most powerful and succinct storytelling devices. The loading and main screens use large landscape images to set the tone and then rich, hero images are used for each adventure to show the wide-range of possible experiences available.

Adventure Card

The primary exploration method is a side-scrolling card carousel. This allows for the exploration of many different options in a small space with minimal screen management for the user.

Adventure Screen

Tapping an adventure card opens that adventure’s content. Each adventure begins with a video or at the very least a high-quality, inspiring image. Then a brief summary followed by more detail by tapping

Prototype

I try and get a quick prototype into InVision as soon as possible. However, for this project I really wanted to get a feel for the side-scrolling carousel and since InVision doesn’t support that yet, I set aside a couple of hours and learned how to create a prototype in Atomic.io.

A quick demo video:

Next Steps

I am going to continue working on this project and will be posting more content.

Comments and critique are always appreciated. If you want to chat reach out through my website or LinkedIn.