Platforms

• iOS
• OSX / Windows; Modern Browsers, IE 10+

Technology

• Custom JavaScript Framework
• jQuery
• iScroll

Development Tools

• Chrome
• Brackets

Purpose

The Audi Exclusive app is the evolution of the previous Exclusive app that goes beyond just showing customers that a wide array of options exist should they like to go the “exclusive” route with their Audi purchase. It allows the customer to select on the showroom floor via an iPad not only the model, engine, seats, etc, but also provides the ability for the customer to completely customize all aspects of the interior from door panels and steering wheel to seat and floor mats. The end result is sent to the factory where the customer’s custom Audi vehicle comes to life.

The Audi Exclusive app is a web app that lives within the native iOS Sales Assist app via a webview. Powered by a custom-built CMS the Exclusive app, by nature of its web roots, is at home in desktop “point-and-click” environments as well as the touch-screen environment provided by the iPad.

Below is a quote from Audi that describes the Sales Assist app:


The Audi Progressive Retail Sales Assist app was designed to eliminate barriers between a salesperson and a potential Audi customer by providing dealership employees with the information they need to build trust with their customers.

The Sales Assist app is the first digital tool to launch from the Audi Progressive Retail Experience program, allowing employees to present product information to potential clients in innovative ways. The tool is an Apple iPad® application and uses pictures, videos and animations that are both informative and entertaining. Other features allow customers and dealership personnel to compare the specs between Audi models and its competitors, configure an Audi vehicle based off a customer’s wants and needs, and view and search inventory on a dealer’s lot, among other functions. The Audi Sales Assist app was first piloted by a group of Audi dealers in Q2 2013 and is now available to all Audi dealerships nationally.

Development Notes

I was part of a team of developers working on this project – 3 people worked on the back end APIs and the CMS and I worked on the front end layout and API integration. The exception was the final Order Form view where another developer adjusted a few things so as to allow the Order Form to be an entry point into the app by an admin for the purpose of viewing / editing submitted orders.

Built from the ground up using a custom MVC-style framework. That utilized a PubSub for event management, provided deep linking, DOM-based dialogs and a hash-based view router. jQuery was used for AJAX and DOM manipulation. iScroll provided scrolling and gallery-type functions.

The views that illustrate the interior of a vehicle consist of stacked PNG images. These stacks of images were made “interactive” by applying image maps to a top-most transparent image. The image maps were created via the custom CMS when the assets were imported. See this post: Creating Image Maps From Canvas Derived Coordinates which describes how the image maps were created.

As one goal of the app was to minimize round-trips to the server a single JSON payload is downloaded when the application starts. Thereafter the only other interactions with the server were for downloading images and submitting the potential customer’s personalized Audi vehicle for followup by a sales person.