REI Adventures Website

rei_1e_mobile.png
 

 July 2012 – January 2013
Interaction Design, UI Design, Content Strategy, Testing & Analysis

As a design lead at Responsys, I worked with the REI Adventures team to come up with a way to better promote their 140+ guided trips. Our goals were to highlight rich trip content, guide customers to the best trips, and generate more bookings. The project was a big hit. We designed a “catalog” website with galleries of images and video, a trip finding tool, and lead generation form. This website increased year-over-year leads and sales for the Adventures program and gave the team a site that truly represented how special the trips are.


 

| 1 |

Developing the Concept

 

REI had tons of great images and videos that captured the excitement of each trip. The main purpose of the new site was to show them off. I wanted designed a framework that that was clean, simple, and enjoyable to use, inviting customers to explore and experiencing each trips visually.


 

| 2 |

Designing the Framework

 

To make content management easier, we planned to store all the trip content in a data file and pull it into our catalog framework. It was important to identify all possible scenarios and design layouts that handled them gracefully. 

I created detailed wireframes and specs to help guide the teams developing media and copy.  I also built interactive prototypes in Axure, which helped us test and refine the interactions and navigation structure. 


 

| 3 |

Presenting Trip Content

 

The catalog featured over 150 trips on all 7 continents, divided by regional pages. Clicking on a trip allowed visitors to see basic details, explore slideshows and videos, and contact an REI Adventures representative for more details.

When designing the user interface, I balanced the need to show off content with also making the actions (especially contacting sales) really visible and easy.


 

| 4 |

Integrating Google Maps

 

Another big part of the project was developing a map where customers could search for trips. I created wireframes with several different UI options, to help compare and test out different ideas for how the map could work.

Since we were using the Google Maps API, I also used their style generator to customize the colors and elements we'd use for the map itself. During this period, I worked closely with our developers as they began building prototypes for the map and filters.


 

| 5 |

Designing the Trip Finder

 

After the research and prototyping phase, I designed the user interface and interactions for the map. The goal was to show the breadth of trips REI had to offer and give customers a fun and easy way to find the trips that fit their needs.

Customers could filter by region, activity, price, duration, and skill level. After refreshing the map to see corresponding trips, they could use the map pins to see trip information and options.


 

| 6 |

Creating the Mobile Site

 

As a brand with high mobile traffic, REI is also committed to providing customers with a great mobile landing experience. I designed a mobile website that could use the same data file with trip content and images, but present it in way that was easy to interact with on a smaller screen.