American Express has recently undergone a brand refresh, and needed to incorporate that style into their how-to tutorials for their YouTube channel. These videos are intended to be a replacement for long waits on American Express help lines. Instead of waiting on hold for a service rep, and to avoid overwhelming call centers for common issues, these videos are easy, step-by-step guides to American Express’s website and online banking tools. Take a look at the videos on our website.

Creating these videos posed two problems: how can we make these videos as effective and accessible as possible for the cardholder, and how can we incorporate American Express’s refreshed identity in a clear way?

In response, we created an illustrative, animated video template that incorporated the new brand, and other key elements to maximize the tutorial series’ effectiveness.

Using the Brand Identity
The new brand refresh refined and simplified many of American Express’ previously intricate design elements. We used some of these elements in the backgrounds to create a cohesive look, despite any variations between videos. The videos also followed American Express’s use of white space to complement their blue colors: using a primarily white layout, focus was drawn to the screen tutorials. The color orange was also brought in as a complement to the American Express blue, ensuring the user’s focus was exactly where it needed to be.

Action titles
The purpose of these videos is convenience: American Express cardholders can pull up YouTube and watch a video instead of waiting on the phone to speak to a representative. But to be truly convenient, we had to understand that not everyone will be able to watch these videos exactly the way they were created. So we combined the use of a voice over track with action titles that quickly explained the purpose of each step. If a cardholder needed to watch the video without sound– on a busy train, or in a quiet office, they would still be able to follow the steps and understand how to solve their problem. Likewise, if they wanted to follow along with the video, performing each step as the video walks through them, the voice over is able to guide them without the need of visuals. Together, the voice over, visuals, and titles provide a comprehensive guide to using American Express’ mobile and desktop banking sites. But even without one element, the videos are still effective. 

Progress Bar
This animation style also allowed us to include an important element: a progress bar. These videos aren’t effective if people are dropping off before finishing the video, or if they won’t watch them to begin with.  Progress bars are often used in onboarding and setting up profiles. Sites like Linkedin use progress bars to encourage users to actually finish setting up their profiles, therefore providing the site with more engagement and users (and data). But the bars have a benefit to users too: they break large tasks into smaller goals, and allow users to feel accomplished after reaching those goals. In fact, people prefer to have progress bars.

Including a progress indicator was important here. It lowered the chances of someone leaving the video in the middle to find another resource by immediately outlining to viewers how long the task would take, and offering an incentive–feeling accomplished–to actually complete the video. It also gave clearly divided steps that viewers could refer back to. Cardholders would be able to follow along in real time, since the steps were separated and easy to backtrack to as needed.

Device Frames
In videos like this, where there’s lots of elements but one main focal point, it’s important that every element is there because it’s needed, not just because it looks nice. The progress bar, titles, and backgrounds may add visual interest, but that’s not their only purpose. They serve to elevate the convenience, cohesiveness, and effectiveness of the videos. We had to be selective with other elements. These videos are tutorials, and the screens need to be the focus.
In this case, we elected to simplify the frames around the screens. We used sketched-style frames in white and a soft grey. They implied the use of a phone or a desktop, and allowed the user to fill in the blanks as to which device was being used. This also avoided over-explaining: the shape of the screen gives enough away, we knew we wouldn’t have to make it more obvious. These simplified frames make the screens the visual focal point, as in most cases, the screens are the most vibrant element on the screen. 

Templating
While these elements can be effective in a single video, for this project, it was key that they were effective as a series as well. With the template style we created, there is consistency across all videos. Each video is bookended by the same intro and outro, and each screen follows the same layout. The device frames, the progress bar, and the titles will always be in the same place for mobile or for desktop. Along with consistency, it ensures that the focus will always be on the screens, as they’re the only things that change consistently. 

–––

Each element of this video series is a deliberate and conscious choice, made to increase the effectiveness of the video series as both a tutorial, and as a representative of the American Express brand.