Davis Kramer
UX & Product Design

American Express

Card Shop Experience & Agile Marketing Pilot

About the Project

For most of 2017 and part of 2018, I worked through a remote consultancy, Greenstone, on two projects with American Express: The Card Shop experience team & an Agile Marketing Pilot team. 


Challenge:

After offering superior Membership Services for over 150 years, American Express found itself in a shifting acquisition landscape where Credit Karma and The Points Guy (affiliates) are converting leads into customers better than they are

Prospective customers who come into the Card Detail pages either from external channels or passive navigation, demonstrate very high bounce rates and low submit rates. Mobile users in particular account for the highest visitation on average (400k per month), but also account for the highest bounce rate at 59.2%. This is the reality in which we began our partnership to optimize the Card Shop Experience. 

In addition to the Card Shop team, I was the UX lead along with a visual designer, copywriter and developer for the first agile marketing pilot at American Express. Following extensive training, our team worked directly w/ the product owner and internal stakeholders onsite to define, design, test & refine 52 tests over the course of 30 weeks. The goal was to establish a cadence for design solutions to move through the approval channels so we could build, measure and learn at an accelerated pace. 


My role:

  • Product Strategy
  • Experience Design
  • Visual Design
  • Voice & Tone
  • User research, analysis & testing
  • Conversion Rate Optimization (CRO)
  • Agile Methodology
The Process

Build. Measure. Learn.

Agile methodology and Lean UX principles were used across both teams to garner results and allow us to adapt quickly. The stages of our design process included: 

  • Audit existing responsive web and native mobile applications
  • Review analytics & customer support chat logs to unveil unexpected pain points
  • Developing Prospect-Centric features, by utilizing research to focus on what it means to be an AmEx card member
  • Tailored user testing process including development of moderator guides and user flows for in-person testing as well as live site testing 
  • Externalizing work with use of sticky notes/war room, virtual whiteboard program (real time board), collaboration tools, Google docs & InVision prototypes
Research & Problem Definition

The Assignment

Incrementally build upon the existing platform capabilities to aggressively optimize and personalize the Card Shop Experience for a multichannel audience that boosts conversion. The agile pilot team focused on speed & conversion through a daily cascade of experiments, testing our way into bigger evidence-based thinking.

American Express

Research

Heuristic Audit

The project kicked off with a deep-dive into the existing American Express brand. I evaluated several areas across their responsive web & native mobile platforms including:

  • Activating a new card (Email touchpoints, Account activation & Mobile app)
  • Affiliate Groups (Channels, Users types, Motivations)
  • Card Shop (Research, Discovery, Deciding)
  • Chat/Customer Service Experience

Following this, I was able to derive key opportunities and outline a high-level sitemap. 

American Express

Competitive Landscape

In order to understand the existing landscape and what others were doing, I also looked at various products and services.

  • Evaluated credit card competitors
  • Looked at product and service-based companies
  • Walked through the existing card shop flows across desktop & mobile 
American Express

Definition Workshop

Our first meeting at AmEx involved stakeholder presentations in an immersive 2-day workshop. We heard from various departments/stakeholders including:

  • The Global Brand Management Team
  • Affiliate Marketing Team
  • Card Member & Personalization Teams
  • Test & Learn Team
  • Analytics & SEO Leads

This kick-off workshop provided our team with a thorough data-driven project onboard and a deeper understanding of opportunities for Card Shop. 

Our core believe emerged quickly during this onboard: to thrive in this new acquisition landscape, we must deliver a differentiated, service-driven experience that weaves a Membership feeling into the shopping journey.

American Express

How Might We Exercise

Also part of our on-boarding workshop was a chance to run a How Might We exercise with our clients. This not only helped get insights to what opportunities might arise, but it created an open dialog and got everyone comfortable with hands-on experimentation.

We asked all the stakeholders to brainstorm ideas that each department lead would like to see addressed, focusing on the positive and framed in a 'How Might We' format.

After 15min, we read the ideas aloud. The group discussed rationale and similar suggestions were organized accordingly. Some of the themes that emerged from this exercise include:

  • Deliver a best in class, customer-first Card Shop experience
  • Profitably acquire new customers and scale digital channels
  • Deepen card member engagement and drive organic lend & spend
  • Innovate and optimize as rapidly as possible within constraints

Strategic Framework
American Express

Service the Journey

To guide our decision making and ensure we were aligned and focused on the big picture, we crafted a guiding North Star vision statement and strategic framework.

We believe that shopping is the first step to membership, and that begins with a connection. Our shopping experience needed to be a powerful service with a powerful voice that infuses the soul of Membership into transactional touchpoints. 

American Express

Current Ecosystem

The existing ecosystem for the Card Shop to Membership experience was quite linear. Once the user had moved from prospect to Member, brand engagement (and general product awareness) slowed. 

American Express

Ideal Ecosystem

American Express has always been known as a premium brand but there still was an unattainable feeling from the millennial audience. By grabbing the attention of our card prospects and card members, we could bring them into the fold of a highly personalized & unique card shop experience. 

We aimed to do this by shifting from a linear flow to one that puts Card Member benefit at the heart of the ecosystem. This allowed us to create valuable experiences and speak to our segments (prospect, affiliate & card member) multiple times throughout their journey. 

American Express

Sprint Cadence

The UX process for the Card Shop team was a little different than previous projects I've worked on. Our small team tackled specific incremental design tasks over a two week period/sprint. Depending on the exact challenge, the outputs would incorporate some combination of user stories, strategic mapping, rapid iterative sketching, wireframes, refined visual design + copy, motions tests and prototyping.

At the end of each sprint, some design solutions may be shippable and move direct to build, while others may move into a clean-up, production or testing sprint. For the mobile 'above the fold' sprint, our goal was to prepare designed prototypes for usability testing in NYC and Chicago.

Design Exploration

Armed with insights and strategic alignment coming out of the research and strategy sprints, we embarked on a series of rapid design sprints to craft the best solutions to our identified opportunities. We worked through UX and Visual Design in lock-step in order to hit our deadline and move into user testing as quickly as possible.

American Express

Design Sprint & Wireframes

Our first design sprint focused on reimagining above the fold content for mobile specifically. Mobile users account for the highest visitation (400k per month), but also account for the highest bounce rate (59.2%). Affiliate traffic also represents a significant share of volume on mobile (60%). 

As detailed in our sprint cadence, we had 4 rounds of wireframe reviews during our 2 week sprint:

  • Round 1: Experiment (hypothesize, sketch, review/decide with core team)

  • Round 2: Evolve (wireframe, prototype, review/decide with core team+stakeholders)

  • Round 3: Evolve (visual design, copy, prototype, review/decide with core team+stakeholders+legal compliance)

  • Round 4: Refine (polished design + copy, prototype, final review/decision with core team+stakeholders+legal compliance)

Remote Card Shop team sprint 1 retrospective
Remote Card Shop team sprint 1 retrospective

Sprint Retrospective

This first sprint proved to be extremely fast for our team. Following user testing and our retrospective, the Card Shop team and stakeholders agreed to reframe our sprints to take on more strategic opportunities going forward. This granted us more time to think through our approach, key stakeholder involvement, quick check-ins on feedback and apply continued prioritization against additional asks. 

This also allowed us to leverage learnings from the pilot team's test results to better inform our approach for each sprint. The opportunities we tacked next included:

  • Sprint 2: Further above the fold Card Details evolution for both mobile & desktop following usability testing and user research insights

  • Sprint 3: Navigation exploration

  • Sprint 4: View All Cards landing page and sort/filter experimentation

  • Sprint 5: Card Details key features, benefits & rewards treatments

Visual Identity Brand Attributes: Exceptional, Powerful, Enduring, Sophisticated, Essential, Agile, Connected, Dynamic, Contemporary & Aware
Visual Identity Brand Attributes: Exceptional, Powerful, Enduring, Sophisticated, Essential, Agile, Connected, Dynamic, Contemporary & Aware

UI Design

In Spring 2018, American Express launched a new brand identity across their global network. The result is a clear, stylish, modern, and easy-to-use system that provides marketers with the ability to create unique communications and experiences that are consistent with their branding. This system includes: a flexible selection of graphic elements, patterns, photography, and illustrations - aimed at giving a high degree of flexibility without the added stress of complex brand requirements.

The AmEx brand has three key qualities:

  • White Space - an emphatic use of white space is a core principle, that provides a foundation for a clear hierarchy of message and allows the elements of the visual system to breathe.
  • Editorial Spirit - with a use of prominent personalities over the years, AmEx has cultivated an editorial spirit and positioned themselves as a lifestyle brand.
  • Juxtaposition - the heritage of AmEx is expressed in fine-grain details and embellishments, while the Blue Box Logo and type are rooted in a modern design vocabulary. This juxtaposition of modern and historic elements elevates the brand. 
American Express

Creative Principles for Card Shop

In addition to the new brand identity, we crafted a few creative principles for the Card Shop work that aligned with our Vision and Experience Strategies. 

While our team had access to the new brand identity, we weren't able to utilize it in our designs until it launched worldwide (as seen in the design evolution below).

User Testing

We used a third-party vendor (GFK) to test our prototypes with users in both NYC and Chicago. In preparation for this, I created several documents including:

  • Target Audience Screener
  • Moderator Guide
  • Prototype Flow Guide
  • Key Quotes & Analysis Doc

Agile Marketing Pilot
American Express

Agile Pilot Team

My work on both of these projects spanned the course of 10 months. With this case study, I aimed to tell the larger story, highlight the deliverables and detail my role across both projects —  but I've only scratched the surface. 

Our pilot team was assembled to tackle a wide spectrum of tasks from conversion-based variant tests to holistic journey mapping. A rapid workflow enabled us to iterate, experiment, release, analyze and repeat at breakneck pace. We sat at the center of a complex universe: Marketing, Test & Learn, Compliance and Technology stakeholders all had to be pulling in the same direction daily. 

Although Greenstone operates as a remote consultancy, I had a unique advantage as I'm NYC based and was able to sit in the war room at the AmEx Towers, embedding myself within the process and culture. 

Wrapping Up

What have I learned from these projects?

  • Speed is greater than perfection —  This was the most important learning from both the card shop and agile pilot teams. To create the best product for our users, we couldn't be afraid to fail fast. My Card Shop teammates had a harder time adapting to the agile way of working as they were all remote and not as familiar w/ the process. As I was on both teams and in the war room at AmEx, I tried to be the bridge that synced the process & learnings to better accomplish our shared goals.
  • From battle-tested experiments to scalable frameworks —  The learnings we garnered from many months and tests with AmEx have uniquely equipped me to develop systems and frameworks that underpin countless design experiments and set the course for a larger vision for the Card Shop experience. 
  • Leveraging what was learned —  When our team embarked on this project, an Agile Process in the Marketing Team was strictly philosophy, no one really knew how it would actually function. Over the course of 10 months, the agile design process we've helped actualize has proven that it's the fastest way to results-driven innovation. I'm proud of my part in that win. 
American Express

"Working with Greenstone allowed us to challenge our own institutional business-as-usual beliefs and prove out processes that have changed the way we operate. The team is strategic, practical, on-brand and helped us change the way we run business."

Kersten Stannard  |  Director, Digital Acquisition at American Express