Outsiders - Camping Retail Store website

Jay Gutierrez

Brand Designer
Interaction Designer
Product Designer
Adobe Illustrator
Adobe Photoshop
Figma
Personal Project
Cover: Outsiders website mockup
Cover: Outsiders website mockup

Challenge

Following a suggested prompt, I designed an e-commerce website for a camping supplier aimed at outdoor enthusiasts. The site needed to be both responsive and accessible to ensure a smooth and enjoyable shopping experience. Many camping e-commerce websites tend to overwhelm users with an overcrowded homepage, leading to a poor user experience and confusion for potential customers. My design focused on avoiding this by creating a clear, user-friendly interface.

Goal

Design a smoother user experience where products are displayed on dedicated pages, while still featuring top recommendations and discounts with links to the product pages. Additionally, I enhanced engagement by incorporating stories from other customers who are avid campers.

Process

During the research phase for camping gear websites, I conducted a benchmark and consulted friends who enjoy camping. I found that many sites are cluttered with products, especially on the homepage, which can confuse potential buyers. Additionally, the shopping process was often unclear. To address these issues, I decided to create a minimalistic design that enhances user experience and helps users achieve their goals. I simplified the sitemap based on insights from the journey map.
Once I had a clear direction for the website, I began designing a landing page that evoked a minimal yet aesthetic style, enabling users to make decisions more quickly and easily. I started with wireframes, then connected these in a prototype to evaluate the user journey using a "happy path," and finally applied the branding to create high-fidelity designs. The branding concept was inspired by simplicity and modernism, featuring a simple but symmetrical isotype, bold typography, soft color shades, and high-quality images, resulting in a cohesive modern design.

My Role

I worked in all stages: Discovery, Branding, wireframing, prototyping, and high-fidelity web designs for desktop and mobile.

Outcome

Even though this was a personal project, it counted with amazing reactions on LinkedIn and gave me a chance to work on another freelance project, for a company whose style is similar in terms of concept. I received great feedback on my portfolio presentation.
Below are some screens including a sitemap, journey map, brand conceptualization, desktop and mobile screens, and a link to the Behance project.
Web sitemap
Web sitemap
User Journey map
User Journey map
Outsiders branding concept
Outsiders branding concept
Outsiders desktop landing age
Outsiders desktop landing age
Mobile screens mockup
Mobile screens mockup

Behance project

Partner With Jay
View Services

More Projects by Jay