REI Adventures Mobile App

A design concept for REI Adventures Mobile App

BACKGROUND

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 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 development team has made the most of the platform and divided the main page content into cards sorted by region and accordion menus on the individual adventure pages 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 Red Band Trailer

Challenge

The unique challenge for this app is to create a desire for adventure or fernweh through a mobile device that is compelling enough to convince someone interested in adventure travel to purchase a trip that could cost upwards of $8,000.

I believe that the best way to achieve this is by leveraging a story-focused experience with a flatter navigation that inspires and encourages exploration.

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.

However, what I found most compelling is that as soon as I started asking where they have traveled they almost immediately began relating a *memorable story* about a specific trip.

Since 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 rather than conversion.

For visual research I used travel magazines, travel guidebooks and apps, as well as REI’s own short films for inspiration.

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

My writing and sketching convinced me that a compelling feeling of adventure could be created through a visual hierarchy that mirrors a traveler’s real-life journey.

Sketches and Wireframes

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

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

Wireframes Photos

Main Navigation

I wanted to lead with photography or video wherever possible because these are the most powerful and succinct storytelling devices for mobile. 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.

Atomic.io Prototype Link

A quick demo video of the first prototype:

Next Steps

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