Project 2 — MEC AWAY

Note: Student Project — Academy has no affiliation with MEC

Problem

BC Parks has shown a 2% decrease in visitors to camping sites for the past several years. There is a concern that Canadians are starting to lose interest in camping as people are being drawn to staying indoors.

Solution

Create a web app to meet the changing technological needs of individuals. MEC is a company that prides itself in staying up to date with the latest cutting edge technologies.

Goals

With a limited 1st year budget for MEC AWAY, the objective is to create an app with little resources. Although innovation is one of the core tenets of MEC’s products, we are not trying to reinvent the wheel. However, the design and experience of the site will be unique as it will be consistent with the company culture, branding, and high level of service.

Keys to success — simple, direct, and to the point. Remember, the question you should always consider when designing — can it be readily developed by the developer? Is it realistic? Good design is effective design when the vision can be shared to all departments of our company. With that being said, let’s look at the key targets of MEC AWAY:

Design Process

Research

Resources

MEC Annual guides (2012, 2013, 2014)

The Marketplace

The goal is to create a web based app that offers a camp site booking experience coupled with merchandise shopping. I had to research sporting good stores and online campsite booking sites to analyze the landscape:

As seen in figure A, stores such as Canadian Tire and REI offers products but not a booking service for campsites. Below is a visual summary of the main pros and cons.

Canadian tire have not disclosed any plans to expand into the camping/travel market.

REI offers hiking and camping guided tours. There is no option to book your own camping trip.

Go Camping BC & BC Parks focuses on campsite bookings only. They do not sell merchandise nor offer recommendations to stores.

The opportunity

I decided to offer an experience that allows users to book a campsite and purchase gear all in one sitting. It’s new and innovative that has never been done before.

Survey and User Interviews

The next step was to determine what type of information and features to put in the web app. To help me better understand the potential users of the app, I conducted extensive research through user interviews and a 10 question survey:

Results

User Personas

I developed a primary user persona named Nick based on 5 user interviews and a survey posted on various Facebook Groups. The majority of the respondants have a keen interest in exploring hiking trails. Although MEC AWAY’s target market is for outdoor enthusiasts with a medium to advanced level of camping experience, it is also suitable for non-experienced campers with a keen interest in hiking; I developed a secondary persona named Connie to reflect the latter.

Affinity Diagram

Brainstormed ideas using the affinity diagram technique.

Design

Design Psychology and Approach

I decided to use the Airbnb inspired design for MEC AWAY as part of my prototype. Why? It has garnered worldwide success and is still growing; elements of the success include excellent typography, visuals, and information architect. I wanted to implement a similar approach to gauge the most appropriate design.

User Flow

Initial sketches

Medium Fidelity Mockups

The Parks BC camp booking site currently feels stiff, stilted, and rigid. There are too many required fields to be filled out before search results can be populated. I wanted MEC AWAY to give an unassuming, welcoming, and cozy first impression for campers.

I was inspired by Airbnb’s site design and wanted to adopt a similar approach for the User Interface (UI) and then test the design. It was never intended to be the final design; for testing only purposes to see if users felt it would be deviating from the MEC branding. Would it turn away existing customers or would it attract new customers? Other designs originally sketched would be prototyped as well. I prefer to have at least 2–3 different designs and then choose the best one.

Site Map based on original prototype (before testing)

Prototype

The prototype was done on medium fidelity with the airbnb-inspired mockups. It would have been ideal to test using my final design UI; but with only 2 weeks to complete the project, I decided to move forward and commit to the prototype and testing before it was too late. Remember this was not the final design; for testing purposes only.

Testing

Conducted testing on first prototype with 4 users. Feedback received:

• Looks identical to Airbnb; not original
• Transition between checkout and MEC.CA is not seamless
• hierarchy of information needs to be rearranged from most important to least important; Eg. Amenities, activities, features
• No back button to get back to previous page

Iteration after testing and feedback

After hearing feedback that a couple of the site screens look too identical to airbnb, I proceeded to redesign the UI. The fonts and layout are true to the MEC branding; the site now flows better because of the consistency in design.

Notice there is now a sub navigation bar with 3 items: Booking, Info, and Reviews.

Summary of goals

Next Steps

• Conduct further testing on other variations of UI designs.
• Conduct additional testing on usability
• Research more on MEC.CA and MEC AWAY checkout integration. A smoother transition between platforms is desired but will depend on budget and project costs
• MEC AWAY is still in the beta testing stage; budget will be increased if it increases sales in the backcountry business division by 7% within 12 months.