BP_app_TitleImage2

Taking the Stress Out of Getting Away

The Backpacker App allows people to organize and share the list of gear they plan on bringing on camping and backpacking trips. It includes a primary list of what to bring, an overview of all the items, the ability to share the list, and split the items among individuals. This helps not only beginner backpackers, but also seasoned veterans who have done this many times before. 

Overview

Mobie app, Personal Project

Team:
Me - Information Architecture, Visual Design 
Harrison McNeil - User Research and Testing 
Brent Moffit - App Development

Duration: 6 Weeks

Tools: Figma, OptimalSort, Photoshop, Zeplin, After Effects, Procreate for iPad

Why Make This App?

The main goals of this product are to improve safety, confidence, and communication among backpackers. With an increased interest in outdoor activities, there is also an increase in emergency calls and rescues. Many people are also hesitant to plan a trip of their own because they don't know where to start or what to pack. The Backpacker app will help people get outdoors with the confidence that they will have all the tools they need to spend an afternoon, a day, or many nights away from society. 

Competitors

At it's root, this app is a list sharing product. Through interviews with experienced hikers and backpackers, I found that they often use Google Sheets or apps like Wunderlist to organize and share what they plan on packing. 

Another close competitor to Backpacker is the Lighterpack website. The difference is that Lighterpack focuses on the weight of their users' packs rather than communicating items to bring. 

Backpacker Vs. Lighterpack

Comp_Analysis

The Lighterpack website doesn't currently have a mobile version, and it's unclear if users are able to share lists with friends on the website.

However, Lighterpack does focus on the weight of items, and adds them up automatically. This may be something to consider in a future version of the Backpacker app, since many of the hikers and backpackers I surveyed commented that this feature would be valuable to them.

Backpacker Vs. List Sharing Apps

Comp_Analysis2

To offer more than the standard list sharing sites, I will need to offer features that are not available with these solutions. The difference will be making a product that is focused on outdoor sports and offers item suggestions.

Who Uses It?

Demographic & User Research

With a combination of user research and remote interviews with outdoors enthusiasts, I found that both first-timers and experts can benefit from using the Backpacker App. The personas below show Morgan, who is an experienced backpacker, and Sharon, who is going for the first time. I will keep these personas in mind while planning the app.

Persona_v2
Persona3

How Will It Help Plan Trips?

Two of the biggest issues while preparing for a backpacking trip include communicating the delegation of items, and making sure the less experienced trip members know what to pack or if they might need to purchase any gear. 

Storyboard-01

Visualizing the Concept

My initial impression was that it would be very simple. After all, it's essentially just a list. The more I built out, however, the more complicated it proved to be. I had to figure out how these lists would be curated, how to add friends to the trip while keeping it secure, and how to edit, add, and complete the list in the easiest way possible. 

SetUp

Trip Details
To create a trip, users can set the date, location, and number of nights they will spend on the trip. This data allows the app to make suggestions.

AddFriends

Add Friends
Our users can use the app for solo trips, but adding friends is an important feature. They can easily add others to the trip here.

FriendsAdded

Friends Added
The added friends can be seen here. They can add an unlimited number of people to the trip, but we expect usually between 2 and 8 people.

List

List
The app will suggest a list of items to bring on the trip. From here, users will be able to edit the list to their liking.

List_checked

List Checked
Once an item is packed and accounted for, it can be checked off and shared with others that it has been packed. 

Shared

List Shared
A confirmation screen will let the user know that their list has been shared.

What can be improved?

  • The Share List function can be improved by instantly updating rather than tapping a button. That way it removes human error of forgetting to share the list.
  • The tab bar will need to be optimized for mobile by increasing the button area.
  • State climates can vary greatly, it should instead let the user select the climate they plan on traveling to.
  • The Add Friend function will have to be thought out more. How do they add friends? How will access be limited to just the friends on the list?

Version 1: Setting Up A Checklist

Initial Wireframes

The first version of the app was kept very minimal. This allowed me to test and discuss the solution with users and make changes before I went too far down this path. This version focused on being able to set up a list for just one person. I included the Add Friends function on the next version.

Trip Setup

BP_app_SetupDate

Set Up Trip - Select Date
The date of the trip will allow users to see reminders through push notifications as well as prepare for the typical weather during that time.

BP_app_Setup_Climate

Set Up Trip - Select Climate
The climate will determine whether certain items on the list will be included or not.

BP_app_Setup

Set Up Trip Complete
After this page is set, a list will populate with suggested items for the specified duration and expected weather.

Checklist

BP_app_List-1

Checklist
Those using the app will be able to check off which items they have packed, and what remains to be done.

BP_app_List_Edit

Edit Checklist
Of course, not everyone has the exact same preferences. I needed to add a way to be able to edit, add, or delete items from the list.

BP_app_List_Edit_Add

Edit Checklist - Add Item
The above screen shows what it might look like when someone adds an item to the list. I tried to keep it as simple as possible while avoiding popups or different screens.

Takeaways

Though it's good to get a digital version started, it is far from perfect. The people testing this version found the list a little overwhelming as the items ran together. They also mentioned wanting to be able to add an item easier. I addressed these comments with edits on the next iteration.

A Little Extra

I took the check box I created and imported it into After Effects. From there I created an animation and exported it using the Bodymovin plugin to create a scalable lightweight vector animation to be used in the app.

Checkbox-1

Version 2: Adding Friends

The second version includes the ability to add friends to the checklist. This adds another level of complexity to the process, and a wide range of challenges to plan for, which are listed below.

Challenges

  • How can users easily add friends to the list while keeping it private?
  • How will they be able to delegate items on the list to certain people?
  • How can they see who has checked off which items and what is still needed?

Add Friends

Trips_Page

Add Friends
Friends have the option of joining a list or creating a new trip. If a trip has already been created, it can be accessed here.

Share_Link

Share List
In order to share the list and maintain a level of security, users can copy the list and password with the group members.

JoinList_Password

Join a List
In order to join a list, users will need both the list address and the password. Once they join, their name will be added to the trip list.

Checklist

List-Page_Shared_P

Checklist - Shared
In addition to seeing each user's list, I added the ability to see the shared items. Selecting one will add it to their individual list. This will make it easier for trip members to claim items to bring,

List-Page_J_P

Your Checklist
From here, the user will see what they have on their list and have the ability to check off items they have packed.

List-Page_M_P

Other Members' Checklists
Users will have the ability to see what the other members of their group have packed, and what is still needed.

How will it be used?

The user flow below shows how it can help people like Sharon prepare for their backpacking trips.

User-Flow-Beginner

Organizing the Items

During usability tests, people commented that they had a hard time finding items on their lists. I used Optimalsort to get feedback on which categories the items should fall into. The results can be seen in the matrix below.

Screen-Shot-2020-11-08-at-10.10.49-PM

Categories

The data from the card sort showed that the majority of the items fall into the following six categories: Overnight Gear, Clothes, Emergency Supplies, Navigation, Camp Kitchen, and Hygeine Supplies. I added icons to the categories for quicker visual identification,

Categories1
Categories2

Defining the Style

The Backpacker App should give off the feeling of friendliness and organization. The aim of the style guide is to reflect the simplicity and lightheartedness that our users expect from the app. Links to the Figma files for the style guide and the component library are listed below.

More to Come

I am currently working with Harrison for user research, and Brent for development to move to the next stage of the process. We are working to get a usable prototype for Android and iOS to test in real-world situations and eventually post to the Google Play and Apple App Stores. 

After the prototype is suitable for our use case, I am planning on expanding into other activities like car camping, backcountry skiing and snowboarding, and long-distance cycling.

Selected Works

MalakyeUI Design

BackpackerUX Design

Harvard BCMP ShirtGraphic Design

Haddon CulinaryGraphic Design

Bliss ProvisionsGraphic Design

LeadfeatherGraphic Design

Ion Home KitGraphic Design

Transparent PathProject type

LetsWorkTogether2-copy

jkulhawik@gmail.com