Project descriptions:
ARG (Automotive Reference Guide) is a guide that colorfully illustrated the various systems found on Honda and Acura vehicles.
It is a guide that dealer service advisor use explaining repairs and maintenance to the customers during the consultation and active delivery. It has over 1,700 illustrations applicable to vehicles as far as 2005.
Previously the guide was only in printed format. As of 2016, the guide has been transformed into a web based multi-browser support online platform, utilizes a wide range of multimedia effects such as interactions, 3D rotations, exploded views, 3D animations, and videos.
The Wireframe (Mobile)
Upon launching the site, user will be taken to the brand screen, either Honda or Acura, depending which dealer is accessing it. From the brand screen, user will be taken to all Honda/Acura car models. screen.
After selecting the model name, user then will be taken to the 12 car component screen. Depending on each component, some will go straight to the detail page. Some might be broken down into a more detailed parts, as shown.
When user is currently viewing the content on mobile layout, in order to make it user friendly, there is a hamburger menu button on the top right corner, that will pull out the car model menu, if the user wants to view another car model components. On desktop layout, the side menu is always on the left hand side.
The UI Design
The content page varies from a static image with text callouts, animations, 3D animations, interactions and videos.
Multi Browser Technical Training Module UI Design
The purpose of this technical training module is to train Honda/Acura dealer technicians for the latest technology of the cars so they could provide the correct repair needed for the customers.
Originally the modules were created using Flash. But since Flash is not longer supported, all modules need to be converted into HTML5 and responsive. Additionally, it needs to be easy to use for technicians who majority are not quite computer savvy.
The solution for the UI is by using simple icons, clean layout and adheres to Honda/Acura automobile branding.
Acura branding UI shown
