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.
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.
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.
Educate people on process of learning to ride while making it easy to complete each step with some reward upon completion.
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.
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.
Assist in narrowing down milestones and objectives a user would need to accomplish throughout the process.
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.
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.
Working threw the functionality of the process nav and the movement which would be activated per each step.
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
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.
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.
We used the same approach for the DMV section.
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.
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.
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.
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.
Asphalt and concrete was used to enhance the road warrior look.
Aachen and Urban Jungle have a racer bold aesthetics.
A motorcycle experienced actor will be the Honda ambassador which will act as the guest trusted guide through the learn-to-ride experience.