Card offer - Content design

Trying to limit a user's irritation with the flow, content was strategically used to simplify the process and help the user understand it was all for their benefit

Introduction

full credit card flow
While I collaborated on the visuals and interactions with other designers for the card offer flow. I led the content design, which influenced the visuals and interactions of the flow. Some insights that were influenced by content were:
And, above all else - have tangible content.  

User and content insights

Pre-approvals

Before going into this design, we thought there would be some negative views on the concept of "pre-approval" and what users my interpret that to mean for them .

Credit check

In extension to the negative perception of the term "pre-approval", we felt there would be a need to let users know a credit check is required and ways to not make that step a jarring or surprise.  Interestingly, users were relieved to know what is expected in the flow but were not turned away by the idea of a credit check. They viewed it as the bank looking out for them and not trying to oversell, which supports the concept of product appropriateness.

Tangible information

Users wanted information that is considered low effort. What are the features that are automatically included with the card that can benefit their day-to-day lives?

Next steps

Many users interpret pre-approval to mean that they are already approved. The idea of an application had a negative reaction, with some having absolute disdain with the word "apply". Considering this offer is for existing clients, users felt slightly betrayed. How could we cool the temperament around the flow's requirements?

Clear understanding

While the flow did have a few steps, conveying what is required of the user for every step and them being informed on what is happening was crucial. This was especially important for the upsell and downsell experiences.

Solutions & rationale

Offer content

Offer content was pulled in from a separate source not managed by content, and the database had over a hundred offers. There was no consistency with length of content or footnotes being used. To manage this, I worked with an engineer to strip all footnotes and designated one footnote, a symbol, for each offer. By doing this, it would not affect other content and their disclaimers and it would not affect numbered disclaimers. This also meant that the offer would have to be to the top of the page, to maintain order in the legal disclaimers.

Annual fee

Originally the annual fee was with the other rates and fees for the card. However, the annual fee is the main deciding factor for the user so in terms of hierarchy it needed to be directly with the card name and card art.

Tangible

Initially, there was a section on "Using your Rewards", which users felt it was not relevant as it required certain activities to reap the benefit and it was a bit premature to have at this stage of introducing the card. All content was replaced with content that can be enjoyed immediately after card activation.

Partner benefits

Partner benefits is mentioned in the very end of the flow. When we tested the flow, users felt it was the best feature of the card and would play a part in the decision making process. With that, mention of partner benefits was included in the presentment screen. Each partner benefit comes with a lot of legal disclaimers. To steer away from having that, we use external links for the partner benefits so the legal can live on those external pages. Naturally, we do not want to have external links on the very screen of the flow, so we merely mention some of the partners the card is associated with to avoid having to include the lengthy disclaimers.

Insurance benefits

Users ranked insurance important but not necessarily the most important. They liked the idea to know what came with the card for awareness and comfort, but also felt that insurance was need based and typically not used often. With this, it is included but in an expand/collapsible format.

The idea to use "included" was to help users understand that it came with the card and was not with additional cost, especially since the bank also offer credit card insurance at a cost.  

What to Expect

With thinking users would not positively react to the pre-approved card offer, a "What to Expect" screen was added to ease people's aggravation. By emphasizing that we just need to verify their information and including that we need to do a hard credit check, helped users feel relieved and protected by the bank.

Income requirements

In the second image, there are two versions for point number two, in the "What to Expect" screen. While the income disclaimer is included in the presentment screen, there is the risk that some users would miss the income disclaimer due to the two CTAs. Therefore, for premium cards  the income disclaimer is mentioned again.

Pending screen

This screen will show for both declined applicants and applicants that require further review. When looking at the experience as it pertains to "pre-approval" we felt that to get a "declined" screen will be a horrible experience that could frustrate the applicant. Instead, both declined and pending clients will see this screen. Declined clients will get an email informing them of their application status, while pending clients will go through further review and get an email to let them know if they are approved or declined.

Loading

After the adjudication screen there are processes that occur on the backend. Due to this taking longer than expected in some cases, a screen was introduced in the flow alerting applicants to not leave the flow as that will stop the application from processing.

Downsell

After the adjudication screen, if users are not eligible for the original card offer, they may be eligible for lower level card that is part of the credit card family.  

Interim screen and downsell screen

In ensuring users understand what is happening an interim screen is added. Having the header be blunt is expected to get the applicant's attention and force them to read on to understand it is a different card

Decline offer

Once a user is taken to the "downsell" flow the card is already in process to be sent to them. Therefore it is imperative for the applicant to "decline the card". The interim screen has the primary CTA as "Decline card offer" to avoid users from just leaving the screen, as that will mean the card will automatically be sent to them.  

Decline prompt

If users select "Decline card offer" in the downsell flow, they will see this alert to make sure that they are sure they do in fact want to decline the credit card offer. The notification explicitly states that if they decline the downsell card this offer will no longer be available, but they may be eligible for future offers. This is intended to potentially motivate users to take the downsell credit card, but also not make them feel forced as there may be future offers.

Upsell

Similarly, with the downsell flow, applicants are taken a different flow, For upsell applicants, they are approved for the initial card and also for a premium credit card part of this family of cards.

You're approved

Initially, for the upsell flow, it said that they are approved for an upgrade. This made applicants confused as they weren't sure if they were approved for the original card. They did not understand what it meant to have an upgraded card, since it was the first time hearing about it, which is why an interim screen was also used for the upsell scenario and the header was changed to "You're approved" and the primary CTA is "continue with current card" so users have an option to stay on task.

Final approval - End of flow

Originally, this screen said "You're Approved" users felt confused on what the next steps were and if they were required to do anything else. By letting applicants know that the card they selected is on the way removed worry for the user.

Setting expectations

Originally this section reiterated the card fees and rates and repeated the offer. By removing the offer from this screen meant the legal disclaimers would not be needed. Users liked that there is transparency on what is happening with their card and when they can expect to receive it. They also appreciated information if they wanted to inquire on the card.

Partner benefits

In the UI/UX section of this portfolio, I spoke about the inclusion and design of this section. Also required concise content and the external links to the link partner page allowed for no legal disclaimers to be added to this page. Ensuring the final screen to be hassle free and a delightful experience!

Contact me

Want to get in touch to discuss opportunities to work together

Send me a message

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Terri Persad
Product Designer
Resume
COPYRIGHT 2021
ALL RIGHTS RESERVED