A redesigned digital experience that fuels adventure, reflects Honda's precision, and drives engagement with powersport enthusiasts.
Overview
With over 66 million page views, and 15 million unique visitors per year, the redesign of Honda Powersports Website is the largest project to date that I have had the role of design lead. The project spanned 2 years from kick-off to site launch, and was an exceptional opportunity to work closely with key client stakeholders, and with fellow cross-functional team leads, to achieve a successful end product.
Challenge
For Honda Powersports, all roads (and off-road) lead to their website. Some visitors are long-time enthusiasts, others are non-riders experiencing the brand for the first time. We were tasked to deliver an inspiring and informative experience for both. Honda’s previous site was designed 8 years prior, so there was a significant opportunity to address any current issues they were experiencing and position the brand in a far superior space digitally.
The big ask was to give the new website a soul. The old site was good at providing information, but what it did not provide was the aspirational feel that these powersports products provide. Most people don’t need a motorcycle, ATV or Side-by-side – they want one to provide the excitement and fun lifestyle that comes along with owning one. So our focus was to sell the dream of riding a Honda. Most people think of power, adrenaline, masculine energy when they think Powersports. However, Honda isn’t about one audience, it’s about a lot of audiences. There is a huge gap between a MiniMOTO rider, Gold Wing, Utility ATV and Motocross riders for example. So the challenge was to provide an experience that was flexible enough to accommodate different product types and audiences, while still staying true to who Honda is: Friendly, fun, welcoming and inclusive to all riders.
Along with selling the dream, the another main goal was make it easier to complete the essential shopping actions that will get users to the right content faster. There was a particular focus on improving site navigation and having clearer hierarchy of actionable CTAs for the user to take their next step. Examples of these included; Find a Dealer, Search Inventory, Build Your Own, Current Offers and Find and Compare. Improving these aspects would naturally lead to increased lead generation for the client.
Approach
For the Discovery phase, the UX team undertook a comprehensive website audit and competitive analysis. They completed over 20 stakeholder interviews, and had an invaluable 2 years of on-site customer feedback, with over 6,000 comments, that influenced our decisions. This was key for defining the sitemap and wireframes to set both the project, and my task of design, up for success.
At the wireframe stage, a key addition to pages was the use of fixed CTAs, both on desktop and particularly mobile, to address the need to get users to where they want to go easier and quicker. Previously the mobile experience was poor, so it was a clear focus of our team to make the experience enjoyable and easy. A floating CTA bar was also proposed for the desktop homepage above the fold - again to provide the user with clear pathways to the products or tools they need.
Another important update was to split what was previously one product page into two separate experiences for the user. By having separate model and trim pages for products. The model page was to sell the dream with video and imagery and high level information, then the trim page was more specification focused, for users that want to dive deeper, and included feature specific content. This updated structure really allowed for us to cater to users in different parts of the ordering process, while not trying to address all user needs on the single product page, and running into issues of which content has higher priority on the page, for example.
When it came to the design approach, we had 6 designers internally produce design directions based on our discovery. Following internal revisions, 2 of those were eventually presented to the client stakeholders, and my design direction, named ‘Fueling Ambitions’ was the chosen design direction for the new website.
Solution
My design direction was to sell the dream, and bring the environments customers could ride to the forefront, so they can imagine themselves on a Honda.
Part of the success on the direction, is that it’s flexible enough to work on all models, while still being quintessentially Honda. As eluded to earlier, the challenge was Honda has over 70 products, ranging from motorcycles to ATVs and side-by-sides. So there was a balancing act with design to allow each product have it’s own personality, while still making the website unmistakably Honda.
Elevating the environments the customers ride was done a number of ways, for example creating full width almost immersive modules throughout the site for the incredible photography and video to take center stage.
I also expanded the color palette, bringing in environment tones of sand, dirt, track, forest and road. This help soften the previously stark red and white only website experience, and gave flexibility to customize each model page experience.
Speaking of bringing environment to the forefront, we created a new 3D configurator where users can build their own product by adding accessories. It launched with a default ‘Studio’ environment, and fast follows of ‘Off-Road’ and ‘On-Road’ environments are being released. It’s another way to add excitement for the users, and allow them to visualize, customize and interact with the models, in the environments they could ride them.
To create a more guided experience, animation, motion and transitions were used throughout the site. There was also the addition of new interactive modules on key pages to allows users to dive deeper on products, and also add some surprise and delight to the website experience.
Validated Designs
To ensure the chosen design direction was going to be successful, we validated it both internally with the client with their key stakeholders, and externally with end users.
Firstly, for the the internal feedback, we undertook as executive presentation to 31 identified key stakeholders representing all Honda Powersports internal support teams. We then created a follow-up survey to capture feedback on the visual design and functionality of a select group of core web pages. The results for the internal key stakeholder feedback an overall satisfaction of ‘High’. 95% of the key stakeholders answered high in response to the new design visually representing Honda Powersports. Some of their comments included:
- “Easy to navigate and different movement as you scroll through helps keep you engaged on the content.”
- “Layout and transitions give it a much more modern feel without coming off as feeling too edgy or flashy. Great job!”
- “Very clean and sophisticated.”
- “Video on the model pages is great.The site is very rich with images.”
For external end-user feedback, we conducted 15 remote, unmoderated usability tests on real prospective customers using usertesting.com. The users included motorcycle, side-by-side and ATV riders, new riders and enthusiasts, as well as testing on both desktop and mobile devices. Overall testers felt immersed, excited and engaged as they scrolled through the pages and watched the videos and animations. Most testers felt they could find the Information most important to them with ease. The results below speak for themselves:
- 15/15 Testers had positive feedback for the new website design overall
- 15/15 Felt the overall new home page felt exciting, engaging and professional
- 14/15 Thought the new animations & videos made them feel immersed as they scrolled the pages
- 13/15 Were impressed by the level of detail found within the model pages and the specifications list
- 13/15 Felt they could find the Information most important to them with ease
- 13/15 Felt the Honda Redesign Website exceeded other competitor sites
Some of the end-user comments included:
- “It actually exceeds it. I wasn't expecting the website to go this above and beyond as far as like, kind of images, clarity, the website, ease of use, and just good strong overall information”
- “They always do a good job of putting the user in their brain when they're creating these to make it easy so you're not having to search or look for things. So, I would put them a little bit above, you know, it's a little bit above the industry average”
- “ I like how the images on the page of this website that I'm viewing open up… like a sliding door opens up, makes for a very engaging website experience”
Results
It was a proud moment to see the website go live after 2 years of hard work, and for it to be validated by both immediate results for the client, and also by customer feedback, some of which are mentioned below, was very pleasing.
User comments captured from on-site customer feedback:
- “The site has unique and interesting ways of presenting the information and galleries without being clunky annoying or nonfunctional”
- “Very much improved site. Maybe the best yet”
- “Great website, with fantastic usability”
- “This new site is amazing”
- “Beautiful layout and simple”
The opportunity to work closely with key client stakeholders, and with fellow cross-functional team leads was invaluable, and has helped me grow as a design leader. Honda is a global brand, and to earn the chance lead the design on their US website was exciting, and all consuming, and one which I know has positioned me greatly to deliver exceptional results again on other enterprise level projects in the future.
Visit the Honda Powersports website here.