Mobile app authenticated onboarding flow

Creating a clearer credit card offer experience for existing mobile banking clients
problem
Most banking traffic happens through mobile channels, making targeted offers an important part of both product acquisition and client servicing. The challenge was to redesign a pre-approved credit card onboarding flow that required clients to review their information and complete a credit check, without creating unnecessary friction or undermining trust.
Role
Product designer & content designer
company
RBC Royal Bank of Canada
duration
8 months
setting
Multi-discipline team
Mobile App Authenticated Onboarding
Research & Insights
Where expectations broke down
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

Clients interpreted “pre-approved” as meaning no further approval steps would be required.

discomfort

Providing an exact income figure created uncertainty and made some clients feel they needed to give the “right” answer.

Hesitation

Clients wanted enough information to compare options before committing to a card.

Confusion

Upsell and downsell outcomes left clients unclear about their approval status and what would happen next.
Mobile App Authenticated Onboarding
Constraints & Alignment
Designing within real-world constraints
I collaborated early with product, business, legal and engineering to surface the dependencies shaping the experience. Rather than designing around them later, I brought these constraints into the process early to align teams and make more informed product decisions.

Offer Logic

Card offers were tied to unique offer codes, limiting which products could be surfaced within a targeted offer.

Downsell Requirement

Clients presented with a downsell card had to explicitly decline it; exiting without doing so could result in receiving the card.

Delivery Address

Technical limitations required delivery information to be resolved before the final adjudication step.

Product Comparison

Eligibility and offer-code logic limited the ability to freely compare the targeted card with products outside the eligible card suite.
End-to-end card offer flow mapping eligibility, decision points and alternate outcomes
Mobile App Authenticated Onboarding
Core Design Decisions
Reframing the happy path
My research showed that clarity, not fewer steps alone, was essential to reducing friction. I reframed the experience around setting expectations early,helping clients understand the offer and removing unnecessary uncertainty throughout the flow.

Set expectations early

I removed “Apply” language in favour of a more transparent narrative around confirming client information. I changed the primary CTA to “Get Started” and introduced a “What to Expect” screen that surfaced the credit-check requirement before clients progressed.

Prioritize meaningful benefits

Research showed stronger interest in benefits clients could use immediately. I redesigned the information hierarchy to surface tangible, relevant value before benefits dependent on future spending.

Reduce stress around income

Instead of relying solely on an exact income figure, I explored income ranges and validated them with risk partners to create a less stressful interaction while respecting approval requirements.

Simplify delivery

I made the previously reviewed mailing address the default delivery address, removing an additional selection step. I then reinforced the address on the final screen alongside the application and contact information.
Mobile App Authenticated Onboarding
Key Interface Screens
From Decisions to Experience
Translating research insights and product constraints into clearer, more intentional moments across the onboarding journey.

A clearer start to the offer

Setting expectations before clients move deeper into the flow

Benefits built around client relevance

Surfacing the information clients valued most when evaluating the offer

A less stressful income interaction

Reducing uncertainty while respecting approval requirements

Simplifying delivery details

Reusing reviewed information to remove an unnecessary decision point
Mobile App Authenticated Onboarding
Alternate Outcomes
Making alternate outcomes easier to understand
Upsell and downsell paths proved to be the most challenging moments in testing. Clients were often unsure whether they had been approved, why another card was being introduced and what action was required of them. I focused the experience on making status, choice and next steps explicit.

Upsell

Clearer choice after approval

I redesigned the experience to acknowledge approval before presenting the upgraded option. I gave clients a clear choice between the original and premium cards, with access to product information to compare both options.

Testing insight

Clients understood that both cards were available to them,although introducing a new decision at this stage still createdadditional cognitive load.

Downsell

Putting the client in control

For clients eligible for a different card, I clarified the available offer and introduced an explicit decision point. I also added a confirmation step when declining to reduce ambiguity around the outcome.

Testing insight

93% of clients reaching this experience selected either Accept or Decline, while 67% of those who opened the downsell product page accepted the offer.
Mobile App Authenticated Onboarding
Upsell & Downsell Flows
Upsell & Downsell Screens
How alternate card outcomes were originally introduced at the end of the journey
Original Upsell Flow
An overlay introduced the upgraded card, adding another decision at the end of the journey.
Original Downsell Flow
An intercept introduced the alternate card before clients reached the product page.
Mobile App Authenticated Onboarding
Upsell & Downsell Solutions
Final solutions for alternate card scenarios, designed to create clearer choices and more confident decision-making.

Upsell

The redesigned upsell flow confirms approval first, then helps clients compare and choose between the original and upgraded card.
Prototype

Downsell

The downsell flow clearly introduces the alternate offerand gives clients an explicit way to accept or decline it.
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 create a scalable experience while connecting with client needs?

In our research we saw clients were less interested in benefits that required a certain spend. They were more interested in benefits that were available immediately with aquisitions. Since this flow needs to be scalable for all credit cards at the bank a clear information hierarchy was implemented, with tangible, readily available benefits to the top.
Testing -  Positive reception from users. Users' liked that they can make an informed decision and equate cost to benefit. They also appreciated looking at features to how it can benefit their day-to-day life.
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".
Mobile App Authenticated Onboarding
Handoff & Collaboration
From design to implementation
My work extended beyond final interface design. I partnered closely with engineering, business analysts and product leads to translate the experience into clear, implementation-ready documentation and maintain alignment as the solution moved into development.

Engineering & BA Handoff

I created detailed walkthroughs and annotated wireframes to document screen behaviour, decisions and transitions across the flow.

Process Flows

I created annotated end-to-end flows that gave engineering and architecture teams a shared reference throughout development.

User Stories

I collaborated with business analysts, engineering and product to shape user stories and connect requirements directly to the supporting design assets.
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

A clearer flow with strong completion

The final experience balanced complex requirements with clearer client decisions.

67%

Flow completion

Clients entered the flow and continued through completion.

6 min

Average completion time

Most clients completed the happy path in six minutes or less.

92%

Original offer approval

Clients entering the flow who wereapproved for the original offer.

67%

Downsell acceptance

Clients who opened the downsell product page and accepted the offer.

27%

Upsell acceptance

Clients approved for an upsell who accepted the upgraded 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