Poor Email and Page Layout Example

I have not posted before about email or page layouts because there is already so much more out there that has been tested by others.

Today, though, I am making an exception for a particularly bad email I received from Citibank regarding one of my credit cards. Overall, Citibank is fine, except I receive a continual stream of emails attempting to make me feel better about my credit card.

I confirmed I opted out of the promotional emails, but they must believe that these emails aren’t “promotional” but “operational” instead. I then clicked on the “manage preferences” and discovered a new layer of permissions that weren’t part of the preferences in my actual logged in account. It is hard to say if this permission error was intentional or simply due to complexity. This disconnect highlights just how important it is to have a consistent and clear subscription management system.

Let’s walk through this email step-by-step:

Subject: An Update from Citi Cards CEO Jud Linville

I recall Jud Linville used to work at Amex, so this was news to me that he is at Citi. But why in the world would I care about an update from him? I don’t feel better that the CEO is communicating with me since it is clearly a mass email.

From Name: Citi Cards

Generic, ok.

From Email Address: citicards@info4.citi.com

Again generic, but the “info4” subdomain is a bit odd. Why not “email.citi.com” or something more trustworthy? I thought this email was so poorly constructed, I checked the headers, as it seemed like a great phishing email.

Banners: When you speak, we listen.

This is a giant banner for a preview pane and I am now thoroughly confused about why they want to send me an email. And I get two banners for my trouble, one logo and one secondary header.

Salutation: standard, neutral.

Lede: “Most of us are over­scheduled these days, so anything that helps us save time is always welcome.”

This lede fails copywriting and email etiquette in several ways. First, I have no reason to continue reading. Second, you just wasted my time with an email and then say you want to save me time. I am unimpressed and would have deleted this email already but I found it so terrible, I kept reading.

Body: I won’t repeat it here, so you can read it yourself. Essentially, Jud lists out changes that many other card issuers already had several years ago. These are also features I do not use or care about right now with Citi. The addition of an Android app is pretty meaningless unless you happened to know I use Android or I requested it. Then I am asked to download the app OR click to learn more. I am now confused as to what clicking will do or why I want to click.

Finally, I am asked to leave more feedback in both poorly placed image and a final text request with no hyperlink, but instead he asks me to find the “green button”. My email and page design rules are all about not making the reader work to find the information or to take action. Some Ux designers call this “frictionless.” Citi’s site and emails are full of friction.

Essentially, Jud sent me a promo email detailing why Citi is so great, and wasted my time on a feature list and asking for feedback with multiple CTAs, after just saying that I must be very busy and don’t have time for things like this.

What Citi Did Wrong

• Uninteresting subject line
• Header image is too large and uninteresting.
• Lede actually repels the reader because it is already clear this email is a waste of my time even though they want to help me save time.
• I did not ask for this email, or at least I thought I did not ask for it.
• At least 3 CTAs that conflict with each other.
• No links where I would expect links, such as the app download or feedback request.
• Sketchy looking email address.
• The copy is self-serving because it asks me to do what Citi wants without any clear benefits and to take time from my day to provide product feedback that is likely unneeded.

What could Citi have done better?

The feature upgrades are all fine, however, an email about them was unnecessary. Instead, I would have done the following:

• Update the website to point out the new features the next time a user logs in.
• If I navigate to an area that has been upgraded, point out the new features in a natural way, and only once. All of these features exist on other card sites already, so I would already look for them if I wanted them. (In fact, the autopsy feature was so terribly designed that it didn’t work and it did not explain how it worked when I first received my card a year ago).
• Ask for feedback on the site, and not with one of those pop up surveys.
• Mobile downloads – if you want to increase your mobile downloads, then point me to it on the website with a direct link. Or perhaps your system noticed I sometimes use my phone to look at your emails and now you know I use Android, so send me an invitation to just the Android app with a direct URL to the Google Play store. Give me a real reason to use the app by allaying security fears or making the app a necessity for me.
• Keep emails to twice a month unless it is related specifically to my account, such as a bill, overdue notice, or security breach.

Bonus: Web Page Issues

While I won’t critique all aspects of citi.com, let’s look really quickly at Citi.com vs. Americanexpress.com.

On citi.com, we are presented with a splash page (literally). In the upper left, I am invited to login, but there is only a small set of picklist drop downs. It took me several months before I finally realized the two boxes are not connected and that I should select “Credit Cards” just to get to the login page. Why is Apply so close to Login? Is this a security issue? Is it the result of poor backend decisions in 1999? The top banner is a giant amount of wasted screen real estate that could be used for the navigation. While the rotating CTAs are fairly visible, I almost never notice them since I am too busy trying to find the login box. Note how the CTAs on this page are not clearly connected to my personal goals, other than wanting $400.

Now, take a look at americanexpress.com. The login box is displayed clearly in the upper left. While the rotating CTAs still use muted colors and are tied into how my card enables my travel goals. The entire screen is easy to read if I chose to. The menu is clean and fresh looking and it is clear where I should click. I also see the classic Amex card images, which tell me where to click and what I should expect. None of that is present on Citi.

In the Reuters article I linked to earlier, they mentioned how Citi Cards were at the forefront of the card market in the 1980s. I recall the many spots they used to run and it was a clear tie (in my young mind) between Citi and Amex. It is interesting that Jud Linville hasn’t been able to take many of Amex’s lessons and psychology expertise to Citi.com. This is not to say Citi.com should emulate the latest Silicon Valley startup scroll down page, but there are lessons from those designs which could help Citi’s customers.

What are your challenges in bringing good design practices to your firm? Did you use a marketing automation implementation to re-design your templates?