How to: Apple Pay in the Mobile Banking App

Apple Pay in the Mobile Banking App by Julia Geisendorf

In May 2020 we went live with the Apple Pay feature in the Commerzbank mobile banking app. It was my first project at Neugelb. The full process was a new experience for me and led to new learnings and insights.??

With this text I want to share my journey within the development of the Apple Pay feature.??

Methods??

1. Alignment Workshop?

2. Wireframing?

3. Quantitative User Testings?

4. Qualitative User Testings?

Team

Visual Designer, User Researcher, Project Manager, Product Owner, iOS Developer,?and me for UX Concept?

The Challenge?

Before the new Apple Pay feature was released, Apple Pay was only accessible to app users with a credit card. To make Apple Pay accessible to more users, a free virtual debit card should be offered to link the current account to the Apple payment service as well as push provisioning for a simplified verification process.?

For the Mobile Banking App, the creation of the virtual debit card formed the first complete in-App request route.??

So, the goals within the process of creating this feature were to provide the Virtual Debit Card (VDD) in the mobile banking app, implementing apple pay using in app-provisioning and making users understand the advantages of the virtual debit card.?

Given that the general process for setting up a virtual debit card and push provisioning was largely described by Apple, the biggest challenges in this project were mostly of a technical nature. The technical requirements of different teams had to be harmonized behind the scenes of the feature interface and combined with the requirements of Apple Pay without neglecting the perspective of the mobile banking app users.??

Understanding?

At the beginning of the project not only the project was new to me but also Neugelb as my new employer.??

“What are patterns of the app?”??

“Where will this feature be placed in?”?

“How is Neugelb approaching new projects?”??

Those were some questions I asked my Project Manager and the Product Owner during a mini- interview dive into the general processes of Neugelb as well as what kind of expectation they had for the project. Their input helped me especially in planning the alignment workshop.??

Wireframing?

Wireframing the flow gave me the possibility to try to combine Apple’s requirements with the high- level patterns of the Mobile Banking App. Not only did this help me to outline the scope of the project, this wireframe was also the basis for the following alignment workshop.??

Another step I did before was identifying the different use cases that users might go through. Besides the two main scenarios activating Apple Pay & Requesting a virtual debit card I detected a few more sub-scenarios that needed to be considered:?

Activating Apple Pay with in-app provisioning?

1. The User already has more than one eligible card to connect to Apple Pay?
2. The User has one eligible card to connect to Apple Pay?

Requesting a VDD and activating Apple Pay with in-app provisioning?

1. The User has no eligible credit card but wants to activate Apple Pay?
2. The User has eligible credit card(s) but wants to setup a virtual debit card to activate Apple Pay?
3. The User already has a virtual debit direct card but wants to setup another one and add it to Apple Pay.??

Alignment workshop?

During the interviews with the product owner and the project manager it turned out they wanted to have a workshop that would reveal both the technical and business requirements of the feature. At the same time, this would bring all departments involved to the same page about the implementation phase of the feature and the associated requirements as well as potential hurdles.??

With all this in mind I started outlining the workshop plan and afterwards presenting it to my team to get feedback. Step by step I could concretize the workshop’s flow and fill it with concrete tasks:?

Intro -> Sharing -> Specifying -> Planning -> Check out?

The idea of this workshop was to have something that we could look at and actively work with so that we do not just discuss abstract matters and instead engage in a more practical way.??

For the workshop day I planned to print these wire flows on large poster boards so that we could literally walk through each step of the flows. In the workshop I asked each team to present their requirements and hurdles and assign them to the appropriate steps. Then we discussed each point and tried to solve any problems.??

Based on the previous points the last step defined the tasks and put them into a schedule.??

In the end we had several insightful outcomes resulting from the workshops like KPIs, a road map, and determined responsibilities. ?

Adaption?

Based on the workshop requirements and discussions I adjusted the wire flow and added more text and headings on each screen to make them easier to understand. For certain screens I added additional descriptions to further explain the technical and business requirements.??

This new version served as the basis for further discussions and was revised a few times before we moved on to the next step.?

Prototyping and Design?

In preparation for the testings I started to design using the components of the design system. Other elements such as icons and illustrations were created by one of my Visual Designer colleagues.??

The two main decisions made during this phase were: ?

?1. Highlighting the virtual debit card??

?2. Creating two prototype versions.??

Testing and Iterating?

For me it was exciting that we had a lot of room to test and iterate. In the end we went through three testing rounds in total and accordingly did four major iterations (including the one that took place after the alignment workshop).??

In-depth Usability Test?

The first testing was all about understanding how users navigate through the entire process. This involved in detail the comprehension of the process and the given information.??

“Is it sufficient and understandable or is something missing?”?

“Do they understand what the Virtual Debit Card is for?”?

“Are there trust or fear issues for Apple Pay and/ or VDD?”??

Internal usability testing?

To quickly get a sense of whether our customizations were headed in the right direction, we decided to conduct a quick round of internal usability testing. To its end we conducted five 30-minute interviews with colleagues who were not working on the product.?

When asked what they did after completing the process all users were able to explain what steps they had just gone through and what the outcome was.??

Remote unmoderated usability study?

The goal of the unmoderated usability study was to test the feature with a bigger audience to detect further major hurdles, we could not discover through moderated tests. This led to new findings and adaptions.?

After implementing all the changes in the process, we were able to finalize production and go live by May 2020.??

Learnings?

My takeaway from the Apple Pay journey was that testing is always useful and necessary even if you think the process seems straightforward. Usually everyone involved in the process is biased in reviewing the product. It is also helpful to conduct early user testing with wireframes to bring the user perspective into the game from the start.??

For me, it was my first app project that I accompanied from the beginning to the end. I have learned a lot during this project and can proudly look back on this time.?

You can find more information about Apple Pay in the Commerzbank Mobile Banking App here:

?

?