Completed November 2012
roles: Art Director, Interaction Design

Honda Powersports

Learn To Ride

Collaboration with the Dailey agency in creating a learn-to-ride microsite to position Honda as the leading resource for new riders.

Go to Website
Background

Honda’s Learn to Ride program is the ultimate resource for anyone curious about motorcycling, giving non-riders an easy path to becoming new riders.

Demographics

Gen Y and late gen X digital natives with average 400+ friends on Facebook. Not mechanically inclined and want the benefits of riding without all the maintenance and very budget conscious.

Goals

Disruption: create a digital experience that stands out in the category
Product Linkage: connect new riders with the right bike from Honda, at the right price.
Evangelism: transform our target into riders. Chronicle the experience, and give them ways to share it.

Strategy

Educate people on process of learning to ride while making it easy to complete each step with some reward upon completion.

Results

The project was an awwward.com nominee and the site is still in use by teaching centers and instructor as a easy tool to navigate the step of becoming a rider.

User Experience
Progressive Navigation

From the beginning of the project we understood we would need some sort of progress bar for users to visually understand the process while maintaining the ability to jump ahead which would cover multi-use cases.

User Journey

Assist in narrowing down milestones and objectives a user would need to accomplish throughout the process.

Phasing Site Map

Once we had the user journey ironed out. A general map was created in order to align all the parties involved on the expectations of each phase.

Wireframes
Ideation and IA

Created brainstorming sessions to focus on the important content that would be needed for each step of the process. Once we had our organized buckets based on sections, we took a story telling approach thinking of each step as a chapter and how the movement of the layout needed to be relevant in presenting the details within the chapters.

Brainstorming

Working threw the functionality of the process nav and the movement which would be activated per each step.

Key Features

We wanted to embed key features in the micro-site so it would be easier for the user to:
A. Find a course near you
B. Get the driver test guide and find nearest DMV to schedule exam
C. Gather bike and gear preferences to generate sales leads
D. Ability to share each milestone on Facebook to get social encouragement

Find a Course & Driver's Test

Worked with MSF and DMV to plug in there API to allow users to find the nearest location by way of dropdown and selecting their state. 

Trade-Off

We were striving for a more robust feature, where users could narrow locations by city and zip surfacing a Google map. But the MSF and DMV APIs were not as open as we had hoped. The feature became a scope creep and we decided to strip down to the essentials.

Find Course Spec

We used the same approach for the DMV section.

Execution
Bike & Gear Leads

This section was the most complex in terms of functionality and clear flow. We utilized two different tab systems to make a clear distinction between a choice and a step. The horizontal tabs allow the user to select a motorcycle style. While the vertical tabs are steps in the financial process.

Once the user completed this portion a dynamic form was packaged and sent to the sales department at the nearest Honda dealer.

Find Course Spec
Execution
Art Direction
Open Space & Bold Photography

The signature characteristic for this approach is size. Everything is big. The site scales to the size of your browser and it walks you through each item one step at a time.

Mood Board

Open Space is about freedom and endless borders. Using action photography with a bold coloration treatment on the subject and road textures to give a lifestyle realism. The guest can be immersed into a full frame experience that conveys the lifestyle awaiting upon completion. Navigation stays locked on top left corner, with accordion style functionality as guests complete each step.

Final Photography

We knew photography would be key in captivating the lifestyle, so we searched through Honda's archives for some of images. Then setup a shot list for the remaining ones.

Textures

Asphalt and concrete was used to enhance the road warrior look.

Fonts

Aachen and Urban Jungle have a racer bold aesthetics.

Video Content
Honda Ambassador
Video Host

A motorcycle experienced actor will be the Honda ambassador which will act as the guest trusted guide through the learn-to-ride experience.