Stephanie Buno | UX & UI Designer
A UX & UI designer based in Seattle, WA.
canopy-card.png

Canopy

CANOPY.com, a concept website for outdoor enthusiasts

 
 

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

Screen Shot 2019-01-29 at 1.38.06 PM.png
 
 
 

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

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. 

 

View Full Documentation