BP_app_TitleImage

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 items split by individual. This helps not only beginner backpackers, but also seasoned veterans who have done this 

Overview

Mobie app, Personal Project

Duration: 6 Weeks

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

Why Make This App?

Backpacker Vs. Lighterpack

Comp_Analysis

The closest competitor to the Backpacker App that I found was the Lighterpack website. It 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 I might want to add to the Backpacker app, since many of the hikers and backpackers I surveyed commented that this feature is important to them.

Backpacker Vs. List Sharing Apps

Comp_Analysis2

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.  I will need to offer features that are not available with these solutions to differentiate my app enough to warrant a change of process.

Who Uses It?

Demographic & User Research

I performed a combination of user research and remote interviews with outdoors enthusiasts. With this information, I was able to get an idea of what backpackers value and look for in a product, as well as some of the pain points during the trip planning process. What I found was that both first-timers and experts can benefit from this product; Morgan, 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 the Backpacker App help plan trips?

The storyboard below details some of the pain points my persona might encounter while planning a trip with his friends. Two of the biggest issues 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

Low Fi Wireframes

Visualizing the Concept

The next step was to visualize how this solution would work. 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
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.

AddFriends

Add Friends
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.

FriendsAdded

Friends Added
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.

List

List
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.

List_checked

List Scroll
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.

Shared

List Shared
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.

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.

More to Come

In the next two weeks, I will perform usability tests with both experienced and beginner backpackers to assess how intuitive the solution is, and what features might need to be improved or added. This will be followed by another round of revisions and a clickable prototype.

Selected Works

BackpackerUX Design

Harvard BCMP ShirtGraphic Design

Haddon CulinaryGraphic Design

Bliss ProvisionsGraphic Design

Ion Home KitGraphic Design

Transparent PathProject type

GeekWireProject type

LetsWorkTogether2-copy

jkulhawik@gmail.com