We ensure that Honda Motorcycles is the engine of Colombian society because we discovered that a motorcycle is more than a vehicle. Honda Motorcycles are dreams that come true. We designed the new Honda Motorcycles website with user centered design between calls, meetings and workshops in Cali and Bogotá, this is the story behind the design and technology team creating high-quality experiences for everyone.
The challenge
Despite encountering initial challenges, the marketing team at Honda identified three key goals that guided our approach to redesign the website’s UX and these goals include:
- Create and explore new sales with the website
- Design a mobile first and modern world class website
- Generate valuable metrics based on understanding the digital personas
Purchase a motorcycle in Colombia have many obstacles and the website also does not help to the users goals. We identify that the photos of the motorcycles were old, the website had only a desktop version, the pricing was not clear, and the look and feel was not aligned with the Honda Motorcycles websites around the world in other words we needed a new website.
I started to review all the data and I discover that 80% of our users navigate especially with their mobile phones. Honda needed to integrate a CRM based on inbound marketing to generate leads and of course get data reports to impact the business. So the development team decided for a new technology to support all the features that we started to discover in the process.
However we had six months for the new Honda Motorcycles UX design and all the coding in the new website. We faced another challenge, the agency and the client had a team unaware of agile methodologies, Scrum, and Design Thinking.
The Process
Goals and Benchmarks
We align and define the KPIs with the client. I explained all the process of the new Honda Motorcycles redesign and at this point we started with the co-creation of the future of the website with User Centric in mind.
We created a Benchmark with Honda Motorcycle websites around the world, some competitors in Colombia and brands that inspires us with their digital assets. I performed an Heuristic evaluation to understand the website and some tweaks that we needed to include.
User Personas
We perform at least 10 interviews with stakeholders, salesmen and people who daily serve clients who wants to bought a motorcycle. I visited 3 motorcycle stores, one of them a luxury store because the website needed a division between regular and premium motorcycles. Later we started to create a proto personas based on the empathize phase that we archived. I found 6 personas but we centered the design in just 3:
- Los chicaneros and full gas: people with skills, motorcycle experts, and participants of motorcycle communities who roads over the country
- Los moto-millennials: young people tired of public transport in large cities who use the motorcycle to get to work or university
- The Ants: people were living off their motorcycles, such as messengers, delivery workers, and motorcycle taxi drivers
Workshops
In the definition we had 4 workshops in Bogotá and Cali, we co-created the vision of the new digital experience for Honda Motorcycles website with the stakeholders. During the workshops, I spoke with experts in logistics, workers of the factory, premium sellers, providers, digital teams and traditional marketing teams.
We worked together with the CRM agency in charge of the inbound marketing and lead generation. I worked with the social media strategists to create a full panorama of the redesign. We even had the opportunity to speak with famous Honda Brand ryders in Colombia, Tatán Mejía and Juan Reyes.
Information Architecture
The information architecture was another interesting challenge because the SEO and SEM strategy requires validation of different areas involved in the creation. The marketing team understand the differences between the navigation in the website for the users and the motorcycle client product in references. We had 6 different iterations keeping in mind our user needs and business legal requirements.
Paper Wireframes
In each workshop, we recorded the ideas in paper “wireframes”, having a puzzle of the Honda motorcycles. Then we unite with the team all the pieces to have a first draft of the website with the proto personas, the initial understanding of our users goals, needs, characteristics, frustrations, and personalities.
With this validation, the proto personas and other interviews, we understand the needs of our users, the use of the web, the context in which they would use, and the different categories of motorcycles that the brand offers.
Accesibility (A11Y)
In addition to improving user experience, integrating WCAG 2.1 A into the Honda Motorcycles Colombia website ensures compliance with legal requirements. Many countries, including Colombia, have laws and regulations that mandate equal access to digital platforms and services for individuals with disabilities. By aligning with these accessibility standards, Honda Motorcycles 🇨🇴 demonstrates its commitment to inclusivity and accessibility, reinforcing its reputation as a socially responsible brand.
Prototype
I designed the entire user flow in medium fidelity wireframes with Sketch, then I assembled the prototype in Marvel App to test, based on the information architecture, proto personas and wireframes that I already have.
The new Honda motorcycles website was too diferent from the previous, so I tested it with real users; the new information architecture, the new features, the new categories, and the new services.
User Research Test
My main goal was to create a usability tests with 12 people distributed in 4 of each segment. It was a complex job to set up the tests because I adapted a meeting room as a research laboratory; I covered all the windows, connected an external TV with sound where the client would be watching the process in real time, and prepared the testing software. For the user research I use this tools of Design Thinking and we run the tests with:
- A semi-structured interview to validate the UX persona – 10 min.
- A usability test using the mobile prototype – 10 Tasks ~ 30 min.
- A card sorting to validate the information Architecture and users’ mental model ~ 20 min.
Visual design
I created 3 Style Tyles with the help of art directors of the Honda Motorcycle, and together we define the new site’s look and feel. And I think, uhmm we are near to the end…
I created the visual language, the visual schemes, the layout and the interface design with a UI kit to extend all the possibilities to creative team, that supports Honda Motorcycle client.
Content design
We validate the content to the website; the client told us that many of the bikes had changed, the product team added new editions of motorcycles and eliminated others.
At this point the creative team took new pictures, created a 3D photos for the website and designed the headers for ~70 motorcycles. The client wants a personalized image based on the main characteristics of the Motorcycle.
With the help of Dani (account executive) in a midnight hackathon we get all the specifications for the motorcycles, adjust the content and create a new ones.
And finally we delivered the main mockups in Mobile and Desktop to the front-end and back-end developers who used Angular JS and Laravel for the Honda motorcycles UX website.
The Results of Honda motorcycles
On February 5, 2019, we launched the first version of the Honda motorcycles website with a huge impact in their digital sales. The digital marketing team sell more motorcycles than 5 physical stores of Honda Motorcycles.
We increased site visits by 250% in Mobile with a fully responsive website and reduced the bounce rate by 25% with a modern technology and with the standards of the international brand of Honda Motorcycles UX.
We connected the entire inbound marketing strategy with CRM agencies, lead generation, analytics, data generation, and social media networks. This process helps us to understand the end-to-end digital journey of our users.
Update 2023: The original idea of the site that I created remains however I am no longer working with this client and the current site does not reflect my thinking and work on how to scale this design.
What I did Honda Motorcycles?
- Design and moderation of Workshops
- UX persona and features prioritized based on the empathy map
- User research moderated with motorcycle users of the brand
- Wireflows, prototype and low medium and high fidelity Wireframes
- UI Kit, mockups for mobile and desktop versions, including 25 templates and guidelines on how to scale the design
- Accesibility (A11Y) guidelines following the WCAG 2.1 and A criteria
- Create ordering the design and development product backlog
What I learned?
- Many stakeholders in the project will be more diverse, but the team can lose focus
- Changes in the marketing team and content always affect the UX of the website, I learned how to handle this
- Creation and content design always takes time, especially in companies with too many products and photographs
- Motorcycles move the economy of the most humble people, especially in countries like Colombia
- The Scrum methodology is a good idea if you have resources and people dedicated to the project
Dates
April 2018 – January 2019
Honda Motorcycles Team
- Rubén Ávila H – Product Lead Designer
- Santiago Robledo – Account Director
- Luz Angela Palomino – Honda Lead Project
- Gabriela Rey – UX Designer
- Cristian Paez – PHP Backend Developer
- Steven Piñeros – Front End Developer
- Diego Rodriguez – Art Brand Director
- Wunderman Thompson – Creative Designers
- Honda Digital Team