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.
Mobie app, Personal Project
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Once an item is packed and accounted for, it can be checked off and shared with others that it has been packed.
A confirmation screen will let the user know that their list has been shared.
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.
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.
Set Up Trip - Select Climate
The climate will determine whether certain items on the list will be included or not.
Set Up Trip Complete
After this page is set, a list will populate with suggested items for the specified duration and expected weather.
Those using the app will be able to check off which items they have packed, and what remains to be done.
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.
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.
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.
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.
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.
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.
In order to share the list and maintain a level of security, users can copy the list and password with the group members.
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 - 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,
From here, the user will see what they have on their list and have the ability to check off items they have packed.
Other Members' Checklists
Users will have the ability to see what the other members of their group have packed, and what is still needed.
The user flow below shows how it can help people like Sharon prepare for their backpacking trips.
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.
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,
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.
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.
Harvard BCMP ShirtGraphic Design
Haddon CulinaryGraphic Design
Bliss ProvisionsGraphic Design
Ion Home KitGraphic Design
Transparent PathProject type