CampEasy: From UX Design to Front-End Development (Desktop Version)
Project Description
CampEasy is a desktop web project focused on designing a camping gear shopping experience inspired by the original mobile app. While most of the work centered on creating the visual design in Figma, I took into consideration the user experiences identified during the product development cycle of the mobile version ensuring consistency, clarity, and accessibility across devices. As an additional step, I developed the desktop landing page using React and Tailwind CSS to showcase my ability to translate design concepts into responsive, functional front-end code.
Project Problem
While the CampEasy mobile app provided a smooth shopping experience on smaller screens, there was no existing desktop version to support users browsing from larger devices. This created a gap in accessibility and brand consistency across platforms. The challenge was to design a responsive desktop layout that maintained the same visual identity and user flow as the mobile experience while showcasing how the interface could scale effectively for wider screens.
Project Goal
The goal of this project was to design a desktop version of the CampEasy app website in Figma, showcasing how the layout would look and respond across different screen sizes. Additionally, I developed the landing page in code to demonstrate my front-end web development skills and how I can translate design concepts into functional, responsive websites.
Project Tools
-
Figma – Used for designing the desktop layout, creating wireframes, and building high-fidelity mockups that reflect the CampEasy brand style and user flow from the mobile app.
-
React – Utilized to code the landing page and structure reusable components, ensuring clean, maintainable front-end development.
-
Tailwind CSS – Applied for rapid and consistent styling, allowing for responsive layouts and accessibility-focused design implementation.
Site Map
The CampEasy sitemap outlines the main structure of the website, showing how users navigate from browsing gear to completing a purchase. It includes key sections like Home, Categories, Cart, and Profile, each designed for clear and intuitive navigation. The flow highlights a smooth e-commerce journey from product discovery to checkout and order confirmation.
Paper Wireframes
This paper wireframe represents the early layout for the CampEasy desktop homepage. I focused on organizing key elements like the navigation bar, hero section, and product grid to establish a clear visual hierarchy. This helped me plan the site’s structure and ensure users could easily browse and explore products.
Paper Wireframe Screen size Variations
These wireframes show how the CampEasy layout adapts to different screen sizes for desktop and mobile. I focused on keeping the navigation and product grid consistent while adjusting spacing and hierarchy for smaller screens. This ensured the design remained user-friendly and visually balanced across all devices.
Digital WireFrames
The wireframes were created in Figma to establish the layout and structure of the CampEasy website before moving into high-fidelity design. I designed both desktop and mobile versions, ensuring that each section such as the homepage, product listings, and checkout flow could adapt seamlessly to different screen sizes. The goal was to maintain a consistent user experience and visual hierarchy across devices, reflecting responsive design principles from the very start. These low-fidelity wireframes helped define navigation flow, spacing, and content priorities, setting a strong foundation for the final desktop design and coded landing page.
Digital Wireframe Screen size Variations
These wireframes showcase how the CampEasy interface adapts across different screen sizes for both desktop and mobile devices. I prioritized maintaining consistency in layout and functionality while optimizing space and readability on smaller screens. After receiving peer feedback, I refined the design by improving spacing, simplifying the bottom navigation for mobile, and keeping essential interactions easily accessible to enhance the responsive user experience.
Prototypes
After creating the low-fidelity wireframes, I connected them in Figma to build an interactive prototype that demonstrated the website’s navigation and user flow. Each screen such as the homepage, categories, product pages, cart, and checkout was linked to simulate a real shopping experience from browsing to order confirmation. This prototype allowed me to visualize how users would move through the site, test functionality early, and ensure a logical flow between steps. I also designed a mobile version to maintain responsiveness, showing how the layout and interactions adapt across devices while preserving the same structure and usability.
Mockups
The high-fidelity mockups represent the final visual design of the CampEasy desktop website. Built in Figma, these mockups bring together the color palette, typography, layout, and imagery to reflect the brand’s outdoor theme and modern shopping experience. Each page from the homepage and product listings to checkout and profile hows a consistent use of visual hierarchy, color contrast, and spacing for clarity and accessibility.
These mockups also demonstrate responsive design thinking, as they were created alongside mobile versions to ensure adaptability across devices. The design integrates the same structure and flow established in the low-fidelity wireframes and prototypes, translating them into a polished, ready-to-code visual system that aligns with the CampEasy brand identity.
Figma Design
The Figma prototype demonstrates the planned user journey for the CampEasy desktop experience. It showcases how users would navigate through the landing page from exploring categories to viewing products with attention to layout, spacing, and interaction flow. This visual design represents the foundation of the user experience and guided the transition into the coded version.
Coded Landing-Page
The coded version brings the design to life using React and Tailwind CSS. It highlights how the original Figma layout was translated into a fully responsive, functional landing page. The structure, colors, and typography remain consistent with the prototype, showing how visual design decisions were successfully implemented in real code while maintaining accessibility and responsiveness.
Design to Development Showcase
A comparison of the CampEasy prototype and the coded landing page.
Key Takeaways
Impact
The redesigned Camp Easy website helped users navigate categories more confidently and find gear without feeling overwhelmed. During testing, participants said the clearer layout, simplified menus, and improved filtering made browsing feel faster and more enjoyable. These updates reduced confusion, increased task completion, and created a smoother, more intuitive shopping experience across desktop and mobile.
What I learned
Through this project, I learned how thoughtful navigation design can dramatically improve how users explore a website. I gained experience transforming cluttered layouts into clean, scannable sections and saw how consistency in spacing, iconography, and labeling strengthens user trust. Most importantly, I learned how usability insights especially around search, filtering, and mobile responsiveness can guide design decisions that directly support user needs.
Next Steps
1. Strengthen product discovery & search experience
A key next step is to enhance the product discovery process by improving keyword search, adding “related gear” suggestions, and refining the category structure. This will help users who aren’t sure what equipment they need or who are browsing for inspiration. Improving on-site search accuracy will also support new campers who rely heavily on guidance.
2. Build out richer product content & education
To support beginners, the website could include camping checklists, beginner guides, trip-planning tips, and “gear explained” sections to help users make informed decisions. Adding comparison charts, size guides, and video demos would reduce uncertainty and boost user confidence while shopping. These educational touchpoints would position CampEasy as both a store and a trusted camping resource.
3. Code the remaining website pages
The final step is to begin developing the remaining pages in the website’s design system—such as product pages, category pages, cart, and user account sections. Coding these pages will bring the full CampEasy experience to life and ensure consistent visuals, interactions, and responsiveness across the site.