ADVENTURE CAMPING
A responsive website for a camping supply store
Project Overview :
Adventure Camping is a one-stop shop for all camping and outdoor needs, catering to families, seasoned adventurers, and everyone in between. The target demographic includes individuals and groups from ages 25 to 50 who value quality and durability in their outdoor gear.
Adventure Camping’s mission is to enhance the outdoor experience by providing a seamless and engaging shopping journey, accessible on any device, ensuring that every adventurer is well-equipped for their next escape into the wild.
My Role :
As the sole UX designer for the Adventure Camping website, I spearheaded the entire design process, focusing on creating a user-centric online environment.
I crafted a streamlined and intuitive experience to ensure that our target audience could navigate the site with ease and efficiency, enhancing their overall shopping experience.
This project showcased my ability to manage and execute comprehensive design strategies single-handedly, delivering a product that is both aesthetically pleasing and functional.
Understanding the User
User Research Summary
For Adventure Camping, user research was carried out through interviews, subsequently visualised using empathy maps to grasp the nuances of our target users' needs and behaviours.
The research revealed that many users view online shopping as a leisure activity to unwind from the stresses of school or work.
However, a common frustration emerged: many e-commerce platforms are perceived as cluttered and complicated, making navigation difficult.
This complexity often transforms what should be a relaxing activity into a challenging and stressful experience, ultimately detracting from the enjoyment and relaxation that users seek when shopping online.
Aggregated User Profile
JACK SMITH
ABOUT
Jack Smith is an outdoor enthusiast who relishes the time spent in nature, whether hiking, camping, or biking. He uses online shopping to conveniently access and purchase the latest and most reliable outdoor gear.
GOALS
To quickly find and purchase the best camping and outdoor equipment.
To access and navigate online stores easily from any of his devices.
To complete shopping efficiently and return to planning outdoor activities.
FRUSTRATIONS
Overly complex website navigations.
Slow and cumbersome checkout processes.
Poor mobile site perfomance.
PAIN POINTS
Websites with cluttered interfaces and unclear product categorisations.
Long, convoluted checkout processes with too many steps.
Lack of responsive design for mobile shopping.
PERSONALITY
Introvert
Extrovert
Analytical
Creative
Busy
Time Rich
Messy
Organised
Independent
Team Player
USER journey
User research : pain points
1
2
3
Initial Design ideation
Hand Sketched Wireframes
In the initial stages of designing the Adventure Camping website, I employed paper wireframes as a fundamental tool for rapid concept ideation and mapping out the user's site journey. This hands-on approach allowed me to sketch out various layouts and interface elements quickly, providing a tangible means to explore different design solutions without the constraints of software tools.
These paper wireframes facilitated immediate revisions and fostered creative thinking, making it easier to visualise and communicate the flow and structure of the website. This method proved invaluable in establishing a clear and effective user journey early in the design process, setting a solid foundation for further refinement and development in digital formats.
Mobile Variants
Following the initial creation of paper wireframes for the Adventure Camping website, I adapted these sketches to visualise how the design would translate onto mobile screens.
Recognising the limited real estate of smaller devices, I adjusted the content layout to ensure that all key elements remained accessible and visually appealing.
This adaptation involved rethinking navigation placement, simplifying menus, and ensuring that call-to-action buttons were prominently displayed for ease of use.
These changes were crucial for optimising the mobile user experience, guaranteeing that functionality and aesthetics were maintained across different device formats, and providing a seamless transition from desktop to mobile views.
Design development
Evolution of Digital Wireframes
Transitioning from paper to digital wireframes was a pivotal step in the design process for the Adventure Camping website. This move allowed for a clearer and more detailed understanding of how the design could effectively address user pain points and enhance the overall user experience.
In the digital environment, I was able to iteratively refine and test various layouts, which helped in making informed decisions about the placement of key UI elements.
A major focus of my strategy was on the prioritisation of button locations and the arrangement of visual elements on the homepage. This involved careful consideration of user flow and accessibility, ensuring that all interactive components were placed intuitively to facilitate ease of navigation.
By optimising these aspects, the digital wireframes helped to create a more user-friendly interface that anticipated and met the needs of users, ensuring a smoother and more engaging interaction from the moment they landed on the site.
Lo-fi Prototyping
The development of the low-fidelity mockup for the Adventure Camping website was a critical step in refining the primary user journey, specifically the process of adding an item to the cart and completing the checkout. This mockup connected all the screens involved in these actions, providing a visual and interactive representation of the user flow.
This low-fidelity prototype was then prepared for usability testing. This phase was crucial for gathering direct user feedback on the practicality and intuitiveness of the navigation and interaction design. The insights gained from this testing would inform further refinements, ensuring that the website's design was not only functional but also highly user-centric, facilitating a seamless shopping experience from start to finish.
View Lo-Fi Prototype
usability study
Study Type :
Unmoderated Usability Study
Location :
Remote, United Kingdom
Participants :
5 Participants
Length :
20 to 30 Minutes
Study Findings
1
2
3
refining the design
Integrating the Brand
In the progression from low-fidelity wireframes to more detailed mockups for the Adventure Camping website, a significant transformation involved the integration of key brand assets, colour schemes, and specific copy to bring the design to life. This stage was critical for moving beyond basic layouts and functionalities to create a visually engaging and brand-cohesive user interface.
The initial wireframes served as a skeletal framework, outlining the core structure and user flow. As I transitioned into the mockup phase, each element was enhanced with the Adventure Camping brand’s visual identity. Fonts and other typographical elements were chosen and applied to match the brand’s style, ensuring readability and maintaining a visual hierarchy that guides the user's journey through the site.
Note : Following feedback received during the usability testing a quantity selector has been added to the product page.
Design System & Screen Variants
In developing the Adventure Camping website, I implemented a design system to ensure uniformity and flexibility across all UI components. This system included a comprehensive library of standardised elements like buttons, input fields, and navigation menus, each predefined in terms of colour, size, and spacing. This approach streamlined the design process, reducing inconsistencies and enabling easy edits and updates.
The design system allowed for quick adaptations based on user feedback or evolving brand needs, ensuring consistency across the website while enhancing efficiency and responsiveness in the development workflow.
Note : Following feedback received during the usability testing an additional filter was added to the search function to select to show only products that are currently in stock.
A quantity selector was also added to the shopping cart and checkout user flow.
As part of the design process, special attention was given to refining the responsiveness of the interface to ensure optimal performance on smaller, mobile screen sizes.
The refinement process included scaling down images and text to fit smaller screens without losing clarity or impact. Navigation menus were simplified into hamburger menus to save space while maintaining ease of access. Buttons and interactive elements were resized to be easily tappable, preventing any user frustration with misclicks or hard-to-navigate interfaces.
This adaptive design strategy not only enhanced the user experience on mobile devices but also ensured that the brand's identity was consistently represented across all platforms.
hi-fi Prototyping
The culmination of the design process involved converting the detailed mockups into a high-fidelity prototype, primed for final testing before handoff.
This phase was crucial as it brought the theoretical aspects of the design to life, incorporating refined visuals, fully integrated content, and interactive elements that would be mirrored in the final product.
This prototype was not only a representation of the final design but also a fully interactive version that allowed for in-depth usability testing.
View Hi-Fi Prototype
Accessibility Considerations
1
2
3
design progression
Takeaways & Next Steps
Impact :
The project demonstrated the significant impact of a streamlined user experience on customer satisfaction and engagement. By simplifying the navigation and checkout processes, we not only enhanced the usability of the Adventure Camping website but also saw a positive effect on user retention and conversion rates. This underscores the importance of user-friendly design in driving business success in e-commerce.
Learnings :
Incorporating accessibility features from the beginning of the design process provided key learnings about the diverse needs of our user base. This approach not only broadened my understanding of inclusive design practices but also highlighted the necessity of considering all users when creating digital environments. These insights will guide future projects, ensuring that accessibility remains a cornerstone of our design philosophy.