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
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.
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
"
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.
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.
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
I would prefer to search available campsites first , then sign in when I am ready to make a booking.
"
"
I probably wouldn't sign in right away
"
"
It would be good to have an image of the unit you have booked.
"
"
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 .
