Ford Credit Apps

webpack  javascript  angular  lodash  sass  aem  nightwatch

During the redesign of ford.com/finance in 2016, the Online Credit Application and the Payment Calculator apps were also redesigned and rearchitected. This project involved working closely with Ford Credit, as well as multiple agencies across the world, to build a user friendly experience for tens of thousands of visitors per month.

Both apps were rewritten in Angular giving us access to its templating, dependency injection, built in http services, routing, and more. We used webpack to bundle the project, this also let us structure the app in a smarter way using imports and exports throughout. We used Babel loaders in order to take full advantage of ES6+.

Screenshot of the new Online Credit Application.
Start of the new Online Credit Application. Angular eventing allowed us to easily communicate across components on user interaction.
Screenshot of the dealer selector component.
Online Credit Application dealer selection. Integration of Bing Maps with Ford dealer data.

Application unit tests were ran with Karma and written in Mocha, Chai, and Sinon. E2E testing was done using Nightwatch.js with Selenium. We used JSCS with Airbnb style guide for app code consistency and linting.

Screenshot of the new payment calculator web app.
Start of the Payment Calculator. Reactive input forms and info cards make for a quick and simple user experience.
Screenshot of the vehicle selector modal.
Vehicle Selector modal. A lightweight and fast vehicle selection with quick high level filtering and integration into Ford vehicle APIs.

Since the launch of the applications, completion rates of online credit applications has gone up by a noticeable percentage.