Ｃａｍｐｅｒｓ　Ａｐｐ

An online camping supply platform
Campers app is an online camping supply platform, it provides campers with comprehensive camping support such as camping supplies, experiences, and advice.
Project duration
Mar 2024 - May 2024
My role
UX designer
Responsibilities
User research
Interviews
Competitive audits
Storyboard
Wireframing
Mockups
Prototyping
Usability studies
Accessibility
Iterating
Tools
Figma
Adobe Creative Suite
The problem
New campers often have difficulties when shopping for camping, including the camping supplies list and how to choose the right items.
The goal
The goal is to provide sufficient support for camping purchases, including a camping planner, camping knowledge base, personalized product recommendations, worry-free after-sales service, etc.

Understanding the user

➤  User research: Pain points

The goal of this user research is to discover the needs of potential users and summarize their pain points when purchasing camping products. The survey targets people aged 18-55 who have camping experience.

Efficiency

Some users will re-order products from previous orders, and many repetitive user operations can be simplified.

Experience

Many camping novices have difficulty purchasing camping items due to lack of experience.

Assistance

Some campers lack guidance and advice on camping.

Service

Many shopping platforms have poor warranty and return procedures, and some even cannot track the progress.

➤  Personas

Problem statement:

Neelam is a teacher who needs to order camping supplies easily because he is usually busy, and the camping supplies he orders are very similar.

Problem statement:

Zarren is a university student who needs recommendations while shopping for camping supplies because she lacks camping experience, and she doesn't know how to choose from different items.

➤  User journey map

Mapping out the flow of Neelam and Zareen’s user journey revealed the benefits of providing campers with online purchasing of camping supplies.

➤  Value Proposition

Features and benefits

Value of the product

  • Accessible
  • Newbie Friendly
  • Professional
  • AI Solution
  • Worry - free After Sales

Specific value proposition

  • It only takes 5 seconds to order from history.
  • 7 days free return and 14 days free replacement
  • Optional extended warranty
  • Detailed and easy product descriptions & advice
  • List of products with comparison marks/compare tool
  • Smart Camping Plan Generator

➤  Competitive Audits and Report

In the competitive audits stage I picked 3 direct competitors including REI Shop, Backcountry, Cabela's; and 2 Indirect competitors including ARC'TERYX and DECATHLON. Then I compared and analyzed from the following aspects:

  • General Information (Location, Price, Business size, Target audience Unique value proposition)
  • First impressions (Desktop website, mobile website, App)
  • Interaction (Features,  Accessibility, User flow, Navigation)
  • Visual design (Brand Identity)
  • List of products with comparison marks/compare tool
  • Content (Tone, Descriptiveness)

‍

Please refer the links below for details::

Starting the design

➤  Main user flow

➤  Storyboard

Use the app to shopping for camping supplies with recommendation - Big picture

Use the app to shopping for camping supplies with recommendation - Close up

➤  Paper wireframes

Select elements from 6 layouts and combine them into the final wireframe.

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

For the home screen, I kept only the 3 most important features including universal search, camp planner, and common categories. And the most important tabs are fixed at the bottom of each page.

Final wireframes.

Key screens including:

  • Homepage
  • Search list
  • Product Page
  • Category
  • Cart
  • Knowledge base
  • AI solution - info collection
  • AI solution - camping plan

➤  Digital wireframes

Product page

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Camping planner

The camping planner generates AI camping plans for users based on their basic camping information. Compared to the traditional checklist, this planner will generate a plan by weather of the camping site, the number of people etc. to generate a more suitable plan for the user.

Knowledge base

The knowledge base[Camping Guides] provides a learning space for novice users, and there will also be links to KB on the secondary page of the product category, so that it is convenient to answer users' specific questions.

➤  Low-fidelity prototype

Link of Campers app Low-fidelity prototype

Prototype Instruction:

  1. Try purchase: Category(2nd@bottom) - subclass - search list - product page - Cart(3rd@bottom) - Checkout - submit order - back to home
  2. Try Camping guides: camping guides(4th@bottom)
  3. Try Camping planner: camping planner(homepage)

➤  Usability study

A usability study helped me understand how well the product can help users make decisions and if the main user experience is easy for users to complete, and I used Conversion rates and SUS as KPIs.

Round 1 findings

  • Simplify Camping Planner information filling & visual stress
  • 'Advices' may be more important to some people than Camping Planner
  • Offline stores or experience stores are also very beneficial for an online store

Round 2 findings

  • Clothing doesn't need a warranty
  • 'Camping checklist' is a better name for 'Camping plan'
  • Loading state is important

Please refer the links below for details::

Refining the design

➤  Brand name and logo design

Brand name

As a caping product supply platform, user-centered thinking gave me the inspiration for the name "Campers". Campers are our users, and it's what camping lovers call themselves.

Logo design

During the logo design phase, I considered several aspects. First, as a new brand logo, it must be easy to remember, so I adopted a design method that mainly uses the brand name and adds realistic elements. The most important thing related to camping is definitely the tent, and then in order of importance, it is ground, camper, trees, mountains, river, and clouds. In order to keep it simple, in the early stage of the design, it was determined that only the brand name (also represents the ground and the camper), tent, and trees would be retained.
‍
For the style of the logo, because camping is an activity that is very close to nature, it should bring the natural feeling, which means using natural elements, natural curves, and natural colors.

➤  Mockups

Mockups design

At the beginning of the design, I thought about what color tone a camping supply brand should be? I think camping is to stay away from society and integrate into nature. So it must be natural colors. The color of leaves, the color of the sky, or the color of the earth. But these colors are used by many competitors, and I want something special.​

Then I started searching for photos related to camping to get inspiration, until I saw this banner picture. I think the biggest charm of camping is to spend the whole night in the wild, because daytime activities can also be done on weekends, and the outdoor night is unique to camping.​

So I chose dark cyan as the main color and orange as the accent color. It is very difficult to use dark colors for a sales platform because the product pictures are all taken on the white background, so I put a lot of effort into the design details. Fortunately, from the final effect, I think it's great.

➤  Sticker sheet

➤  Hi-fidelity prototype

Link of Campers app Hi-fidelity prototype

Hi-fi

The Hi-fi followed the same user flow as the Lo-fi, and included the design changes made after the usability study, as well as several changes suggested by users.

➤  Accessibility considerations

The three main accessibility considerations are as follows:

  • The design system ensures that all text and interactive areas have sufficient contrast and text legibility. Icons are used overall to help interpret the meaning.
  • There are highlights and animations to let users know the key information, and what to do for the next steps. The button area is big enough to easily tap.
  • Many helping functions such as camping planner, top categories, personalized product recommendations, smart search, multiple filters and sorting, two product views, size reference, wishlist, detailed menu classification, Advice articles, etc.

Going forward

➤  Takeaways

Impact

Compared with other outdoor product sales apps, Campers focuses more on helping camping novices. Through research, I found that many camping novices have difficulty in purchasing products, and they are not even sure what to buy for camping. Therefore, camping planner can fundamentally alleviate user pain points, recommend camping checklists based on users' camping information, and promote users to purchase products on the platform.
‍

What I learned

I learned a lot of details about the early stages of UX design, especially about persona, journey map, value proposition, and storyboard design.

➤  Next steps

This is an exercise project, I hope to have the opportunity to implement this product in the future and continue to improve the following aspects:
‍

Functional and interactive

Filtering and sorting functions, information pages, product order and tracking related functions, comment and rating system, coupon, payment verification, multi-language, product sharing, interaction details and information feedback of each component, etc.
‍

Marketing strategy

Reward and point strategies, specific product recommendation and search sorting algorithms, camping planner’s AI and big data algorithms, after-sales processing procedures, discount and promotion strategies, warranty strategies, etc.
‍

Content

Standardization of product information, establishment of knowledge base, privacy and legal terms, etc.

←→
chenggensen@gmail.com