Duration
3 months
Team
solo
My Role
Product designer
My Work
User Research
Sketch
UI Design
Design System
Wireframe
Prototype
Usability test
Tools
Figma
Miro
Duration
3 months
Team
Solo
My Role
Product designer
My Work
User Research
Sketch
UI Design
Design System
Wireframe
Prototype
Usability test
Tools
Figma
Miro

The Idea

The Campwoods campsite booking app is designed to help both entry-level campers find top-rated campsites and experienced campers conduct a customized search. The app provides users with comprehensive information about campsites and campgrounds allows them to share their stories and leave reviews

Discover Problems

Online campsite booking at Algonquin Park is not very convenient. Currently, people can book only through the website or by phone, with limited access to comprehensive information.

๐Ÿ… Final Impact

A camping booking app for users of all experience levels to choose their ideal campsite with access to comprehensive information.
(Secondary research)

Busy Booking In Summer

As the oldest provincial park in Canada, Algonquin Park has over 1,200 campsites available for booking, spread across 10 developed campgrounds. Since 80% of the campsites are occupied in the summer, booking becomes highly competitive during this season.
(Competitor Research)

No Direct App

After conducting research, I found that there is no dedicated app or website specifically for booking Algonquin Park, except for a few indirect options.
Hicamp
Allows people to rent campsites on privately owned land with different camping styles. The Airbnb type of camping. Providing comprehensive guides to getting outside, cover all 13 of the country's provinces and territories.
(Find pain points)

5 User Interview

I began planning primary research by conducting a survey and selecting five interviewees from different camping experience levels and age groups. The research was conducted over two weeks to uncover users' values, motivations, and desires. Three interviews were conducted via video call, and two were one-on-one.
(Synthesis)

Analysis User Pain Points

Based on the interviews, I documented all the key points mentioned during the five interviews in Miro using sticky notes to gather qualitative data.

Affinity Map

Synthesize all the qualitative data to identify themes, grouping commonalities, problems, and wishes. This helps uncover the issues people are facing or experiencing. The process is visualized using a diagram map. Finally, evaluate the diagram and connect related themes.
  1. Planning
  2. Research
  3. Motivation
  4. Difficulty
  5. Duration
  6. Suggestion
  7. Camping style
  8. Number of camping
(Target users)

Users Prefer The Lakeview Site

Utilizing the diversion method to gain insights such as:
Users spend a significant amount of time researching before booking
Users look for activities
Users need more information about campsites.

Solutions

After discovering all the users' pain points, I used the 'How Might We' method to develop solutions.
๐Ÿ“‘ How Might We
After going through the diverging and converging phases of design thinking, I am moving toward a solution. I listed key focus questions to address the users' pain points. In the end, I selected the most important one: 'How might we help people find campsites more easily?' and came up with the following solution:
How might we help people find campsites easier?
  • ๐Ÿ“ Add a smart filter with campsite preference
  • ๐Ÿ“ Categorize campgrounds as feature
How might we provide comprehensive information about the campsite?
  • ๐Ÿ“ Provides video for each campsite
  • ๐Ÿ“ Button showing different sunlight conditions

User Flow

With users at the center of focus, I analyze how experienced users behave based on their motivations and needsโ€”specifically, how they reserve a campsite on Campwoods.

Wireframe & Wireflow

I created the wireframe and wireflow in Figma to illustrate how users might interact with the design and navigate the flow. Additionally, I added more details and button icons.

Mood Board

Campwoods is an app that helps people escape their busy daily lives to relax and enjoy nature. The mood is all about warmth, coziness, and a natural feel. A minimalist UI with contrasting colors also helps users feel calm and at ease while using the app.

Iterations

before image
Before

๐Ÿ“Œ Users were confused with 3 separate filter buttons.

๐Ÿ“Œ Users were not sure the selection was applied.

After

โœ… Combined all 3 buttons into 1 filter page to filter contents.

โœ… Added โ€œapply filterโ€ at the bottom of the page.

Before

๐Ÿ“Œ No indicate of the campsite #.

After

โœ… Added # on each campsite photo on the map.

Before

๐Ÿ“Œ Campsite number was confused with campground.

After

โœ… Added campsite # on each photo instead of # only.

Before

๐Ÿ“Œ AM and PM buttons were not indicate itโ€™s for the sunlight review.

๐Ÿ“Œ Video play button was not clearly Sportified in the page.

๐Ÿ“Œ Users were confused about 2 Buttons on the map.

After

โœ… Added sunlight icon in front of the AM and PM.

โœ… Changed video button to red.

โœ… Combined 2 buttons to 1 โ€œcheck for updatesโ€

โ‡ฅNext Steps

  • Design the activity flow.
  • Design the story page.
  • Expend the design of review section.
๐Ÿง  Reflection
  • Due to limited time and resources, only one user flow was conducted.
  • During the usability test, I noticed differences in camping experience levels and needs. After providing users with enough context, they were able to give more detailed feedback.
  • Conducting A/B testing with different design versions is more effective and intuitive for usability testing.