Solutions
DESIGN PROCESS
EMPATHIZE and DEFINE
After conducting a survey with 5 open ended questions, I created an aggregated empathy and user journey map to understand the users I am designing for and their needs. One of the groups I identified was individuals who engage in outdoor activities primarily on weekends, seeking versatile and cost-effective camping gear, alongside solo backpackers who prioritize lightweight and portable options, and seasoned campers who demand high-performance equipment for challenging environments.
Research Questions:
-
What factors do you take into account when choosing camping gear online?
-
Can you describe your experience with online shopping for camping gear?
-
How do you typically research camping gear before making a purchase?
-
What factors influence your decision to buy camping gear from one website over another?
-
Have you ever returned camping gear? If so, what prompted the return, and how was your experience?
Aggregated Empathy Map
Solutions
USER FLOW
To create the user flow for the website, I began by identifying key tasks users would perform, such as searching for products and completing purchases.
Next, I mapped out the user journey, outlining each step and decision point for the main and additional tasks. This involved sketching flow diagrams to visualize how users would navigate the site, highlighting pathways for different personas, such as first-time visitors and regular campers.
I defined critical touch points and interactions, ensuring that each step was intuitive and aligned with user needs. After reviewing and refining the flow, I ensured it supported a seamless user experience. Below I included partial main user flow as a diagram and animated prototype.
Solutions
IDEATE
During the Ideate stage, I created rough layouts on paper, concentrating on key pages and ensuring that I incorporated navigation elements and essential content areas.
Next, I used to Figma to create cleaner digital wireframes. I defined key components, placing placeholders for images, text, and buttons.
Lo-fi Wireframes
Solutions
PROTOTYPE
During the prototype phase, I made several improvements based on users’ feedback. For example, in the mobile version I integrated an option to change the delivery method directly into the shopping cart, which had previously been accessible only on the product page. I decided to add this feature because navigating back to the previous page to change delivery method was disrupting the flow and leading to users’ frustration. With this iteration, my goal was to simplify the process and ensure more seamless shopping experience for users.
Before
After
As I moved through the prototype stage, I focused on creating high-fidelity wireframes to bring my design ideas to life. These detailed wireframes helped me visualize the layout, colors, and interactions more clearly. I aimed to ensure that every element was thoughtfully placed to guide users seamlessly through their shopping journey.
Solutions
Home Page
Solutions
Log In Page
Error Message
ABOUT PROJECT
The goal of this project was to design a conceptual e-commerce website for a camping gear brand - CampQuest. This platform aims to provide a seamless shopping experience for outdoor enthusiasts, encouraging exploration and increasing sales as well as establishing customer loyalty to ensure users return to the site.
CHALLENGES
-
Navigation Difficulties: Users struggle to find products due to overly complex menus and unclear categories.
-
Cluttered Layouts: Many sites are visually overwhelming, making it hard for customers to focus on specific items.
-
Insufficient Product Information: Users frequently lack the detailed descriptions and images needed to make informed purchasing decisions.
-
Uninspiring Aesthetics: The designs often fail to resonate with the adventurous spirit of outdoor activities, leading to a less engaging shopping experience.
SOLUTIONS
-
Simplified Navigation: A clear and intuitive menu structure, that allows users to easily browse categories like "Climbing," "Running," and "Biking."
-
Clean and Organized Layout: The design emphasizes sufficient “negative” space and well-structured product displays.
-
Comprehensive Product Pages: Each product features detailed descriptions, specifications, and high-quality images, ensuring customers have all the information they need.
-
Engaging Visual Design: The site’s aesthetic incorporates nature-inspired imagery, creating an inviting atmosphere that resonates with the target audience.
MY ROLE
Solo project.
UX/UI/AI Design, Research, User Flow, Low/High Fidelity Wireframes, Prototypes.
TIMELINE
2 Months.
Solutions
Products Page
Solutions
Additionally to developing hi-fi wireframes during the prototype stage, I also focused on creating a cohesive style ensuring it truly represents the brand’s philosophy.
Colors, Typography and Buttons
Elements
Solutions
CONCLUSION
I gained valuable insights from analyzing the data collected through open-ended questions. However, since research is a crucial component of the design, it would be beneficial in the future to incorporate additional methods to conduct research and therefore deepen understanding users' needs and pain points.
I gained valuable insights from analyzing the data collected through open-ended questions. However, since research is a crucial component of the design, it would be beneficial in the future to incorporate additional methods to conduct research and therefore deepen understanding users' needs and pain points.
Based on the data I had collected through the research, I was able to implement strategic design choices, that are aligned with the goal to encourage exploration, increase revenue growth, and foster customer loyalty.
To achieve these objectives I implemented several key solutions. A simplified navigation with a clear and intuitive menu structure along with clean and well-structured layout, allow users to effortlessly browse categories like "Climbing," "Running," "Biking" etc. This approach reduces frustration and improves usability, ensuring that customers can find what they need quickly. Moreover, I included nature-inspired imagery and color pallet that creates an inviting atmosphere, resonating with the target audience. Such implementations reflects the brand's identity as well as encourage users to foster greater engagement that leads to overall great user experience and increase revenue.