Honda Pre-Order
Year: 2021
Role: UI
The Honda Pre-Order Tool is an intuitive platform designed to simplify the vehicle reservation process for upcoming models. Built within MotoCommerce, MotoInsight's digital retailing ecosystem, this tool seamlessly connects buyers, dealers, and OEMs, allowing users to place secure pre-orders with ease.
A key aspect of this project was leveraging the Deposit Module to generate excitement for new models while ensuring a frictionless transaction process. The goal was to create a structured, user-friendly experience that maximizes engagement and conversion rates.
Design Approach
I was responsible for the end-to-end design process, ensuring the pre-order system was intuitive, visually appealing, and conversion-driven. My approach focused on:
Optimizing the user journey to reduce friction and improve the reservation experience.
Creating a scalable UI Kit that aligns with Honda’s brand identity while remaining adaptable for future iterations.
Enhancing usability through high-fidelity designs, incorporating clear CTAs, progress indicators, and real-time feedback to improve engagement.
Designing responsive layouts to ensure a consistent, seamless experience across devices.
User Flow
The Pre-Order flow is a streamlined version of the full Motocommerce platform, designed for simplicity. Its core functionality enables users to select a dealership and place a deposit, making it an efficient tool for securing early commitments on upcoming vehicles. The pre-order process was structured into five key steps, guiding users smoothly through their reservation journey:
1. Your Vehicle – Personalized Selection
The pre-order journey begins with vehicle selection, allowing users to explore key model details and customize their exterior and interior colors. This interactive step ensures that users feel engaged and in control, providing a personalized experience from the very start.
2. Preferred Dealership – Seamless Location-Based Selection
Once the customization is complete, users are prompted to choose their preferred dealership. By entering a city or postal code, the system displays a list of available dealerships, sorted by proximity. An integrated interactive map enhances usability, making the selection process intuitive and location-driven.
3. Payment Details – Secure & Error-Free Processing
Users enter their contact information, billing address, and payment method to complete the pre-order deposit. To ensure accuracy and prevent errors, the CTA button remains inactive until all required fields are properly completed. This step integrates real-time validation to enhance security and reduce drop-offs.
4. Summary – Review & Edit Before Finalizing
The summary page provides users with a comprehensive overview of their selections, including vehicle details, dealership choice, and payment information. Users have the flexibility to edit any step before finalizing their order, ensuring complete confidence in their purchase before proceeding.
5. Confirmation – Order Completion & Next Steps
Upon completing the pre-order, users are directed to a confirmation page, displaying:
A confirmation message to reassure them of a successful transaction.
An order number for easy reference.
A detailed summary of the reservation.
Additionally, users receive a confirmation email with the same information for record-keeping and next steps.
High-Fidelity Design & UI Enhancements
To ensure brand consistency and an engaging user experience, I developed a comprehensive UI Kit, including:
Typography & Colors – A Honda-branded color scheme and modern typography for a sleek, professional look.
Modular Components – Scalable buttons, form fields, and layout structures optimized for various screen sizes.
Responsive Design – Adaptive layouts designed for desktop, tablet, and mobile users.
Micro-Interactions – Subtle animations and feedback indicators to enhance usability and engagement.
UI Kit
A significant part of customizing the solution for each OEM involves reorganizing the UI Kit to align with their branding. UI components, structured as atoms and modules, are developed based on the OEM’s website and brand guidelines, ensuring a cohesive and branded user experience.
Outcome & Impact
Higher Conversion Rates – The streamlined pre-order experience led to increased reservation completions, minimizing drop-offs.
Sold Out Success – Due to high demand and seamless user experience, pre-orders for select models were completely sold out, reinforcing the tool’s effectiveness in driving customer engagement.
Enhanced User Engagement – Personalization features, intuitive navigation, and real-time feedback improved customer interaction and satisfaction throughout the process.
Optimized Dealer Allocation – The location-based dealership selection ensured that orders were efficiently distributed, optimizing dealership inventory management.
Brand Cohesion & Scalability – The Honda-aligned UI Kit provided a consistent design framework, making it adaptable for future vehicle launches and expansions.