American Express EveryDay Tracker

Visual Design

American Express is a brand with a history reaching back over 110 years. As the organization seeks to offer new services and acquire new users, the mobile space has become an increasingly important avenue for contact with its customers. 2013 saw the launch of the American Express EveryDay card aimed at a younger, mobile-connected user, and along side it, the EveryDay Tracker within the app. 

Goals

The design of the Everyday Tracker sought to simply display the user's current number of transactions, with the incentive of an additional 20% bonus in Rewards Points upon the 20th transaction. The Tracker drives both engagement of the app, and increases the value of the card in consumer's eyes, as it rewards frequent use.

Concepting

To be effective, the Tracker would need to display the user's current progress toward their goal, and allow activity from the past to be easily reviewed. Creating a visual representation of this progress that is at once elegant and informative was paramount.

We arrived at a design that brought the user's current transaction count to the forefront with large text and a highlighted circular progress dial.

Swiping the dial horizontally would reveal past transaction counts inline. Smooth transitional animations of onscreen elements were essential to the experience.

The Build

The EveryDay Tracker feature was built into both iOS and Android platforms simultaneously. The core feature set and interactions were designed to minimize the need for users to learn new behavior, and to feel familiar to users of both operating systems. Refinements to the visual style and tweaks to the animations took place in close concert with development. Special attention was given to the wide variety of device resolutions, aspect ratios and variance in hardware performance capabilities of phones on the Android platform.

Android spec denoting flexible vs. static segments of layouts, for screens of varying sizes and aspect ratios 

Interaction spec showing transaction list animation, tap areas, and visual feedback zones for Android

(Left) Widget representation of Everyday tracker as show on app's landing page. (Right) Completed state of Everyday Tracker.