01_Landing-3

AMEX
BRAND SITE

AMEX
BRAND
SITE

AMEX
BRAND
SITE

American Express is one of the world’s most trusted and recognized finance brands. Followed by the brand refresh Pentagram did in 2018, we partnered with Amex to create a new brand site to announce their new visual identity and brand voice, from site strategy, content, user experience to visual design.

The brand site design maintains core visual languages of Amex — confident, bold and simple, validating them with minimalism being pushed further, rigorous layouts and rich digital interactive layers.

The site breaks into two parts: a storytelling section to demonstrate the visual identity and brand core as well as utilitarian sections for the Amex internal users to access assets.  For the storytelling part, we emphasize visual impact and engaging interactivity. For the utilitarian part, efficiency and clearness are the key focuses.


DISCIPLINE
UI/UX
WEBSITE

ROLE
DESIGN 

ANIMATION

American Express is one of the world’s most trusted and recognized finance brands. Followed by the brand refresh Pentagram did in 2018, we partnered with Amex to create a new brand site to announce their new visual identity and brand voice, from site strategy, content, user experience to visual design.

The brand site design maintains core visual languages of Amex — confident, bold and simple, validating them with minimalism being pushed further, rigorous layouts and rich digital interactive layers.

The site breaks into two parts: a storytelling section to demonstrate the visual identity and brand core as well as utilitarian sections for the Amex internal users to access assets.  For the storytelling part, we emphasize visual impact and engaging interactivity. For the utilitarian part, efficiency and clearness are the key focuses.


DISCIPLINE
UI/UX
WEBSITE

ROLE
DESIGN 

ANIMATION

The site landing page immediately reveals the renewed Amex logo on a large scale through a loading animation, followed by big, bold yet elegant typography with a confident voice. 

Our Brand—Engaging Storytelling

The goal of the Our Brand section is to present the new Amex identity and voice in an intriguing way with their visual tones. This is achieved by maintaining and amplifying the Amex visual attributes through bold and simple typography, generous use of negative space with iconic color palette of white and blue, simple layouts with constraints as well as native on-scroll interactive features.

In the Our Brand section, the side navigation also functions as a progress bar, collapsible with smooth seamless transitions between toggles.

Color swipe transitions between copy and imagery.

Type waterfall — The brand attributes are lit up while users scroll.

Editorial layout — This module is designed to be easily adapted to new content. The use of white space allows text to breathe.

On-scroll animation to show the evolution of the logos.

08_Typography
10_how-we-sound-5
11_how-we-sound-2
09_pattern
15_logotypes-4
16-graphic-elements-2

Assets—Utilitarian Priority

In the Assets section, allowing users to find and download the assets they need efficiently is the main goal. E-commerce shopping experience is brought in and modified according to the asset attributes. Design focus is put on the sensible logic of assets categorization, intuitive user experience, clearness and efficiency. The result is a pleasing streamlined asset searching and downloading experience.   

E-commerce shopping experience is brought in for the asset downloading flow.

13_All-1
14_All-2

Made at B-Reel New York with Amex Brand Development & Marketing team.

Creative Direction—Irena Milev
Design—Wen Wang
Illustrations—Wen Wang
Site UX—Wen Wang, Irena Milev
Assets UX—Valeria Pivovarova, Wen Wang
UX Documents—Valeria Pivovarova
Animation—Sang Youb Shin, Patrick Chen, Wen Wang 
Production—Katie Flynn, Sachin Arora
Executive Production—Myke Gerstein
Development—Theo Stråhlén, Amex Development Team

© 2020 wen wang