OVERVIEW
CANOPY.com is a concept piece for a REI based website that allows its users to organize and coordinate camping trips and other outdoor activities. There has been a decrease in camping activity in recent years due to outside obstacles that made it difficult for users to camp. This website concept is a way to relieve such obstacles.
DISCLAIMER: CANOPY.com has no affiliation with REI and is a concept website done during my time as a full time student at General Assembly
MY ROLE: UX/UI Designer & Researcher, Usability Tester
MY TOOLS: Sketch, InVision, Illustrator
THE CHALLENGE
Outdoor activities, even though common, can be intimidating. A common reason behind this trend is due to people not having enough time to plan and coordinate a camping trip, especially with larger groups.
THE SOLUTION
CANOPY wants to find a way to lessen the issues that are preventing its users from enjoying the outdoors. the company strives to make outdoors activities more enjoyable and easily accessible by providing gear, clothing, and a means of organization and communication
MY END TO END PROCESS
DISCOVER
WHO ARE MY USERS?
INTERVIEWS
Research information was collected by recruiting and interviewing potential users. The interviewees ranged from frequent campers to inexperienced campers.
DOMAIN RESEARCH
Domain research was conducted on comparative analysis conducted on competitive website, REI Adventures
Drawback of REI Adventures:
REI Adventures (2015) design was outdated and did not match REI’s main branding
REI Adventures (2015) lacked a onboarding process. It was unclear on how to start planning a trip
User unable to share their itinerary on REI Adventures
AFFINITY DIAGRAM
Interview data was organized into an affinity diagram to gather valuable insights on our potential users.
PERSONA
The persona, Chanel, was developed to represent the predicted user base
Chanel, the persona
DEFINE
WHAT WILL MY USERS NEED?
Based off the information gathered from the DISCOVER phase, we established a list of essential features to meet the users’ needs and goals.
INFORMATION ARCHITECTURE
Before design, the structure of the website’s logic was established with a site map
Main screens were: Home, My Account, My Trips, Plan A Trip, and Shop
USER FLOW
The users’ interaction with the features was drafted with a user flow.
Success points were identified as: booking a location, sharing a trip, and purchasing gear
DESIGN
WHAT WILL THE PRODUCT LOOK LIKE?
INITIAL SKETCHES
Sketches were done with marker and paper to determine overall layout of the website.
Layout sketches
FIRST PROTOTYPE
After the general layout was sketched, higher fidelity screens were made using Sketch.
Prototypes’s Features
A brief introduction to the website purpose was listed on the log in page to onboard the user
Design elements were based off REI’s 2015 website design
User is able to purchase items and share their trip with others
User is able to read reviews of a location, see availability and rates before booking
Checklist allows the user to see all aspects of their itinerary
User can send messages to trip members
User can browse and purchase gear
The clickable prototype was done using InVision.
Home/Login page
Browsing campsites
Itinerary checklist
Buying gear
TEST
WHAT DO MY USERS THINK?
USABILITY TESTING
After receiving consent, usability testing was conducted using the prototype on InVision and potential users were screened by their camping experience or camping interest.
The recruited users were given a number of tasks to complete through the website:
1) Begin coordinating a camping trip by searching nearby locations
2) Add an activity to their itinerary
3) Share their itinerary with group members
4) Shop for supplies and checkout.
Testing data was collected using QuickTime audio and screen recorder.
ITERATE
HOW CAN I MAKE IT BETTER?
DESIGN UPDATES
After testing, iterations were done on the initial prototype based off of the feedback gathered from usability testing
The visual design was redone to follow REI's style guide and aesthetic.
Introduction was moved to the bottom to avoid distracting the user from the main login feature
Contrast was adjusted to improve visibility
WHAT’S NEXT?
Further testing of the updated prototype will help identify areas that need improvement and bring about new solutions towards to higher fidelity prototype. Additional research on the behavior of campers and planners will help improve the information architecture of the prototype as well.
With REI-Canopy, outdoor enthusiasts of all levels will be able to explore their hobby and create new outdoor experiences with others.