case study
American Express
Pay Over Time Landing Page
Role
UX Designer
I synthesized findings from the usability study and implemented them into wireframes. I then collaborated with a visual designer and creative director for the final design.
I synthesized findings from the usability study and implemented them into wireframes. I then collaborated with a visual designer and creative director for the final design.
Context
American Express hired DCG ONE to take usability study findings they had and apply them to their Pay Over Time landing page. I was selected as the UX designer for the project and worked directly with the client. The design was implemented with changes via an internal American Express web builder tool.
.png)
Overview
Background
American Express Pay Over Time is a feature on many AMEX business cards that allows their users to cover expenses (up to a certain amount) at a lower interest rate.
Problem
American Express conducted a usability study with 183 participants and found that people were unable to understand what Pay Over Time was, if they had it available on their card, how limits worked, and what they could use the feature for.
.png)
Page Before Redesign
Project Goals
Drive business by making the landing page more visually engaging and accessible.
Improve customer experience by making Pay Over Time more understandable and addressing usability study findings.
Improve customer experience with content strategy by pulling information from the FAQs into the page.
Improve customer experience by making Pay Over Time more understandable and addressing usability study findings.
Improve customer experience with content strategy by pulling information from the FAQs into the page.
The Process
Research Overview
Whenever I approach a new UX challenge, I like to gain as much understanding as possible. I dove into the usability study findings, conducted a heuristic evaluation of the landing page, and researched how the Pay Over Time feature actually works. I used this information to build a page that matches the mental models of users who would be interacting with the page.
.png)
Image of Pay Over Time heuristic evaluation using the tool Heurio.
Process Overview
After the diving into research, I developed the following solution. I presented internally to my team, and then to the client. The client approved my UX work on the first round, and then colors, images, and typography were implemented by a Visual Designer.
I took my time to incorporate the FAQs into the page in a digestible and visually interesting way, because as one user said, “I am not going to read that wall of text.”
I took my time to incorporate the FAQs into the page in a digestible and visually interesting way, because as one user said, “I am not going to read that wall of text.”
.png)
Overview of Process (Before, Wireframes, Visual Design)
The Solution
My Impact
Below I have outlined key design decisions and why they were made. Because I was the sole UX designer on this project, all design decisions were a part of my "impact".
.png)
Before
.png)
After
Contrast Updates
To improve customer experience, I increased the contrast of all sections to make them the text more accessible and easy to read. I called out the mid-page navigation bar to make it easier for the user to locate. This decision was made because of user comments like:
“The type over the photo made it... uncomfortable to read: photo interfered with the message.”
“The type over the photo made it... uncomfortable to read: photo interfered with the message.”
Before (Went Right into How it Works)
After
Added Overview
To drive use of the Pay Over Time feature, I added an overview section, quickly stating what Pay Over Time is and which cards it applies to. I did this because previously the participants didn’t know what Pay Over Time was or if they had it on their cards.
Before
After
Accessible How it Works
To improve customer experience and understanding, I pulled the text out of the image for increased accessibility, added an animated GIF to the left for visual learners, and a quick explanation of the text on the right. These decisions were made based on comments like:
“I would like to see some visuals or maybe a video rather than so much wording.”
“Black on black or white on stripes. Difficult to read. I would have closed ad almost immediately.”
“I would like to see some visuals or maybe a video rather than so much wording.”
“Black on black or white on stripes. Difficult to read. I would have closed ad almost immediately.”
Before
After
Action-Based Examples
To drive use of the Pay Over Time feature, I added text to explain that Pay Over Time can apply to almost any purchase and made the examples more action-based. For example, instead of just "Surprise Expenses", it now says, "Cover unexpected costs". I also moved the calculator underneath this section instead of at the end, so users could get ideas of expenses for their business, and then calculate interest with that in mind.
Before (Went Right Into Testimonial)
After
New Limits Section
To decrease customer questions about limits, I added a new section specifically about how limits work, since it was identified as one of the biggest pain points for the customers. A GIF was included to the left for visual learners. (Note: GIFs were created by a motion designer at DCG ONE.)
Before
After
New Pull Quotes & Resources
To encourage customers to engage with the video, I added a pull-quote next to the testimonial video.
To drive website exploration beyond the page, I added relevant articles.
To drive website exploration beyond the page, I added relevant articles.
Takeaways
Results
I left DCG ONE for my role at T-Mobile before the launch of this page. It was implemented with changes after I left.
I presented what is shown on this page to American Express, they were very excited about data-driven design and thoughtfulness. They approved the UX work and moved forward with visuals for several rounds, with the final being after what is shown here.
I presented what is shown on this page to American Express, they were very excited about data-driven design and thoughtfulness. They approved the UX work and moved forward with visuals for several rounds, with the final being after what is shown here.
Reflection
I always refer to this project as, "small but mighty", because I put so much thought into this little page and truly re-evaluated every section of it based on their usability findings. I delivered a piece that the clients were very excited about and it was one of those projects that reminds me why I love doing UX work.
The biggest thing I learned from this project is to tell a story when presenting. Presenting a narrative to stakeholders can help them understand the bigger picture and why certain decisions were made.
The biggest thing I learned from this project is to tell a story when presenting. Presenting a narrative to stakeholders can help them understand the bigger picture and why certain decisions were made.
