Campscape Responsive Website Design
The emphasis was on crafting a user-friendly interface that streamlines the experience of browsing and ordering online gear, prioritizing ease of use and accessibility for all users
What is this project about?
Welcome to 'Campscape' - unlocking adventure with premium gear.
This is the second idea which was born during a course on UX Design, run by Google. The aim of 'Campscape' is to streamline the process of acquiring premium outdoor gear, emphasizing user-friendly navigation and convenience. Ideal for individuals leading active lifestyles, our platform enables effortless online ordering of high-quality gear, alongside providing insights into upcoming events at your preferred outdoor destinations. Whether you're seeking top-notch equipment or seeking adventure, 'Campscape' ensures a seamless experience tailored to your needs.
This project tells the story of how 'Campscape' was created to make ordering best quality camping gear a better experience by focusing on quality and speed. We'll go through this journey step by step, from the first ideas to the final design, keeping things straightforward and easy to understand.
My role
I worked on the project with a user-centric approach, first conducting user research and developing low-fidelity wireframes. After conducting usability studies and gathering user feedback, I designed the final visual interface of the app to be intuitive and user-friendly.
The problem
Users currently struggle with slow service, complicated gear ordering processes, and limited availability of camping equipment. Also they don't see much survival skills guide of their areas.
The goal
'Campscape' aims to address these challenges by providing hassle-free customization of camping gear, quick service, and a comprehensive survival skill guide, ensuring seamless and efficient online ordering experiences for outdoor enthusiasts
Project phases
01
Understanding the user
1. User research
2. Personas
3. User journey maps
4. Competitor analysis
5. User flow and storyboards
02
Starting the design
1. Paper wireframes
2. Digital wireframes
3. Low-fidelity prototypes
4. Usability studies
03
Refining the design
1. Improvements based on usability studies
2. Style guide
3. High-fidelity design
01
Understanding the user
1. User research
2. Personas
3. User journey maps
4. Competitor analysis
5. User flow and storyboards
User research: summary
In this project, I started by conducting qualitative research. I set out my goals for this part to have a clear mindset about what I was looking for through this process.
How frequently users purchase camping gear online?
What challenges do they encounter when ordering camping equipment?
How do they handle last-minute gear orders?
What is their perception of the quality of camping gear available online?
What unique features are they looking for in a camping gear website?
After conducting interviews, I identified the main pain points the users are facing.
User research: pain points
01
Limited Equipment Availability
Users may face frustration when essential camping gear items are frequently out of stock or unavailable, particularly when planning last-minute trips.
02
Complex Ordering Process
The customization process or navigating through options can overwhelm users, causing confusion and hesitation, potentially deterring them from completing their orders.
03
Unclear Shipping Policies
High shipping costs or unclear policies, like long delivery times or restrictions, can deter users. These fees greatly impact the overall cost of buying camping gear online.
Personas
Now that I conducted research and have understanding on users and their pain points is time for creating personas. In this part, I looked for the most common themes in the data and grouped the users who personify those themes together. This is how I created personas of James and Ahmad that you are about to meet
Second Persona: Ahmad
User Journey Map for James
After creating personas is time for journey map. A journey map is just what it sounds like, an illustration of what the user goes through to achieve their goals. The most important thing about journey map is that it helped me to design a obstacle-free path for users, and identify improvement opportunties.
Goal:
Discover a website providing information on camping events, gear sales, and offering guidance on using and maintaining camping equipment and finding important survival skills.
Competitor Analysis
I checked out different companies, including both direct and indirect competitors, to their user flow, navigation and UI. I've put my findings in a simple table down below.
Sitemap
I made the sitemap of the website which shows overall structure of website, including its pages and content, and relationships with them
Storyboard - big picture
Once I've gathered insights about users' needs, behaviors, and pain points, I was ready to start storyboarding. Big picture storyboards illustrate how users would interact with our product in a real-life context, focusing on their emotions, needs and pain points.
Scenario: Use the 'Campscape' website to order a camping bag pack easily.
Storyboard - close up
While big picture storyboards focus on the how and the why, close-up storyboards focus on the what. Close-up picture storyboards show product's functions rather than the user's experience, and how to navigate from one screen to another.
Scenario: Use the 'Campscape' website to order a camping bag pack easily.
02
Starting the design
1. Paper wireframes
2. Digital wireframes
3. Low-fidelity prototype
4. Usability studies
Paper Wireframes
I love this part of design so much!
Sketching ideas on paper is a really handy way to get your creativity flowing without spending lots of time on complicated designs.
My goal when I started sketching was to come up with loads of designs in a short time. This way, I could see which ideas worked best without getting too caught up in the details.
The more I sketched, the better I got at spotting what would work for users and what would just make things confusing.
Digital Wireframes
I created digital wireframes to enhance the accuracy and flexibility of adjustments in early design stages.
These wireframes are foundational for a transition into the creation of high-fidelity designs, and interactive designs for usability studies.
Low-fidelity prototype
This prototype showcases my design.
You will see two main flows in the app:
1. Ordering a camping bag pack by choosing category and completing the payment process
2. Reading a 'Starting a Fire' article from the Survival Skills Library.
Usability study
After prototyping these wireframes, I conducted a usability study with 5 participants who have the same characteristics as the personas. I decided to conduct the study unmoderated so that participants could complete tasks on their own time and in their own space, making it easier for them to provide accurate feedback.
Research goals
We’d like to figure out what specific difficulties users encounter when they try to complete the core tasks of the Campscape website: item selection, ordering, and in-app navigation.
Research questions
How long does it typically take for a user to select and order camping gear on the Campscape website?
Are users able to successfully complete their desired camping gear purchases on the Campscape website?
What insights can we gather from the steps users take when ordering camping gear on the Campscape website?
Is the payment process streamlined and easy for customers on the Campscape website?
Prompts
1. From the Campscape website homepage, select a camping gear category and begin browsing.
2. Explore various items within the chosen category and add desired gear to your cart.
3. Proceed to select the date of delivery(if available) and specify the quantity of items needed.
4. Confirm your camping gear selections and proceed to complete the checkout process.
5. After successfully placing your order, view the order receipt to ensure accuracy and completeness.
Themes
Gathered insights from studies and grouped them in themes.
03
Refining the design
1. Improvements based on usability studies
2. Style guide
3. High-fidelity design
Improvements based on usability studies
Gathered insights from studies and grouped them in themes.
UI design
Aimed for a clean, user-friendly interface to enhance the experience
Responsive design
Below images show that there is complete user flow for each device.
In the project, I conducted user interviews, competitor analysis, created low-fidelity, wireframes, linked them to a prototype, performed a usability study, and designed high-fidelity UI screens successfully.
I've gained a lot in this process, but I know there's still room for improvement and more lessons to learn as I continue to grow in this field.
Next steps
01
Conducting another usability study
I intend to conduct a usability study with users to gather valuable feedback. Based on new themes I will redesign the app.
02
Conducting more research about users
I want to conduct more research including interviews and surveys to gather more data on the users and their pain points, needs, and behaviors.
03
Brainstorming and implementing new features
Adding new features based on what I learned through the conducted researches.
Thanks for watching! ❤
