Adding a feature to

Hipcamp

Making camping more accessible for families

Hipcamp MacPro

Overview

Hipcamp is an online travel service that helps people discover and book camping experiences. Hipcamp wants to get people outside. More than that, they want to inspire the next generation of people who are passionate about exploring AND protecting nature. Hipcamp helps people to access the land and the information about that land.

In this project I explore ways to make Hipcamp more accessible to newby campers and families. This is a self-initiated project that I completed as part of my coursework at UX Academy.

My role

  • Secondary research
  • Primary research
  • Interaction Design
  • Usability testing
  • Implementing existing user interface design and branding

Tools Used

InVision, Sketch

Landing page flow

Hipcamp Landing Page Flow

Search results flow

Hipcamp Search results Flow

"I’m not sure what’s the standard expectation of what it looks like."

Interview quote

Phase 1
Empathize

In this phase I observed and engaged with people to get a better idea of their experience and motivations.

Methods

  • secondary research
  • competitive analysis
  • survey
  • in-person interviews

High lever questions

  • What are the motivations of camping families and newbie campers?
  • What are families and newbie campers concerned with?
  • What are the main barriers facing families and newbie campers?
  • What do they care about?

Specific Questions

  • Why do people want to go camping/glamping?
  • How do they go about finding camping grounds/glamping accommodation?
  • What kind of distractions or roadblocks do people encounter when looking for accomodation?
  • How do they prepare for camping?
  • How do they go about finding what equipment to bring?
  • What information would be useful in planning a camping trip?

Research Summary

Hipcamp Research Summary

“When we were going camping we asked at a rental place what people would usually choose for this kind of conditions.”

Interview quote

Interviews

I conducted five in-person interviews. I concentrated on questions about past camping experience, motivation for camping, process of choosing a camping ground, and preparation. Review my interview script.

Hipcamp Postits

Phase 2
Define

In this phase I analyzed and synthesized the information I gathered in the empathize phase.

RESEARCH FINDINGS

Most participants relied heavily on advice from more experienced friends. They relied on borrowing equipment, if they bought it it was after meticulous research or after friends told them what to get. While people asked for friends for advice on what to bring, they didn’t ask about where to go and when.

BARRIERS FOR NEWBIE CAMPERS

  • Lack of equipment and knowledge what’s the right kind of equipment.
  • There are checklists online but each campsite is different and each family has different needs.
  • Campground descriptions assume a level of knowledge that they don’t have.
  • Not knowing which local campground is best for them.

WHAT DO THEY CARE ABOUT?

  • Knowing about available camp facilities.
  • Feeling close to nature.
  • Making sure their kids are entertained and safe.

Persona and Empathy Map

I create a persona and an empathy map to better understand someone who would be using the website.

Target User

I decided to concentrate on families that have a strong interest in camping and who have little prior knowledge about it.

User Persona

lapin persona

Empathy Map

hipcamp empathy map

Phase 3
Ideate

In this phase I explored the problem space and brainstormed different ways of solving the problem.

User Flow

hipcamp userflow

Paper wireframes

I brainstormed different ideas for design patterns that would best fit the required tasks and the current design on the site.

Hipcamp Paper Wireframes

Phase 4
Prototype

In this phase I experimented with different solutions for the problems I identified in the previous stages. I implemented the solutions in a paper prototype, which allowed me to improve and re-examine my ideas quickly. After that, I moved on to creating a prototype in Sketch.

Landing Page

hipcamp landing

Search Results Page

It's hard to say whether a cabins and lodging provide beds and if they have linens. I added filters for beds and beds with linens. Also I added filters that answer the needs of newbies and families to find a campground with the amenities they need.

hipcamp rearch results page family filter

Campground Listing Page

I added a camp map that should make it easier to locate campgrounds and amenities. There is a detailed description of what makes the camp family friendly and an autogenerated camping check list.

Campground listing

hipcamp campground listing page

Camp map

Adding a map to allow users to book their prefered spot. Families tend to be particular about where they want their campground to be. The access to showers and bathrooms is important.

Hipcamp Map

Family friendly

Each campground may be family friendly in a different way. Some may offer activities for kids, others may just have a playground.

hipcamp family friendly

Auto generated checklist

While the page lists all available amenities, a newbie camper may still not be sure what essential items to bring. A list generated based on the location, number or people going, their ages, time of the year, and duration of their stay is a very good starting point for a camping checklist.

hipcamp bring with you

Phase 5
Test

InVision Prototype

I created a prototype in inVision. See my prototype.

Results

  • The flow was easy to follow but some of the participants were not sure if the map was clickable. I decided to add a location indicator with the shadow to solve this problem.
  • I tested my solution with a new group of participants and it came out that the locator indicator was not enough to make a difference.
  • I came up with an idea to prompt the user to choose their campsite. I tested the solution with a new group of participants.

Camp Map
three versions

hipcamp maps versions

Camp Map Version3

Step 1

When the user arrives on the page they are prompted to choose the location of their cabin.

hipcamp map v3 step1

Step 2

Once the location is chosen the green button changes to “Direct book” and the information about which cabin is chosen is just under the button. The user can change the cabin by using a drop down menu or by using the map.

hipcamp map v3 step2

Final Design

Desktop Wireframes

hipcamp final desktop wireframes

Future steps

  • It would be interesting to explore the idea of camping checklist. Perhaps, creating a separate page that would have the checklist.
  • It would be useful to let the user choose the number of beds they need.