Motocommerce is a representative car-buying platform of Motoinsight. It connects buyers with dealers and OEMs to complete all the necessary steps involved in the complicated car buying journey. A Motocommerce solution consists of modules that allow the essential process of shopping for a vehicle, including Build + Price, Deposit, Trade-In, and Credit Application depending on each use case. The Honda pre-order tool has the deposit module that is used as a marketing tool for brands to generate buzz on upcoming vehicles and capture committed buyers with a deposit.

Client: Honda
Roles: UI Design

Honda Pre-Order

User Flow

A Pre-Order flow is relatively simple compared to full Motocommerce products. The main module is to allow users to select a dealership and make a deposit.

 
honda user flow.jpg

UI Kit

The step that occupies a good portion for custom solution for each OEM is to reorganize UI Kit accordingly. UI components as atoms and modules are created based on OEM websites and the brand guidelines.

 
honda ui kit2.jpg

High Fidelity

It is important to apply customized interaction and micro animations used in each Brand Guideline. There needs to be flexibility for a placeholder of the final assets to be received from the OEM Client. In addition, considering the best design and interaction for each device is required since it is a responsive experience. 

Your Vehicle

It is the first page when a user starts their pre-order journey. It shows the vehicle information and allows a user to select the exterior and interior colours.

 
your vehicle1.jpg
your vehicle2.gif

Preferred Dealership

Once a user finishes the colour selection, the page asks a user to select the preferred dealership by entering a city or postal code. Based on the location entered, it will display available dealerships in order of the nearest locations.

 
3.jpg
4.jpg

Payment Details

This step lets a user add payment information including contact information, billing address, and payment method. CAT won’t be activated until all required information is filled out.

 
3.jpg

Summary

The summary page recaps all the steps completed by a user previously and let a user go back and edit their information as needed.

 
4.jpg

Confirmation

When a user completes an order, it shows the confirmation page with a confirmation message and an order number as well as an order summary. A user will also receive a confirmation email with the same information shown on the confirmation page.

 
7.png
Previous
Previous

Genesis

Next
Next

MI Marketing