Camping App UX/UI Design
Project Goal: Camp Map is an app with the goal of helping people find the perfect place to camp.
Problem: It can be really hard to find and book a campsite with ease. People rarely enjoy the process of browsing through multiple websites and apps to find the perfect place to stay.
Solution: Camp Map consolidates campsite listings from around the internet into one app. People can also host campsites through the app.
My Role: UX/UI design & research, Protoyping
Tools: Figma
The Planning Stage
Competitive Analysis
To start the UX design process, possible competitors to the product were analysed and compared. The main apps and websites that could be possible competitors are The Dyrt, Hipcamp, and Recreation.gov. Apps such as The Dyrt and Hipcamp both feature maps and search features and have intuitive interfaces, but The Dyrt often requires a paid subscription to access certain features, and Hipcamp doesn't give the user direct access to a map for searching for campsites. Recreation.gov has access to lots of campsites in many areas, but it doesn't allow for user-generated content, such as reviews of campsites or user-hosted campsites.
Personas
Two personas were created to help keep the users in mind during the design process. Goals and frustrations were specified for each persona to help the designer improve the user experience of using Camp Map.
Kaitlyn is a barista who lives with her dog in downtown Seattle.
Goals:
Camp in pretty nature spots. Get great photos and videos of her vacations.
Camp in pretty nature spots. Get great photos and videos of her vacations.
Frustrations:
She dislikes it when websites are unclear on whether the campsites are open to camping.
She dislikes it when websites are unclear on whether the campsites are open to camping.
Dave is an insurance agent who usually goes camping 1 to 2 times a year with his wife and two children.
Goals:
He wants to enjoy some family time. Dave loves to eat some good food out in nature.
Frustrations:
Dave gets frustrated trying to keep all the details of his trip organized. He gets bugged by trips costing more money than he anticipated.
Goals:
He wants to enjoy some family time. Dave loves to eat some good food out in nature.
Frustrations:
Dave gets frustrated trying to keep all the details of his trip organized. He gets bugged by trips costing more money than he anticipated.
User Flows
MVP
The Design Stage
Lo-fi Wireframe
After making rough paper sketches, a lo-fi wireframe was built in Figma. A design system called Paper Wireframe Kit was used to speed up the process so the designer could focus more on layout than visual design.
Style Guide & Custom Components
Write about your process here!
Hi-fi Wireframe
Figma Protoype
Final Thoughts
This was a great learning experience.