My Role

Team

Tool

Duration

  • UX Research
  • Design System
  • Wireframe
  • Prototype
  • Usability Test
  • Solo
  • Figma
  • Miro
  • 3 Months
đź’­ The Idea
The campwoods campsite booking app is built to allow either entry level campers to find the top rated campsites or experienced campers customized search by using smart filters. The app provides users very comprehensive information of the campsites and allows users to share the story and leave reviews.
🧠 Discover Problems
Online Campsite booking at Algonquin park is not very convenient. These days people can book only through the website or through phone calls without very comprehensive information access.
🏅 Final Impact
âś” Secondary Research
As the oldest provincial park in Canada, there are over 1,200 campsites that can be booked. 10 developed campgrounds in total. Because 80% of the campsites are occupied in summer. It causes the booking competition in summer.
âś” Competitor Research
After research, there is no direct app or website designed for booking Algonquin park except the following indirectly.
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.

(user interview)
âś” Primary Research
I started to plan primary research by surveying and choosing 5 interviewers from different camping experience and age groups. It was conducted by within 2 weeks to uncover the value, motivation, and desires of the users.
3 through video call and 2 from 1 on 1.
âś” Interview
Interview with Linda
Interview with Jen
Interview with Bo
Interview with Katie
Interview with Andy
âś” Synthesis
Based on the interviews, I laid out all the things mentioned during these 5 interviews to get the qualitative data in Miro on sticky notes.
âś” Affinity Map
Synthesis all the qualitative data and find the themes, group all the commonality and problems and wishes. To find out the problems and issues people are facing or feeling. This process is generated by a diagram map.
Evaluate the diagraming map in the end and connect the related themes. 
âś” Personas
Understanding my target users is the core principle in user-centered design. Two  generated from all the data collected. Single young Cindy vs father David with different needs and goals.
*David has picked as main persona for this project
âś” Insights
Utilizing diversion method to get the insights like: Users spend much time researching before booking. Users prefer the lakeview site. Users are seeking for activities. Users need more information about campsite.
âś” Solutions
After discovered all the pain points of the users, i used the how might we method to help come with the solutions.
đź“‘ How Might We
After going through the diverging and converging design thinking, I am moving toward the solution. I listed the focus questions I need to solve the pain points of the users. In the end I picked the important one “how might we help people find campsites easier? And came up solution as:
How might we help people find campsites easier?
  • đź“Ť Add a smart filter with lakeview
  • đź“Ť Categorized campgrounds as feature
How might we provide comprehensive information about the campsite?
  • đź“Ť Provide video of each campsite
  • đź“Ť Provide Am/Pm button show different sunlight conditions
âś” User Flow
With users as the center of focus, I analyze the way the experienced user will perform around their motivation and needs.
( How the user will reserve a campsite on Campwoods )
âś” Design
Based on the user flow, I created the sketches that follow the flow and it helps me visualize the structure of the app design and see all the elements proportion on the page. With the solution in mind.
âś” Guerrilla Test
I have runned guerrilla testing with 3 users to test out the sketches. During the test, 2 users have issues navigating with the smart filter as all the information is all in one page and not clearly know what it is for, so I changed  to 3 separate buttons to indicate 3 different filter sections: amenity, campground, date.
âś” Wireframe & Wireflow
Created the wireframe and wireflow in Figma to show how users might interact and the flow. Also add more details and button icons.
âś” Mood board
Campwoods is an app helping people get away from the daily busy life to enjoy and relax in nature. A warm, cozy and natural feeling is what the mood is all about. A minimalist UI interface with contrast color also makes users feel calm and easy when they use the app.
âś” Style Guide
Chosen natural feeling green base color with creamy warm tone instead of white background. Using contrast orange red to pop the important buttons. All UI elements follow the design principle: simple, readable, cohesive.
âś” Iteration after 2 Rounds Usability Tests
Before

đź“ŚUsers was confused with 3 separate filter buttons.

đź“ŚUsers were not sure the selection was applied.

After

đź“ŚCombine all 3 buttons into 1 filter page to filter contents.

📌Adding “apply filter” at the bottom of the page.

Before

đź“ŚNo indicate of the campsite #.

After

đź“ŚAdding # on each campsite photo on the map.

Before

đź“ŚCampsite number was confused with campground.

After

đź“ŚAdding 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

đź“ŚAdding sunlight icon in front of the AM and PM.

đź“ŚChange video button to red.

📌Combine 2 buttons into one “check for updates”

🧠Reflection
  • Due to the limited time and resources, I did only one of the user flow.
  • During the guerilla testing, I did not provide enough brief about what role and level of camping which leads users were not able to provide enough feedback during the test.
  • When I did my usability test, I was fully aware of the difference of the camping experience levels and needs, after providing enough briefs for the users, they were able to provide more detailed feedback.
  • If I were able to provide enough brief in guerilla test, it could avoid the smart filter design changing back to the original sketch.
EmailLinkedin