Mobile app authenticated onboarding flow

Most bank traffic comes through mobile channels. Client offers help with product acquisitions, while they also help banks update client profiles. HMW create an adjudication flow that minimized friction for existing clients?
Role
Product designer & content designer
company
RBC Royal Bank of Canada
duration
8 months
setting
Multi-discipline team
problem

The term "Pre-approval" sets expectations we can't meet

Provide existing clients with a "pre-approved card offer" onboarding flow in the mobile app, that requires the client to review and update information and complete a credit check for approval.
research problems
Conducted competitive research, looked at related flows in the bank. Conducted knowledge gathering from various card teams and met with advisors to understand what clients discuss in branch. From that we created mid-fidelity mockups, a research plan and a hypothesis.

distrust

The term "pre-approval" connotated that users just had to "accept" the card with offer and that no other actions were required of them to obtain the card

discomfort

Users' felt discomfort at having to input their exact income figure. Some said they felt they are unconciously trying to put in the right answer.

hesitant

User's explained they compare cards before making a choice to ensure that it was the best fit for them.

Confused

Users' were confused by the downsell or upsell option after the final step. Users did not understand where they were and why they were there (Visibility of System Status)
process

Finding alignment in early stages

Bringing together our various partners across product, business and even legal. Created workshops to bring together different perspectives to discuss and understand the factors to consider.

This keeps stakeholders engaged,  up to date, and allows for more fluid conversations and faster buy-in for the later iterations.
Continuous meetings with engineering through standup and other knowledge sharing meetings created an open space to explore design ideas, technical functionality and scope, which influenced product scope.
blockers

Business and technical limitations

Offer code

The offers are represented by a unique code. This code acts like an umbrella over the cards that it is associated. Some cards come in "suites" meaning there is more than one, usually two or three, however all cards will have different eligibility requirements. If an offer code applies to a suite of cards, the code will be applied to all despite only the eligible card being shown in initial offer.

Downsell card

Users must actively "decline" the Downsell card if they are presented with that. If a user just closes the screen without selecting "decline" they will automatically be sent the downsell card.

Delivery address

The option for the user to select where they want their card to be delivered - bank or residential address - is required before the final step of the application. Beyond that, the system will not be able to apply the user's choice.

Full path - card offer

Clients are presented with the credit card offer both in the mobile app and online banking. Below outlines the different outcomes when a user selects the offer from their Account Summary page.

Happy Path flow prototype

solution

HMW make clients feel at ease and motivated to continue with the process?

All mentions of "Apply" were removed from the UI and instead adopted a narrative around "confirming your information", including transparency that we will need an updated credit check.

The term "Pre-approved" had a negative reaction since clients had to do more than simply "accept". We are unable to change that term, so the Primary CTA was changed to "Get started".

A "What to expect" screen was included in the flow to emphasize the concept that we just need to confirm the client's information and ensure this was the best product for them, which directly correlated to Bill-87. Bill-87 ensures clients are provided with banking products that are right for them.
Testing -  Positive reception from users. Users' originally validated our hypothesis that the credit check was not ideal . But they  viewed the bank as "looking out for their best interest" by taking the extra steps to ensure they can handle the responsibility of this credit card. They all said a credit check is to be expected.
solution

HMW make the income input less stressful?

This required extensive back and forth with business and other parties due to concerns of risk. Created ranges that applied to the various points of approval and had our risk partners validate the solution
Testing -  Positive reception from users. Users' originally validated our hypothesis that the credit check was not ideal . But they  viewed the bank as "looking out for their best interest" by taking the extra steps to ensure they can handle the responsibility of this credit card. They all said a credit check is to be expected.
solution

HMW use the client's preferred address after adjudication?

The technical limitation around the client selecting their preferred location meant that the client would have to select their preferred delivery address before they agreed to the Terms and before they went through the decision process. Therefore, not yet known if the client is approved or not.

To solve for this, the mailing address the client had to review earlier in the flow was used as their default mailing address. The screen to select preferred delivery address was removed from the flow.

The mailing address can now be seen in the final screen. The application number and bank's phone number is also included.
solution

HMW give clients the tools they need to compare cards and make an informed choice?

Comparing cards comes up in research all the time. It has been proven that the behaviour in choosing a banking product does not come with loyalty to a bank. It is how much can the user benefit and how little will it cost, no matter the bank.

For this bank offer, we were unable to show a compare feature because only the cards in this flow are part of the "suite of cards" attached to this unique code. Therefore, if a client compared with other cards outside of these three cards, they will no longer be under the "umbrella of the offer code" and currently we have not solved for switching targeted offer codes.

Currently, the bank has ~90% accuracy for eligibility with the original card offer, meaning even the downsell and upsell offer usually see about 10% of the traffic. Due to less accuracy on eligibility for the other cards and sales priority, it was best not to introduce those cards at the start.
research problem
Downsell original flow Intercept screen before user was taken to Downsell product page. Product page allowed user to accept or decline card
Upsell original flow intercept screen with Upsell screen being an overlay. Product page allowed user to accept or decline card
Users' were confused by the downsell or upsell option after the final step. Users did not understand where they were and why they were there (Visibility of System Status)
In trying to address the implications with the Upsell and Downsell scenario, I attempted to include intercept screens to help users to understand where they were in the application process and what card was available for them.

TECHNICAL LIMITATION - For Downsell clients, the client must explicitly "Decline" the card, or the client will receive the card, so I tried to communicate that as much as possible to understand, they are eligible for a different card and that they must "Decline" the card
Testing - This experience proved to be very complicated and users felt that "it is too much information to understand". Users loved the compare chart. They asked to have it included in the original offer screen.
UPSELL solution

HMW provide direction and clarity for diverted clients?

In initial testing, users were very confused by the "Upsell scenario", which is a more premium card provided to clients who shared a higher income and/or a better credit score than on record.

Were they still eligible for the original card? Understanding this new path also required learning all about a new product, something they already mentioned in user testing as not being ideal.

Upsell screen acknowledges their approval and visually forces the client to choose - with the use of radio buttons - between the original card or the upgraded card. Clients are able to view the product page, which includes a compare chart for both card options.

Prototype for this experience
Testing -  Users understood clearly that they were approved for two cards. However, users still felt that it was too much expectations to now learn about a new card and they felt rushed to have to make a choice immediately.
DOWNSELL solution

HMW create a downsell experience that lets the client know they are in control?

For our downsell clients, they were provided a card with lower requirements and not approved for the original. Due to this being a "Pre-Approved" offer we avoided messaging that the bank declined the client.

Technical blockers also applied, since the client had to explicitly select "decline" to not be sent the downgraded card.

The client is required to select a checkbox along with "Accept card offer". If they choose to "Decline card offer" they will be given an alert to confirm their decision.

Prototype for this experience.
Testing -  Users were not the most pleased with this experience. However, data showed that 93% of all clients that came to this page did select "Accept" or "Decline". We also saw that 67% of clients that opened the product page, selected "Accept".
Handoff

Support for a smooth development process

As part of handoff, an annotated process flow is provided for supportive documentation. You can view the process flow here

Engineering and BA handoff

Conducted detailed hand offs with engineering teams and BAs. Using annotated wireframes, I took the team through the flow explaining each screen and the service decisions between screens

Process flows

Along with hig fidelity flows. Annotated process flows is shared with architects and enginnering which they referenced throughout the process

Creation of user stories

Worked together with BA, lead engineer(s) and product lead to formulate user stories and provide assets including process flow to be directly referenced.
impact

The numbers

This flow was developed with a lot of insights going in. We looked at existing experiences at the bank, both advisor facing and self-serve. We looked at past research to help inform and guide our research planning to ensure we learned new information while also building on what we already knew. Our numbers were not that surprising.

6 mins

To complete flow
On average most clients completed the happy path flow in 6 minutes or less

84%

Fulfilled flow
Enter flow and did not drop off until completion.

92%

Fulfilled original offer
Client entered and was approved for original offer

67%

Accepted downsell offer
Client was approved for downsell card offer

27%

Accepted Upsell card
Client was approved for upsell and they accepted the upsell card

Explore Happy Path flow

Go through the entire Happy Path flow from the Account Summary to the final success screen in the mobile app.
Explore prototype

Process Flow

This is the first part of the process flow for the Card offer flow. To see the screens to align with this flow you can view here > Screens for Process flow 1
This is the second part of the process flow for the Card offer flow. To see the screens to align with this flow you can view here > Screens for Process flow 2
This is the third part of the process flow for the Card offer flow. To see the screens to align with this flow you can view here > Screens for Process flow 3