Bivy: designing a mobile app for free campsites

iOS app to help frequent campers find and save sites on the go

I thought of Bivy after a road trip out west, where I struggled to find free places to camp. I’m an aspiring designer and started this as a personal project to continue growing my design skills. This is my second design project and the first that included a variety of different features and user flows. I spent four months working through this project in my free time and received weekly guidance from a senior designer at my company.

The problem

It’s hard to find free campsites, especially when you’re already on the road.

There’s an incredible amount of shared knowledge among people who love to be outside, especially about great places to pitch a tent. Avid campers look for unique sites that are off the beaten path. Those who’ve been camping for years have a wealth of knowledge and advice, which they’re usually glad to share with other hikers, bikers, climbers, and campers. As long as you love spending time outside, you’re in the club and privy to this campsite lore.

However, there are very few places where all of this shared information collects online. There are obscure forums and Bureau of Land Management maps, often posted on hard-to-find websites with poor user interfaces. This makes it difficult to find desirable places to pitch a tent, especially if you’re out on the road and looking through these web pages on a mobile device. If you don’t know who to ask or the location is too remote to ask a local, those websites are your only option.

They’re hard to navigate, especially because they are not optimized for mobile. In order to save a site, the browser tab needs to be kept open and if you have poor reception it might not load back up. There is also no connection to a map application from these websites.

Personal experience

I’ve spent a lot of time driving around the country and living out of a tent. In 2016, I spent a month camping and hiking out west. It was my first extended trip and I experienced first-hand the difficulty of finding free campsites — in remote locations or populated ones. Longer camping trips require free sites unless you’re willing to pay $10 to $30 a night for 30+ nights to pitch your tent. Paid sites are often crowded as well and you aren’t guaranteed to get a spot.

I had enough difficulty looking for any place to stay, nevertheless a special one. The American West is littered with beautiful and remote sites, but there are so few places to find that information (and directions) that people traveling without a longtime expert or a local are often on their own.

Research

After my initial hypothesis that there was a need for this kind of mobile app, I did some research to justify it. I also worked to better understand the users that this app would serve and the problems they face.

Current solutions

I determined four existing solutions for finding free campsites on long trips.

1. USFS & BLMCG application

I found this application while searching for resources to use on my trips. It’s free to download and is populated with US Forest Service and Bureau of Land Management data compiled by a software company.

Things that are nice about this app:

• Favoriting option to save sites
• Offers the option to link to the external map application of your choice for directions
• Provides filtering options (type of site, organization that owns it, elevation)
• Includes information about elevation and GPS coordinates to sites
• Each site page shows current weather
• Map view and a searchable list view
• Ability to import a GPX file
• Links to Google search results, Facebook, Yelp, Google images
• An easy click to locate yourself on the map

Things that are not nice about this app:

• Most pages are slow to load, especially the map and externally linked pages
• Navigation bar changes between pages and is disorienting and difficult to use
• Iconography is very difficult to interpret
• Free sites are mixed in with paid KOA campgrounds
• Site pages offer very little information about the site itself unless linked to a recreation.gov page that is small and hard to read on mobile
• In-app images are provided through Flickr and the majority of sites do not have images at all
• In order to view most site information, you have to exit the app entirely via links to social and Google results that are browser web pages
• Site information is hidden inside of site pages, making it difficult to make informed decisions from the map or list views
• Difficult to compare sites and move quickly between options

2. Searching online forums

I spent a lot of time before my trip searching for “dispersed camping” on Google. I found a website called freecampsites.net that hosts reviews and ratings of free sites. The interface is out of date and full of advertisements. I took screenshots of these webpages and texted them to my phone so that I could reference them while on the road. I did the same with the National Forest Service website, which includes the sites plotted on topographical maps that lack road names or directions.

3. Google Maps

National forests and BLM land can be camped in for free. Many new campers don’t know this. In the way of camping lore, I learned this from my mom, who in turn learned it from hiking friends who live in Utah. I pulled up national forests (which are outlined in green) on the Google Maps app and drove through them, looking for secluded places to park on the side of the road and hike into the woods to camp.

4. Asking locals

When I was on my first extended trip, I asked locals in bike shops and outfitters stores for advice on great places to stay. I was given directions to remote sites outside of those small cities, secret back routes into national parks, and places to shower cheaply. The outdoor community is a warm and inviting one, full of people with years of knowledge about great campsites. It’s exactly this information that Bivy collects so that campers all over the country can access that shared knowledge.

Understanding the user

I created a user persona and looked for inspiring companies to help me better understand the Bivy user before beginning the design work.

1. Persona

I created a persona for an individual who would be likely to use Bivy during extended camping trips. It is a fictional archetype of the Bivy user. The character was based on a combination of real people who enjoy hiking and camping, and who are often searching for a free campsite to stay at while they are on these trips. The quotes are also fictional, though they are based on information gathered from individuals sitting for user tests.

Actually my brother, not August Davidson

August Davidson
Material strategies engineer, 3M
Age: 28
Minneapolis, MN

Vocation
Works in plants and engineering offices all week; job is to make sure plants are as efficient as possible, specifically with the materials they order, how they ship and store them, and how the plant workers are operating

“It’s stressful, so I take a few big camping trips a year with friends to get away. We base our trip around the hikes and rides we want to do and we just try to find places to camp once we’re out there.”

Experience Level
Three to four week-long camping trips a year, for the last 6 years; one two-month long trip; experienced mountain biker, amateur rock climber, very experienced with camping and hiking

“Last year we drove out to Utah and went mountain biking at Slickrock. We had a really hard time finding a place to camp outside of Moab and we actually slept in a hotel parking lot for a couple nights.”

Interaction with product
Not a lot of tech on the trips, because of the difficulty in charging and using digital devices; infrequent use of phones only

“My buddy has a digital camera and he’ll bring a laptop to upload his pictures, but everybody else just uses their phones. We check the weather, get directions, and use the map a lot to find national forests or other places we know that we can camp for free. It’s hard to search the web on a phone, but sometimes we’ll try googling places near us to see if we can find any threads or posts about cool dispersed sites.”

Goals and concerns
Directions (and distance) for prioritization; images of sites; easy to use on a mobile device; quick results/jumping around between options

“By the time we’re looking for a site, everyone is tired and hungry. The longer it takes to find a place, the shorter everyone’s patience gets. We need to find a place that’s close by, that’s free, and ideally a place that’s cool and not full of people.”

2. Inspiring companies

I looked for companies that have the tone and branding that I wanted to emulate with Bivy. I also thought about companies that have missions I would want the company behind Bivy to share in, like conservation and sustainability.

Moosejaw is an outfitting company based out of Madison Heights, Michigan. Their brand tone is casual, quirky, and goofy. They print stickers that say things like “does it count as a juice cleanse if it’s fermented?” and there is a section of their online site titled “my mom likes these.” I wanted Bivy to have a more casual tone, so that users would feel comfortable using the app and sharing their favorite sites (often sacred, secret intel) with others. Ultimately, there is very little copy in Bivy and the tone ended up far more subdued than Moosejaw’s.

Patagonia is an outdoor outfitter that’s become more than just a shop. The company is a pillar of the outdoor community, founded in the 70s by a “dirtbag climber” who wanted to produce better climbing gear for his friends in Yosemite Valley. Their personal mission spans far beyond the things they sell. Patagonia donates millions of dollars to conservation efforts, sources many of its key materials sustainably, and despite its popularity, remains a private company that takes excellent care of its employees.

Looking back, Patagonia would be a better inspiration if Bivy were to become a much larger platform — and an actual company. This is the kind of ethos and model I’d like a company to have if it were building Bivy, an app that aims to open public spaces to the people who love them. A conservation focus would be ideal.

Research lessons

I wish that I had created more personas and conducted interviews with potential users before starting to sketch this project. I started Bivy because it was something that I wanted to use and came back to the research mid-way through the building process to help inform and justify the wireframes I was building. It would have been easier to stay focused on the main goal while building an MVP if there had been a solid persona to reference for questions like “should the user build a profile” and “is distance or rating more important when choosing a site.” Without this, I occasionally fell into the trap of building something I thought I would want, rather than building something that I knew the user wanted.

I would have liked to conduct user interviews with individuals who had no context about Bivy. I’d specifically have liked to talk to individuals ages 21–45 who work 9–5 jobs and spend their weekends and vacations hiking, biking, and climbing. It would have been helpful to talk to people who prefer backcountry camping. It would have been ideal to talk to both amateur and experienced outdoors-people who see camping as one small aspect of trips centered around being outside.

People who would not be good to talk to for user interviews: folks who like paid campsites with brick & mortar bathrooms and picnic tables, who see camping as an activity in and of itself, who are not familiar with LNT, who seek out campsites with RV hookups and reservations.

Build and iterate

This is my favorite part of the process! The product flows and low fidelity wireframing are where I can work to make sure that my design is solving for the problems that I’ve identified during the research phase.

User journey and goals

The main user journey that I referred to is outlined in the image above. I focused on the five main goals of the app and laid out which pages should include which functions.

I settled on six goals:

1. Finding a site
2. Learning about a site
3. Getting to a site
4. Saving a site
5. Adding site reviews
6. See personal site reviews in profile

All of the key functions are accessible from at least two places in the app. This diagram also shows how each of these hero screens can be accessed from other screens.

I like to do this early framing work on whiteboards because it gives me the ability to iterate quickly and visualize the flow of the app easily. I find that I’m able to see the complete picture better if I have the space to draw out workflows next to functions.

Wireframing

When I was prototyping, I focused on creating an MVP with unique site listings, full copy, and complete iconography. Some of my key learns during this process were to “think in problem space, not solution space” and to “push past solutions.” I wrote down questions like “What’s your biggest problem right now?” and “How are you dealing with it?” to look back to during the building process.

I found that drawing out wireframes on paper was often the best way to begin so that I could move quickly through complete iterations without getting distracted in Sketch and wasting time on alignment or pixels.

I wish that I had started the project with entirely black and white wireframing because I wasted time working on things like spacing and color instead of focusing on the actual problem at hand. Working in lo-fi wireframes allows me to work quickly through potential flows and iterate on them, always driven by the problem itself.

Mid-way through the prototyping process, I wrote a list of action items for next steps: what can still be cut, what is this really for (is it about sites, the BLM land, or the reviews), and a ranked list of must-have/nice-to-have features. That list informed the next set of wireframes and helped me decide what to prioritize and what to cut to ship the first version of this app.

Prioritize features based on the user journey

I wrote out all of the features I was considering adding and prioritized them based on the user journey. This helped me determine what was necessary for the first iteration of Bivy’s design.

The major takeaway here was that shipping a complete version of the app doesn’t mean that it’s finished. I got hung up on wanting the project to be perfect, which meant that it was never going to ship. In order to get out of project purgatory, I built all of the “must have” features in this list and considered that a shippable V1. This list is something to come back to during future iterations on this project.

Early prototyping

The layout of the map view remained fairly consistent throughout the process, but the navigation bar changed often. There was also a search state with three separate lists inside of it (nearby sites, popular sites near you, popular sites on Bivy) with unclear access, additional nested lists inside of a list inside of the map, and difficult navigation between all of these pages.

This entire onboarding flow that was cut after initial usability tests revealed that finding a good campsite does not require a profile and the long creation process is a barrier to entry. The goal of the app is to find a campsite and this flow prolonged that without a clear reason for why.

An early iteration of the profile contained saved sites and “shared sites” separated in unique tabs on the same profile page. This was a cluttered view and nested the more critical “saved sites” within a second critical page (the profile). The terminology was also unclear. This early profile is shown below on the left.

An early version of the “add a review” page, which is an important piece of the app, was cluttered with overly large components and rambling copy. This was eventually cleaned up to focus on the tasks at hand — adding images, adding text, ranking the site, and posting the review. This early review page is shown below on the right.

The majority of work that happened during this early prototyping was focused on navigability, functionality, and editing out unnecessary components to streamline the entire app. All changes were centered around the six key goals determined during the user journey and early wireframing process.

Validate

After the low fidelity wireframes were finished and I had a complete MVP, I fine-tuned the design through feedback, design reviews, and usability testing.

Multiple rounds of feedback in Invision

Bivy went through six rounds of feedback in Invision. Feedback on low fidelity wireframes focused on things like navigation, organization of pages, and whether or not certain CTAs and workflows really addressed the main problem of finding and choosing a good campsite.

Later rounds of feedback focused on things like button placement and labels, spacing, color, saturation, text sizing, and the functionality underlying each icon. Entire sections of Bivy were cut after some usability testing and additional sections were cut in design reviews.

I worked on this project with continued guidance from a senior designer at my company. We met weekly for design reviews and he helped walk me through the entire design process, providing feedback, advice, and suggestions along the way. He also provided several rounds of specific design feedback in Invision.

During this process, I learned that pink dots are your friends. The feedback that I received during this building process helped me see where to cut, tighten, and sharpen my work. I found that the prototypes improved after every round of feedback and it’s one of the most important aspects of my design process. In future projects, I’d like to continue to actively gather feedback on at least three iterations of the work before shipping.

Design reviews

Design reviews were another productive, valued part of this process. They presented opportunities to think out loud about certain workflows, in many cases illuminating that they could be cut. There were very few reviews where I added additional artboards, often opting to cut features and simplify the entire app. The design cliché “kill your darlings” was revisited often during reviews.

Design reviews also helped me move past blocks and places where I was getting hung up. This happened when I had the chance to talk through some of the more involved feedback I received and create a list of action items for where to go next. It took me a couple of months to realize that I can get attached to early workflows and ideas, and these reviews provide the key opportunity to step back from my work and look at it through a critical lens. I had some of my biggest breakthroughs with Bivy during design reviews. These was another part of the process that I came to enjoy more as time went on and they’re another thing I’ll continue to do in future projects.

Usability testing

I conducted and recorded five usability tests to gather feedback on different iterations of the complete MVP and made iterations after every test.

1. Luke R. — data engineer

This was the first usability test I ever conducted and it felt like a flop at first. The very first page, a splash screen, had no click indicators and did not auto-advance to the next page. “Is this it, has it started?” Luke got stuck in very basic flows because pages lacked navigability. He spent the first five minutes reluctantly filling out onboarding pages and creating an account while asking how he could “just get to the map.” A lot of unlabeled icons made it difficult to test the full range of functionality.

This test ended up having a huge impact on the project. I cut an entire onboarding flow, deleting 20+ artboards all at once. This was the single biggest change that came out of usability testing and made it easier for people to begin finding sites the moment they download the app, which is the ultimate goal of this tool. I also added navigation to the majority of the pages, including options to close out of adding reviews and move back to the map view from the list.

2. Chris C. — full stack developer

This test prompted quite a few changes to the map view, which made sense after the first test’s iterations to drop users into the map right away. The ratings in the map view and the focus on ratings and an image, rather than distance, came from this test. The largest issue Chris had was locating himself on the map, which was remedied by a location icon. This test went much more quickly than the first one (about 50% faster) and there were no pages that Chris got stuck on.

He didn’t create a profile at all, which Luke had not wanted to do in the first test either, so the concept of a profile (with skill level, etc.) was cut. This was the second big cut to come out of as many usability tests.

3. Sam L. — product designer

This test illuminated some issues with the organization of the list views and site pages. First, separate site lists for “top sites” and “nearby sites” were removed. This test revealed that overall top sites on the app were not as relevant for users who are actively looking for sites near them, so the list view was consolidated into one list of nearby sites with rankings and a sorting menu. Again, a major cut to the app as the result of a usability test.

There were also a handful of visual indicators that were added as a result of this test, including a toast message for successful review posts and pills on smaller modals to signal that they can be dragged up and down.

4. Emma T. — college student

Emma didn’t use the list view at all during her test. She did all of her navigating and searching directly inside of the map view. I wrote a note during the test that “list might be obsolete — too much scrolling.” This is one of the few times that I chose to keep something in the app that wasn’t touched during a usability test. I kept the list because it was leveraged by every other test subject.

However, all of her work happened from the map and she wanted an easy way to save sites while searching around. The option to save a site inside of the site modal on the map is a result of this test.

5. Kyle T. — frequent hiker/camper

Kyle completed all of the major workflows unprompted: viewing a site page, saving a site, reviewing images, and getting directions. This is the use case I imagine most first time users will follow and confirmed that a profile with saved sites was worthwhile.

At one point he did say “I wish there was a back to base,” so the navigation bar now appears on every key page in the app. He also wanted a list view with clearer details about distance (in miles) and an overall rating out of five stars. This was feedback I received in multiple tests and it sharpened both the list view and each site’s listing.

High fidelity design

This was the final aspect of the design work. I started by looking for inspiration from camping and hiking itself, as well as companies that operate in the marketplace that I see Bivy in.

Inspiration

I started the high-fidelity process by creating a mood board for inspiration. At the time, outdoor clothing companies like Patagonia were coming out with patterns and colors reminiscent of the ’80s and early ’90s. Gear is also brightly colored; orange, bright green, blue, and magenta are common colors for things like coats, climbing ropes, and tents.

Style guide

I created a style guide before I started on the high-fidelity design so that everything would be cohesive. It also saved a lot of time with the work itself because things like fonts, colors, icons, and spacing were already decided.

Name

I named the application Bivy, which is a shortened version of the word “bivouac.” A bivouac is a temporary campsite. I felt that this represented the purpose of the application well and would help users quickly identify that this app is designed to help them find a place to pitch their tents.

Fonts

The body fonts in Bivy are all SF Pro, which is the convention for iOS applications. I chose to follow this convention in order to be sure that the font was easy to read on a mobile device.

The branded font is Eagle and I chose it because it’s a sharp font with points that are reminiscent of tent angles. The font is thick and strong, which is common among outdoor brands.

Colors

I wanted the app to have a simple, clear interface that is laser-focused on solving the problems at hand, so the main place I utilized branding was in the color scheme. I chose to express the brand through complementary, bright colors to stay in line with outdoor gear trends and help users feel that Bivy makes sense to include as another critical tool to have while camping.

Icons

There are only a handful of icons in Bivy and it was important that each icon clearly depict its purpose. The heart icon for favoriting sites and the person icon for the profile were easy choices, as were the stars for ratings, the arrow for directions, and the plus sign for adding new entries. I used pins and navigational icons on the map view in line with the iOS conventions for map applications.

The navigational icon for the map view went through a few different iterations. While clicking the icon takes a user back to the map, the icon represents the site, map, and list views. I tried a few different map icons before settling on a mountain, which I feel represents all of the iterations of “a place to stay” that the three views contain.

I also chose to label the icons in the navigation bar, based on feedback that unlabeled icons were not always easy to interpret. It’s also a convention I see in many iOS applications. I used open-source icons inside of the app.

I did design the Bivy tent icon. I felt that the outline of a modern tent stayed in line with the simple UI while clearly indicating what this app is all about — finding great campsites.

Final product

Check out an interactive version of the finished product in Invision here.

Functions that meet key goals

1. Find sites nearby, both in lists and maps
2. Easily choose sites based on reviews
3. Get directions to sites

4. Save sites for future visits
5. Leave personal reviews of sites
6. View your own reviewed sites

Key takeaways

I had four major takeaways from this project.

1. Research early and thoroughly

Early market research, user interviews, and personas help ground the entire project. These inform the goals for the product, which then serve as guideposts for the design process. If this happens too late in the process, or if designs are begun before this research happens, the product might feel disjointed and contain uninformed workflows that are inevitably cut later on.

2. Lo-fi for as long as it takes

The wireframing process ended up taking much longer than the high-fidelity work. User flows and features that meet user needs require iteration and careful thought, which happens much more quickly in low fidelity work. This work is focused solely on what the app can do, without any of the time-consuming decisions about what it should look like.

3. Fail often, fail fast

Workflows that I pursued for weeks were entirely cut after user testing and rounds of design feedback. I wish I’d spent less time building out every single artboard for a full Invision without doing any initial investigation into whether or not those workflows made sense to users.

It’s also important to keep every iteration. I wasted a lot of time making decisions about things in a single artboard, instead of duplicating the board and creating a wide variety of options to gather feedback on. There are hours of work that are missing from my early Sketch pages because I did all of the iterations in one artboard instead of creating copies with the slight changes to compare.

4. What it takes to ship

A project is never going to be perfect, nor is it ever going to feel completely finished. Writing a list of “must have, nice to have” features made it easy for me to decide which goals needed to be solved with V1 of Bivy. It also helped me choose additional features to add if I come back to this project in the future. Writing out a list of the key goals that I needed to meet provided a definition for “ready to ship” with this first version.

Want to know more? Reach out to me at me@madi.to