BC Camping

This project aims to evaluate and create a mobile app based from the BC government's camping website to make the booking process more accessible and efficient for potential campers.

My Role

UX/UI Designer

Challenge

To create an on-the-go campsite booking app

 

Tools

Figma, Adobe Illustrator, Adobe Photoshop, InVision

 

Timeline

March - April 2021

 

What I did

User Research, Information Architecture, Usability Study, Prototyping

bc-camping-banner-01.png

Overview

This mobile app is a take on the current BC Government's recreational parks camping website. Users are able to search for campsites, locate available sites within specific dates and place a booking.

Purpose & Context

This project was part of the BrainStation UX Design certificate to develop my skills as a UX Designer. The brief was to create an app of your choice. I chose this brief after experiencing my own frustrations with using the web application.

Objective

From my own experience, booking a campsite through the BC government's camping website has been a frustrating and, for the most part, an unsuccessful experience. After speaking with my friends about the issue, they have also experienced the pain point of the booking website. 

With this mobile app, I aimed to create a streamlined booking process that could be used on the go, whilst also providing relevant and up-to-date information.

banner2.png

My Role

For this project I was a UX designer who performed competitor analysis, user research and user testing, user persona development, user flow diagrams, wireframes, prototyping and high-fidelity mock ups. 

I also implemented UI design based on the BC government branding guidelines. 

Challenge

The biggest challenge for me was deciding which information and features would be most useful to users. 

I was able to overcome this challenge by studying other booking apps, such as Airbnb and HotelTonight. This allowed me to see which options were featured and which I could implement to the BC Camping app design. 

I also studied the current web application and made notes of what I felt would be important information for a user to have quick access to.

Approach

User Considerations & Ideation

I conducted interviews with individuals who have experience of visiting the BC Camping website. The user is largely Millennials who live in the city but like to escape to the outdoors in the warmer months. Most website traffic comes from desktop.

Users Flows & Wireframe

I considered the different paths a user might take based on the user profiles and their needs when booking a campsite. 

Prototype & Accessibility

01

02

03

Based on previous considerations about the current site, I developed prototypes which included elements that would make a quick and efficient booking and overall pleasant experience to the user. 

User Interviews

I interviewed five people who have previously used the current BC Camping website to make a booking. My goal was to identify the following:

  • General attitudes towards the site.

  • How straightforward it is to complete a booking?

  • Are there any unnecessary elements on the site?

  • What elements would improve and make a quick and efficient booking?

User Considerations

Common Pain Points

Hard to find relevant and up-to-date information

Confusing to navigate

Too much text

Outdated and not pleasing to use

Difficult to see which sites are available at a glance

List of campsites is not alphabetical

Page has timed out at the final stage resulting to unsuccessful booking

Insight: Users want to be able to make a booking quickly and efficiently and have accurate information of the campsite they are wanting to visit. 

User Research & User Personas

After some initial research, it seemed that millennials (25-40) are the main demographic for camping in North America. I learned that most campers are middle-income workers ($40-$80K/year) and 40% of campers in North America prefer to camp at provincial campgrounds. 

Based on the user interviews, I created two personas which embody the views of the participants and their experiences with the current BC Camping website.

During the rest of the project I will consider the wants and needs of these user personas as they demonstrated the target audience. 

"
It's hard to quickly find the information I need 
"
Screen Shot 2021-03-24 at 10.12.59 AM.png
It would be great if there was more imagery 
"
"

After reviewing the current site layout, I decided which tabs were most beneficial and adapted them to what I initially thought would make the most sense.

 

I asked the people I interviewed to participate in a card sorting activity to distinguish which categories would flow within each tab. I could then build on the information architecture and user flows below.

User Flows
& Wireframe

Information Architecture & User Flow

The below user flow shows the user logging into their account and making a booking based on set dates and being flexible on location.

user-flow.png

Wireframe

With the complete User Flow, I could begin to sketch out low-fidelity wireframes. This process allowed me to design the basic interface the users would need to navigate the app and determine the positioning of UI elements and patterns.

homepage
press to zoom
login
press to zoom
where
press to zoom
when
press to zoom
who
press to zoom
what
press to zoom
results
press to zoom
campsite
press to zoom
booking form
press to zoom
1/1

User Testing

Based from my initial sketches, I used Adobe Illustrator to create low-fidelity wireframes and made a prototype with InVision. I asked the previous participants to have some hands-on experience with the app and share their thoughts. 

The participants were given simple objectives, such as searching for campsites in a specific location, asking how they would start the booking process and getting feedback on form inputs. The participants were able to complete the goals and provided some valuable feedback.

Prototype & Accessibility

Mark wireframes-01.png
Mark wireframes-02.png

I would prefer to search available campsites first , then sign in when I am ready to make a booking.

"
"
Wireframe - app - Dani-03.png

I probably wouldn't sign in right away

"
"
Wireframe - app - Dani-05.png
Wireframe - app - Dani-04.png
Wireframe - app - Dani-02.png

It would be good to have an image of the unit you have booked.

"
"
Wireframe - app - Dani-06.png

Hi-Fidelity Prototype

Working from the low-fi mockups and feedback from user testing, I applied the BC Parks Government branding to create high-fidelity mockups .

BCCamping-mobile-mockup-3.png