Client
Project NDA
Project Scope
  • UX Research
  • Creative Direction
  • UI Design
  • Visual Design
  • UI Animation

I’m not homeless, I just love camping!

This project involves creating a responsive e-commerce website dedicated to camping and outdoor gear. The website needs to efficiently manage a significant amount of data, including product images, descriptions, and customer feedback. It’s essential that the product catalog is presented in a clean and organized format. The design is crafted to be a reusable framework, allowing it to be adapted for other similar sites with the same genre and purpose.

UX Research

Life is better by the camp fire.

Before diving into any design work, I did some research of potential users that will most likely purchase camping/outdoor gear online. Even if I stumble upon something cool that doesn’t scream ‘UX/UI,’ I’ll jot it down because you never know—it might come in handy for our buddies in other departments. Sharing these gems with project managers, developers, and fellow designers keeps everyone in the loop and nudges us all to think about the users rather than our own wild ideas.

Since we’re crafting a brand-new website without any existing traffic or analytics to peek at, I have to rely on latest industry research reports, consumer trends, surveys etc. for my UX research. Below are some key findings.

Key Findings

· 55% of campers are male while 45% are female
· The age range 24-44 makes the largest group of camping participants
· Whites makes the largest group of campers with a whopping 78%
· Adults with children will more likely go camping than adults without children
· Most campers will plan their camping trip an average of 25 days in advance
· Most campers prefer camping grounds that are close to home (less than 50 miles) and affordable
· Camping trips per season are fairly evenly spread out. However summer and winter are slightly popular than fall and spring
· The top 3 activities to do during camping is hiking followed by outdoor cooking and fishing

· Running/jogging, fishing, hiking, cycling and camping are most popular outdoor activity among adults age 25-45+
· 57% camping participants are employed followed by 27% who are students or homemaker
· Married couples or people living with a domestic partner makes the largest group of campers at 67%
· Majority of campers participated in outdoor recreation while only 12% participated in just camping alone
· 71% of campers prefer pitching a tent than renting a cabin or RV
· 68% of campers go camping with their spouses followed by a close 65% who go with friends
· 78% will bring along their smartphones while camping for texting purposes
· The top 3 camping purchases are flashlight(48%), cooler(42%) and followed by backpacks(30%)

User Personas

With the research I have gathered above I can finally narrow down to 2 initial user personas that represent the potential customer demographic. I did further UX research to gain insights into online consumer habits and behavior of these personas.

How UX Research Influence
The UI Design

Since the top words associated with camping (by camping participants ages 18+) includes “outdoors”, “adventure”, “escape” and “smores”, I decided to approach the UI design with a narrative that depicts the outdoors through imagery of trees, textures of rocks, natural earth-tone colors, family and friends around tents, camp fires and popular outdoor activities. Below are examples of how the UX research affected my UI design decisions.

Things to Consider

· Images of married couple with their kids or a group of young adults as campers are ideal
· Include images of top outdoor activities like cycling, hiking, fishing to increase user interest
· Outdoor gear can range from running shoes to tiny fish hooks and huge long canoes; divs should be different sizes to display odd-shaped products.
· Add facebook, snapchat, instagram and twitter share icons as it caters to our users age 24-29 group
· The UI must include modules like product description, product images with multiple views to cater to our crucial user group; male, 25-44 age group, $100,000 income bracket
· The UI must include customer reviews and photo gallery modules of actual customers to reinforce positive emotions with social proof
· A page for blogs and articles should be added to cater to both user personas

Things to Avoid

· Avoid images of campers that does not belong to the personas example; a Hispanic lady in her 60s or a group of Asian teenagers
· Avoid images that shows RV and cabins as majority of campers look forward to pitching a tent
· Do not include images of windsurfing, hunting (handgun) and kayak fishing as these are one of the least popular outdoor activity by participation.
· Avoid titles and text copy that mentions getting away from technology like "Let's wander where the wi-fi is weak". The majority of camping participants do bring along their cellphones to text during their camping trip
· Primary product images should have no background. Isolate all products items on a white background for a clean, clutter-free user experience.
· Do not hassle the user with only one sign-in option. Integrate sign-in with Facebook and Gmail.

Visual Design Spotlight

In order to create a theme that is unique, I decided to produce a series of backgrounds with merged images instead of the usual rectangle background we usually expect from responsive websites. The aim for this ambitious direction is to depict a "storytelling visual outdoor narrative" as the user scrolls down. Below is an example of the visual treatment that I did.

65% of campers go camping with friends so I chose an image of a group of tents. The dark night background makes it easy to read the h1 heading.
Featured products shown immediately after the hero section to increase visibility.
Fishing is one of the top 3 activities during camping.
Adults with children will more likely go camping. Married couples makes the largest group of campers at 67%.
Cycling is one of the most popular outdoor activity among adults age 25-45+
A girl canoeing is included to indicate the wide variety of products the website offers.
A looping campfire video to evoke the look and feel of being outdoors. I can almost smell the burning of fire wood! 😀