OFF GRID
Your Adventure-Ready Camping Gear
Product Design | Interaction Design | Prototyping
TIMELINE
May 2024 - June 2024
Slovakia
LOCATION
Full-Stack Product Designer
ROLE
How can we simplify the process for outdoor enthusiasts to explore, buy, and enjoy top-notch camping gear through a single, user-friendly online platform?
THE PROBLEM
Outdoor enthusiasts often find it difficult to easily locate and acquire dependable camping equipment. They encounter ongoing challenges in exploring new products, evaluating options, and ensuring they have all the essential gear for their trips.
Gear Up for the Ultimate Adventure with Off Grid!
THE SOLUTION
Off Grid is an online platform dedicated to serving camping enthusiasts by offering a diverse array of essential outdoor gear and equipment for purchase.
Browse through a comprehensive selection of camping equipment tailored to meet all outdoor needs. You'll find exactly what you need!
Explore Diverse Camping Gear
• Extensive Product Selection: Discover a wide range of camping equipment from tents to cooking gear.
• Detailed Product Descriptions: Dive into comprehensive information on each product to make informed choices.
• User Reviews and Ratings: See what fellow campers think with authentic reviews and ratings.
Take a personalized quiz to find the perfect camping gear based on your preferences and needs, ensuring every camping trip is just right for you!
Interactive Gear Quiz
• Personalized Recommendations: Answer a few questions to receive tailored suggestions for your camping needs.
• Effortless Navigation: Intuitive interface ensures a smooth quiz-taking experience.
• Instant Results: Get immediate feedback on your ideal gear based on quiz responses.
THE RESEARCH
Understanding the user
To start a design process for a camping supply store website, I decided to dive deep into understanding the needs and preferences of camping enthusiasts. Instead of relying solely on online surveys or data analytics, I chose a more personal and qualitative approach by conducting in-person interviews. These interviews allowed me to engage directly with individuals who are passionate about camping and outdoor activities, gaining firsthand insights that go beyond mere statistics or general trends.
During these interviews, I crafted open-ended questions to encourage participants to share their camping experiences, challenges, and desires when it comes to purchasing camping supplies online. I wanted to understand what makes their camping trips memorable, which gear they rely on the most, and any frustrations they encounter while shopping for camping equipment on the internet. This approach aimed to uncover not just surface-level preferences but also the underlying motivations and emotions that drive their decision-making process.
Next, I created a simple Google Forms survey and gathered those questions there. I knew the survey wouldn't be as in-depth as the interview would be, but I could reach more people to send it to. I asked my brother, who has colleagues at work with young children, my best friend who has a sister with two children, and my mom's cousin who has four children, two small ones. At first, it was hard to persuade people to answer the survey considering how little free time young parents have, but I managed to get responses from 70% of the people I reached out to.
Gathering the feedback
By identifying user pain points related to experience, navigation, and interaction, I pinpointed precise areas for enhancement. This approach guarantees that the app not only delivers intuitive and user-friendly features but also ensures a seamless and gratifying user experience throughout.
Identifying user pain points
01
EXPERIENCE
The primary motivation for individuals to shop for camping supplies online is convenience.
02
ACCESSIBILITY
Customers value the accessibility of detailed product information, user reviews, and comparisons.
03
INTERACTION
Customers appreciate the ease of comparing prices and features across different brands.
Developing a clear understanding of the user persona was pivotal during my research phase. It involved creating individual personas with diverse backgrounds and preferences, which helped tailor the app's features to meet a wide range of user needs. This approach ensured a more intuitive and personalized user experience that resonated with our diverse audience.
User persona
Then I started conducting a competitor analysis, which included three ‘‘competitor companies’’. I divided my analysis of three camping supplies websites into their Unique Value Propositions, Company Advantages, and Company Disadvantages to understand how each positioned themselves in the market and where they excel or face challenges.
Competitor analysis
I used basic sketches to visualize user interactions and app functionality, focusing solely on close-up storyboard to detail specific interactions. This method proved invaluable in clarifying and refining the user experience.
Storyboarding
Close-Up Storyboard
Starting the design process
THE DESIGN
Based on the insights gathered from user research, it became evident that users value online shopping for camping supplies primarily for its convenience, extensive product variety, efficiency in accommodating busy schedules, ability to compare prices and features across brands, and secure transactions. These findings strongly influenced my approach to creating the Information Architecture for my website.
I focused on designing a minimalistic and highly organized system to ensure simple navigation for all users. This included clear categorization of products, intuitive search functionality, and streamlined checkout processes.
The initial phase of wireframing started with hand-drawn sketches on paper. This approach allowed for quick iteration and brainstorming of various layout and functionality ideas. The paper wireframes include home screens with various layouts exploring different ways to present the main features, such as the shop, deals, and navigation elements. Products page with different arrangements of product listings and filtering options. Quiz page have a step-by-step screens for the quiz, including the introduction, question steps, and results page.
Wireframes
After creating paper wireframes I starred individual sections I thought had the best layout.
After refining the ideas on paper, the next step was to create digital wireframes using design tools. This transition helped to further detail and organize the layout and functionality.
The low-fidelity wireframing process involves creating a basic, functional blueprint of the app to visualize the user flow and interaction between different screens. The user begins at the home screen and there are multiple pathways leading from there to other sections such as Products, Quiz, Cart, and Product Detail (Buy).
This stage includes mapping out navigation to ensure all major screens are connected logically, defining user interaction to highlight how users interact with different elements to move through the app and validating user journey to provide a visual representation to validate the user journey and make necessary adjustments early in the design process.
Low-fidelity prototype
Usability study: Findings
NAVIGATION AND FLOW
Users appreciated the clear and intuitive navigation paths between different sections of the app, such as easily moving from the home screen to the products or quiz sections.
01
QUIZ RELEVANCE
Users suggested refining the quiz questions to make them more relevant and concise. Additionally, they recommended adding progress indicators to help users know where they are in the process.
02
03
PRODUCT INFORMATION
Users appreciated the detailed product information available on the Product Detail page, including images, pricing, and reviews.
When envisioning the future look of the website, my inspiration drew from the cozy warmth of camping nights spent around a bonfire with loved ones. I experimented with various main colors, and ultimately settled on a rich red hue paired with a deep green. This combination captures the essence of the outdoors and the natural environment.
For the font, I chose Canela for its traditional appeal and warm aesthetic, aligning perfectly with the comforting atmosphere of camping. This design approach aims to evoke a sense of familiarity and connection to nature, ensuring that visitors to the website feel welcomed and inspired to embark on their next outdoor adventure.
Brand development: Simple and cozy
Colors
Typography & Button
I've written more concise questions. I've ensured that each question is clear and to the point, eliminating any unnecessary words or complex phrasing. Then I designed a progress bar that fits seamlessly into the quiz interface to help users know where they are in the process.
Click on the screens to play!
Equip yourself for every camping expedition with Off Grid, your trusted guide for expert gear selection and seamless outdoor adventure planning!
Final design ?
Check out the Figma file.
Impact and future plans
TAKEAWAYS
Easy navigation enhances the overall user experience, allowing customers to find products quickly and efficiently. The quiz has been particularly appreciated for its ability to streamline product selection, making it easier for users to find items that best suit their outdoor activities. This personalization not only saves time but also ensures that customers are more satisfied with their purchases.
Impact
In the future, I plan to enhance Off Grid's website by implementing responsive design, ensuring a seamless experience across all devices. I plan to introduce interactive features such as community forums or user-generated content sections. These additions will foster a sense of community among users, allowing them to share their experiences, tips, and favorite camping spots.
Future plans
