Credit card registration

The customer experience around using credit cards is a crucial part of this bank’s ecosystem. Credit card customers are 80% of their customer base. We wanted to address existing customer pain points, increase registration completion and become better at attracting the attention of millennials.

Reg- process-1.png

Discovery

To kick this project off, I briefed a team of visual designers, ux designers and copywriters.

We started diving into research from customer feedback, call centre data, analytics, competitive insights, and co-creation sessions.

Most customers see the onboarding experience as setting the stage for future engagements with a company. Big glitches are worrisome as it is unclear if the poor service will translate into other aspects of their relationship.

Throughout discovery and conversations with the client, I started to realize that we were making an unnecessary distinction between activation and registration. The business constantly talks about them separately, but customers don’t see these as different things. Customers see the mobile registration process as having three steps; download the app, activate the card and personalize it.

Reg- Customer-process.png

As part of discovery, I asked the team to do a deep dive into mapping out what the current process looks like. In the existing flow, it was clear that sections have been added after the fact and there were some use cases that required users to do a one-time pin multiple times.

Reg-original-flowmap.png
Reg-Process-2.png

Insights

Based on our research summaries, I distilled what our project goals were.

CUSTOMER PAIN POINTS

  • Wait time between getting approved for a card and receiving the card

  • Current flow seems long and cumbersome

  • Creating login credentials is painful

  • Don’t see a point in using mobile. 75% call to activate, 9.4% is on mobile

  • Inputting duplicate data

BUSINESS GOALS

  • Attract more millennials to be more competitive.

  • Lower call volume

  • Increase online engagement especially on mobile

OUR GOALS

Reg-goals.png

Easier

  • Allow customers to use the card right after application

  • Easier verification

  • Reduction in need to call iN

Smarter system

  • Use known information

  • Reduce verification steps

More value

  • Provide more benefits for online enrolments

  • Seamless integration of other services and transparency of benefits

SUCCESS MEASURES

  • Under 2 min to complete the flow

  • Earlier use of card before getting plastic

  • Call decreases to the call center

  • Less abandonment throughout the flow

Reg-Process-3.png

Concepts

To develop concepts, I gathered everyone in a room and after doing a synopsis of what we were trying to achieve, I facilitated a brain thinking exercise based on our goals. Each person individually sketched out concepts based on the goal themes. I worked with the UX designer to help him distill next steps based on all the sketches.

Based on the sketched concepts, I asked the team to create prototypes to test our two strongest ideas. One concept had the user filling out the bare minimum and setting preferences later on, the other had all the original content, leveraged a scroll and had the ability to skip.

Reg-Process-4.png

Testing

We had two prototypes that used a different mechanism to progress through the process, one that had a linear scroll and one that had more distinct steps.

Reg-Testing-concepts.png

After shopping the prototype around, and using the prototypes ourselves, we decided to go with the scroll approach. I worked with our client, the product owner, to make sure the new approach met the bank’s business needs and security goals.

USABILITY TESTING GOALS

  1. Test customers’ overall reactions to the new designs, including activation and registration

  2. Explore customers’ needs and opportunities that can be applied to future designs of the onboarding experience

  3. Better understand the reasoning behind actions (What do customers desire/expect from their onboarding experiences)

  4. Identify which features garner the greatest appeal to customers when registering, as well as which features/benefits would be expected during the on-boarding process

  5. Identify areas of optimization for the next round of creative development

USABILITY PROTOTYPE

Overall customers liked the flow, some users found it too simple and because of this – felt it might not be as secure as what they use today.

ALL IN ALL

This was an incredible springboard for discussion. This won us the ability to actually think through designing the whole flow.

Reg-Process-5.png

Iterate

 

Looking through what we learned in testing, we prioritized personalization and features that would make using the experience faster in the future. Instead of reducing the steps, we tried a version that felt faster – even though the number of steps were the same as the original flow. We found that users expected to spend some time on registering their credit card and actually preferred to go through the necessary steps to set it up properly.

 

We decided to break the flow into sections. The sections match the users existing mental modal that we uncovered from research.

Reg-final-concept.png

New flow

Reg-newflow.png

Section detail

Reg-Section-detail.png

There was a lot of back and forth with our client to convince them that this was the approach to take instead of a hub and spoke model that they were initially pushing for. In reviews, we would be going through the screens in Sketch files – and there were a lot of them – so it was hard to imagine that this could actually feel fast.

Reg-Sketch-file.png

I asked the team to create a prototype to help illustrate the screen animations and how short the flow feels when you actually go through it.

Once they saw it in a prototype they were also convinced that this approach felt right.

This flow is now under development. Our client was so happy with the new experience he actually moved other features around in his roadmap to accommodate the redesign.

Reg-process-6.png

Development

Explore more projects

feedback-scr4.jpg

JoeZoo

Responsive Digital Classroom

Proto-5.png

Citibank

Paydown Calculator

mockaroon-Efz7CTysCnE-unsplash.jpg

Critical Mass

Career Development Guild