App Design

Group Trip Planning Web Application

Project Overview

I was tasked with creating website that will help people plan and manage their camping trips. The website should be true to REI’s brand in look, feel, and tone but exist separately from REI.com.

Challenges

Applied Methodologies

Tools

Discovery & Research

Competitive Analysis

Competitor highlights included:

User Research

I interviewed a few campers who camp in groups to better understand their pain points. This led me to a theory that planning camping trips with groups could be simplified through an organized list of equipment.

I then used card sorting to gain insight into how people might organize various items into categories. This would come in handy later when designing the product catalog and checklist.

User Stories & Journeys

I wanted to cover the journey beginning with choosing a location to visit and ending with the assurance that they would be prepared for that trip in regards to equipment and knowledge.

A person would be able to select a location, consider available activities and amenities at or around that location, and be prepared to enjoy themselves without the worry of forgetting a necessary piece of equipment.

Design Inspiration

I used Hipcamp as a model for destination search and discovery and incorporated best practices from Amazon for the product page and buy flow.

My main focus was to design a solution that would enable a group of individuals to plan camping trips. The trip organizer would create a trip by selecting a desired location. They would then be prompted to add nearby activities and items they plan to bring.

Additional individuals could then be added to the group and a checklist of necessary items would be populated based on various factors such as climate, activities, and the number of group members. Using the checklists, individuals in the group could then check off items in the list that they plan to bring.

This list will provide information on recommended equipment and supplies and an avenue to acquire items that are unaccounted for.

Rough Sketches

I sketched out the trip planning start screen and a layout for the shopping cart.

Entry Screen
Shopping Cart

User Flow

I considered the following flow when designing the prototype:

  1. You are Jim. You have an REI account and are signed in. You want to plan a trip to the South Rim of the Grand Canyon. You intend to stay in a tent from 11/30 through 12/4/2015.
  2. You want to stay in the cheapest option available during the dates provided. You are looking for a location that offers showers and restrooms.
  3. Your friends Sally and Billy have expressed an interest in joining you on your trip to the Grand Canyon. You would like to add them to your group checklist.
  4. You decide to purchase a backpack before your trip. You really like the color red. Purchase a red backpack.

Wireframes

During the wire framing process, I started with a design and then iterated based on feedback I received from testing along the way. The first iteration for each screen appears on the top and the last appears on the bottom in each of the images below.

Home Screens
Location Selection Screens
Checklist Screens
Product Catalog Screens
Cart Screens
Checkout Screens

Usability Testing & Results

Usability testing resulted in the addition of more iconography than text resembling hyperlinks. I changed the call to action during checkout from "Continue" to "Purchase" so that it better described a more final destination/result. Group member addition needed to be more visibly separate and clear. Created a container around the Checklist section with obvious sections included. Changed Jim in checklist to your list to reflect Jim logged in as a user. Added ability to navigate to other products in the product page. Made changes to group section icons added add to cart feedback and various other improvements to the product catalog.

Prototype and Documentation

For clickable prototype Click Here

For spec doc Click Here

^

All Recent Work

Functionality & Intuitiveness Assessment for create.io
Landing Page Advertising Mobile News Application
Mobile Application for the National Air and Space Museum
Group Trip Planning Web Application