CampEasy
Role
UX Designer
User Reaserch
UI Designer
Duration
November - December 2024
Team
Solo project
Tools Used
Figma
CampEasy is a camping supply app and responsive website that helps users easily explore, learn about, and purchase camping gear.
TL;TR
The problem
Beginners and experienced campers struggle with overwhelming options, lack of guidance, and inefficient navigation on existing shopping apps.
The solution
A user-friendly app and responsive website that simplifies the process of discovering, learning about, and purchasing camping supplies with an enjoyable and efficient shopping experience.
The outcome
A hi-fidelity prototype based on the solution, ready for testing to measure usability, effectiveness, and user satisfaction.
Understanding the Users
| Context
As part of my Google UX Design Certification, I set out to create my first UX case study, a fictional but research-driven project to apply and refine my skills. I wanted to explore a domain that combines e-commerce, loving nature and outdoor adventure, leading me to design a camping supply store.
To better define where to begin, I conducted competitive research on similar websites and apps, analyzed user reviews , and spoke with campers of different experience levels.
I uncovered two distinct user groups:
-
Beginners, who struggle with choosing the right gear and need affordable, well-curated recommendations
-
Experienced campers, who prioritize durability and efficiency but lack the right tools to find high-quality products quickly.
I discovered sevral pain points :
1
Lack of Guidance for Beginners
New campers struggle to navigate through overwhelming product choices without clear recommendations or advice tailored to their needs.
2
Difficulty Quickly Finding High-Quality Products
Experienced campers struggle with navigation and filters, slowing their search for durable, high-performance products.
3
Poor Mobile Optimization & Technical Issues
Many mobile apps experience bugs and are not optimized for a seamless shopping experience across various devices, disrupting the user journey.
Additionally, to further refine the design direction, I created personas based on research insights and developed a storyboard to visualize key moments of frustration and opportunities for improvement.
Personas
Emily – First-Time Camper27, Marketing Assistant, Lyon
Goals: Find affordable, beginner-friendly gear and clear guidance.
Pain Points: Overwhelmed by choices; unclear recommendations; hard to find budget options.
Daniel – Experienced Camper & Busy Dad42, Engineer, Bordeaux
Goals: Quickly find durable, trustworthy gear.
Pain Points:Wastes time browsing irrelevant products; poor filtering; slow apps.
Storyboard: Emily’s Frustration
-
Scene 1: Excited but lost among too many product options.
-
Scene 2: Unsure what gear is essential for beginners.
-
Scene 3: Confused by filters; can’t search by experience level.
-
Scene 4: Either buys wrong items or abandons shopping.
-
Scene 5: (Future) Ideal solution: Clear starter kits and beginner filters.
Following this research, I identified a clear direction:
Problem statement
Currently, most online camping gear stores suffer from poor user experience, overloaded interfaces, confusing navigation, and a lack of tailored recommendations. Beginners need guidance, while experienced users need efficiency, yet current platforms fail to address these distinct needs.
Goal statement
The goal of this project is to create a user-friendly platform that makes shopping for camping gear stress-free and enjoyable, catering to both beginner and experienced campers with a smart, personalized experience.
This raises importants questions:
How might we design a seamless mobile and web experience that…
✔️ Reduces decision fatigue by curating recommendations?
✔️ Simplifies navigation with smart filtering and clear categories?
✔️ Optimizes mobile usability for a frictionless shopping experience?
Ideation and Prototyping
To ensure a logical and efficient navigation system, I started by mapping out the sitemap and user flow . The goal was to create an information architecture that simplifies the browsing experience, making it easy for both beginners and experienced campers to find what they need without friction.
-
A Search bar with an advanced filtre for experienced campers to find what they need.
-
An Account page so the custumers can buy online and check their orders.
-
A Tips section to guide beginners and curious experienced ones.
-
A Catalogue with different categories to make the search without the search bar easier.
-
And a Shopping cart to ease the purchase process.
Then I created wireframes . I began with paper wireframes, using rapid sketching to explore different layout ideas. This helped me quickly generate variations for key screens before selecting and refining the most effective designs into low-fidelity digital wireframes on Figma.
1st attempt Home Page
With a basic structure in place, I created an interactive low-fidelity prototyping , allowing users to navigate through:
-
The home page
-
The beginner-friendly tips section
-
The advanced search and filtering system
Advanced filtre
Tip section
Search bar
Some key psychological and UX/UI principles guiding this phase:
Jakob’s Law
Why? Users expect familiar patterns (e.g., search bars, grid-based catalogs, cart icons).
Implementation:
Following established
e-commerce design standards to maintain usability.
Doherty Threshold
Why? Systems that provide instant feedback and fast response times enhance engagement.
Implementation:
Optimized interactions for speed, reducing wait times and unnecessary steps in the browsing experience.
Miller’s Law
Why? Excessive information can overwhelm users and hinder decision-making.
Implementation:
Structured content into smaller, digestible sections, visual hierarchy to highlight key details and reduce cognitive overload.
Based on the established wireframes, I developed high-fidelity mockups .
Logo
The CampEasy logo combines simplicity and symbolism. Its rounded, minimalist design evokes a tent and map pin, reinforcing the idea of travel and outdoor stays. The clean typography suggests trust and ease of use, core values of the brand.
Color Palette
Green was chosen as the primary color to reflect nature, calm, and eco-friendliness. It instantly connects users to the camping theme while promoting trust. Neutral greys support readability and create a clean, modern interface. A warm accent color like orange may be used to highlight key actions and evoke adventure.
Typography & UI
A modern sans-serif font ensures clarity and accessibility across devices. Rounded forms, clear visual hierarchy, and generous whitespace contribute to a friendly and stress-free booking experience. To enhance usability further, I incorporated clear, labeled icons for navigation, ensuring effortless access to key sections, even for those unfamiliar with the platform.
To accommodate different devices, I designed mockups for mobile, tablet, and desktop, ensuring a smooth and consistent experience across all screen sizes.
During this phase, I also introduced a "Favorite Tips" functionality, allowing users to save essential camping advice for easy access later. This feature was particularly beneficial for beginners who might need to revisit key information without having to search for it again.
Favorite Tips
Home Page
Search bar
Tip section
Advanced filtre
Accessibility considerations
Before the final design, I prioritized accessibility to ensure inclusivity:
Clear Visual Hierarchy
Why? A clear hierarchy allows users to scan content quickly, improving navigation and reducing confusion.
Implementation:
-
Use distinct, bold headings for sections and subheadings for clarity.
-
Organize content in scannable sections with bullet points.
-
Prioritize important categories with prominent text.
Highly Readable Icons
Why? Icons with text labels enhance accessibility, especially for users with cognitive or visual impairments.
Implementation:
-
Pair all icons with descriptive text labels for clarity.
-
Choose intuitive icons that align with common design patterns.
-
Maintain consistency in icon styles for easy recognition.
Strong Color Contrast
Why? High contrast ensures legibility for users with visual impairments, such as color blindness.
Implementation:
-
Adhere to WCAG AA standards for text-to-background contrast.
-
Use high-contrast colors for interactive elements (e.g., buttons, CTAs).
-
Provide a dark mode or customizable contrast options for users with visual disabilities.
Key Takeaways and Learnings
Designing CampEasy, my first UX case study, taught me the impact of clear navigation, accessibility, and responsive design. Balancing simplicity for beginners with efficiency for experienced campers was a key challenge. I learned that small design changes can greatly enhance usability, shaping my approach to future projects.
| Next steps
-
Conduct Usability Testing
Since this was my first case study, my next goal is to test my high-fidelity prototype with real users to measure usability, effectiveness, and satisfaction.
-
Refine Personalization Features
I’d love to explore ways to customize recommendations even further, allowing users to get personalized gear suggestions based on their past purchases and experience level.
-
Improve Accessibility
Accessibility is something I want to prioritize more in future projects. For this project, I focused on high-contrast colors and readable typography, but I’d like to dig deeper into WCAG guidelines and test designs with assistive technologies.