REI Camping Website

The brief I received had clear parameters for the features of the desktop website I was tasked with designing. That is: create a site where one can plan and book a camping trip. The site had to have a social component and interactive checklists where users can assign items to bring for one another. I feel that this was a great exercise to further develop the design process. There was a lot of freedom to discover and ideate your own vision for this project. My goal was to try and integrate the social component and interactive checklists as seamlessly and easily as possible.

Design Brief

"As a leader in the outdoor clothing and gear market, as well as a champion of environmental stewardship, REI wants to make it easier for people to enjoy the great outdoors."

My Role

This was a solitary project so my role covered the spectrum of the UX design process starting with domain research, competitive analysis, user interviews, sketching, site maps and user flows, wire framing, testing and visual design.

Aspects I considered

  • Allow users to find and book camping destinations
  • Allow users to discover and book (if applicable) other outdoor activities to take part in while camping
  • Provide an interactive trip checklist based on location, time of year, age of campers, types of activities planned, number of campers in group, and any other important criteria that arises during user research
  • Provide a way for multiple campers to plan all aspects of a trip together
  • Allow users to purchase products available already on REI.com directly from this new website

Research

The first thing I did was dive into the research phase. For my initial domain research I looked at the 2014 American Camper Report presented by Coleman Company, Inc.

Next I sent out a screener survey which allowed me to find people to talk to in the market segment. I received 96 initial responses generated by leveraging social media. I also completed an heuristic evaluation and competitive analysis.

PLAN

After the interviews I began planning the information architecture for the website by creating and iterating on several site maps and user flows. I also took the raw data from my interviews and created an affinity map to focus and group themes. The latter also informed the final IA, site map and user flow.

Affinity Diagram

From the affinity map I created the persona hypothesis of Keith Parker. Keith's traits and behaviors mirror important demographics pulled from my domain research.

Persona Hypothesis

design

After the IA process began I started to sketch layout ideas. I started specifically with the global navigation elements as well as setting a hero in place. From there I began to work on wire-frames but quickly transitioned into a hi-fi mock up.

prototype

I used InVision to create my prototype for usability tests. I ran a couple of tests to determine which areas needed iteration.

test

The usability test had limited functionality for the users which led to some frustration on their part. However, there was as lot of good feedback on the interactions of the site. Overall, users thought it was easy to use and every screen state was expected. There were no surprises or confusion. In fact, the test users picked up on several functioning components that still needed further developing (specifically the checklists).

next steps & Future Features

  • Further testing on sidebar
  • Refine the filters/sort feature
  • Iterate on the message feature and test
  • Develop the interaction in regards to activities near campsites
  • Design the meal planning feature (which several interview subjects asked for but was out of scope for the design sprint)