The Wonderful UX Design Process For Honda Motos 🇨🇴

Honda Motos UX Design Process RubenAvilaH

Client

Honda Motorcycles Colombia – Fanalca

Date

April 2018 – January 2019

The Challenge

Honda Motorcycles wanted to change their entire website for three reasons:

  1. What would a Honda motorcycle e-commerce look like in the beta version?
  2. How can we make the website more modern and mobile-first?
  3. How can we make the website faster and generate valuable metrics for the business?

The new website needed a high-level experience because the motorcycle market has many barriers to purchase, and the price is a factor in the decision of a motorcyclist when buying. We needed to change the look and feel of the entire site and make it mobile-first 80% of users browse on their cellphones.

The website needed a new technology to support all the features when integrating conversion funnels with the agency in charge of CRM; this is because the website will help us generate information for digital marketing campaigns.

We have only six months to redesign the entire website (design and code). The work process was complex since the agency had a team unaware of agile methodologies, Scrum, and Design Thinking.

Workshop with Stakeholders defining main features of website (left) mapping the current digital Journey Map (right)

The process

Wunderman Thompson hired me as a UX Designer Consultant, I started creating meetings to align and define the KPIs with the client, I explained each of the steps of the site redesign process and then we started with the co-creation of the future of the website with User Centric in mind.

Benchmark and Information Architecture

In the first meetings, we presented a benchmark of their competitors who already had e-commerce and references of the Honda Motorcycles brand internationally (Japan, Spain, India). We mapped each of the site’s essential characteristics and the Information Architecture, which changed until reaching six iterations of the sitemap and navigation.

Workshops

Honda is a great company; we held workshops and co-created the future of their website with all the stakeholders in the observation phase. During the workshops, I spoke with all the stakeholders; experts in logistics, premium motorcycles, vendors, digital, and traditional marketing teams.

Workshop of definition with the CEO and C-Level of Honda Motos. Empathy map of one of the personas UX(Left) Designing the User Personas (Right)

We work together with the other CRM agencies, lead generation, and social media strategies to have the complete picture of the redesign. We even had the opportunity to speak with famous Honda Brand ryders in Colombia, Tatán Mejía and Juan Reyes.

Paper Prototyping & People

After each workshop, we recorded the ideas in low-fidelity-paper prototypes like a puzzle that we put together with the stakeholders. We designed proto-personas based on the data collected from interviews and workshops to get an initial idea of ​​the brand’s users. With the proto-personas, we understood our users’ goals, needs, characteristics, frustrations, and personalities. Here we discover three types of users:

  1. The Chicaneros/Cacharreros, people with technical skills, motorcycle experts, and participants of motorcycle communities who roads over the country
  2. The Moto-millennials, young people tired of public transport in large cities who use the motorcycle to get to work or university
  3. The Ants, people were living off their motorcycles, such as messengers, Rappi delivery workers, and motorcycle taxi drivers.

With this information, we begin to understand the different needs of each user, the use they would give to the web, the context in which they would use, and the different categories of motorcycles that the brand offers.

Personas UX Honda Motos. The Cacharreros/Chicaneros (Left), The Moto-millenial (Center), The Ants (right)

Prototype

Validating the information with the main stakeholder, I created the functional prototype. I designed the entire wireframe flow in half fidelity with Sketch and then assembled the prototype in the Marvel App.

In this way, we explored the best way to solve the site’s problems based on the information collected from people.

The new design differed from the website, so I tested it with real users; the new information architecture, the new features, the new categories, and the new services offered.

See the Live Prototype tested with users.

Usability Testing

I created the 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. I designed the scripts and tasks and did the test that consisted of:

  1. A semi-structured interview to validate the UX persona
  2. A usability test with ten tasks using the mobile prototype, 
  3. And a card sorting to understand the users’ mental model. 
Usability Test with the prototype. 3 Scenes of the videos recorded with the usability tests with users of Honda Motos.

Later, I made a summary reporting that 85% of the new design worked correctly, and some changes we needed to create in interactions were unclear.

Visual Design & content:

At the end of the user research phase with the users, I created three StyleTyles with the help of Art directors of the brand to define the site’s look and feel, and I thought that everything was over.

We started to validate the content to the website; the client informed us that many of the bikes had changed (The Product team added new editions of motorcycles and eliminated others). We had to take new pictures, design all the specifications, adjust the content, and design it specifically for 70 bikes. We had a turning point in the project because everything was going very well.

Still, we had to adjust the schedule ask for help from more designers to start building the new Specs bike by bike on the site. We delivered all the website mockups in Mobile and Desktop to the front-end and back-end developers who used Angular JS and Laravel for the new website technology.

Workshop and final Style Tiles. Workshop of Design Principles (Left) and the selected option for the Visual Design of the Website (Right)

The result

On February 5, 2019, we launched the first version of the Honda e-commerce beta to test how the company’s system and processes would scale.

We designed a responsive mobile website with the standards of the international brand of Honda Motorcycles.

We changed the technology to a modern one, increased site visits by 250%, and reduced the bounce rate by 25%.

The digital marketing area of ​​Honda motorcycles had few people and began to sell more motorcycles than ten physical stores; this allowed the company to make better decisions using digital resources and increase its execution budget.

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.

https://motos.honda.com.co/

What I did in this project

Design and moderation of Workshops, UX Persona Design, User Research, Wireflow Design and Low, Medium and High Fidelity Wireframes, Medium Fidelity Prototype, the Design System of the complete site.

Create and maintain the product backlog.


What I learned

  1. With many stakeholder voices, the project will be more diverse, but the team can lose focus. 
  2. The Scrum methodology is a good idea if I have resources and people dedicated to the project.
  3. There are changes in the marketing team that will always affect the UX of the site. I learned how to negotiate this.
  4. The design, review, and content adjustment take time, especially in products with many photographs and angles.
  5. Motorcycles move the economy of the most humble people, especially in developing countries like Colombia.

Tools

Post-it, Sharpies, Many sheets of Paper, Sketch, Zepplin, Marvel.

Work team

Rubén Ávila H 🔗 – Product Designer UX Design, Visual Design & Scrum Master

Santiago Robledo 🔗 – Account Director

Luz Angela Palomino 🔗 – Honda Lead Project

Gabriela Rey 🔗 – UX Designer

Cristian Paez 🔗 – PHP Backend Developer

Steven Pineros 🔗 – Front End Developer

Diego Rodriguez 🔗 – Art Brand Director

Wunderman Thompson – Creative Designers

Honda Digital Team

Release event with the Stakeholders. With this event we finished this stage of the website. José Fernando Londoño Vicepresident of Honda Motocicletas Colombia and Luz Angela Palomino Digital Experience Manager