Back to main

Next Project

photoTAN

The photoTAN project aims to provide a secure, easy way for over 10 million Commerzbank users to confirm transactions. It enables users to activate devices, verify transactions, contact support, and unblock cards without needing to visit a branch.

The photoTAN project aims to provide
a secure, easy way for over 10 million Commerzbank users to confirm transactions. It enables users to activate devices, verify transactions, contact support, and unblock cards without needing to visit a branch.

App Store

Google Play

My Role: Senior Product Designer

Company: outsourced IT-company Commerzbank, Fintech

Cross-functional team: 14 Members

My Role: Senior Product Designer

Company: outsourced IT-company Commerzbank, Fintech

Cross-functional team: 14 Members

App Roadmap

As I had just joined the project, understanding the app’s functionality was essential. Since I had been using the Commerzbank app as

a customer for over six months, I created an app roadmap to gain

a detailed overview of the product and its key features.

As I had just joined the project, understanding the app’s functionality was essential. Since I had been using the Commerzbank app as a customer for over six months, I created an app roadmap to gain a detailed overview of the product and its key features.

Competitive Analysis

After mapping the app, I moved on to analyzing competitors. Since photoTAN is a security requirement for most German banks, I reviewed the functionality and user feedback

of similar apps from Deutsche Bank, Sparkasse, Postbank, and ING-DiBa. This analysis helped me better understand the specific features and user expectations

for security apps, allowing me to identify areas where we could improve our product to stay competitive.

After mapping the app, I moved on to analyzing competitors. Since photoTAN is a security requirement for most German banks, I reviewed the functionality and user feedback of similar apps from Deutsche Bank, Sparkasse, Postbank, and ING-DiBa. This analysis helped me better understand the specific features and user expectations for security apps, allowing me to identify areas where we could improve our product to stay competitive.

Hypotheses

To dive deeper into the project, I needed a clearer understanding of the team’s insights. Since the development team, project managers from both my company and Commerzbank had been working together for a while, I suggested a workshop to assess current challenges and future goals. During the discussion, we uncovered a key hypothesis: many photoTAN users are unaware of the app’s features that can help them in unexpected situations, without needing to contact the bank or support line.

📌 This screenshot is from a real document provided by the UX lab after the completion of our user tests. It highlights key findings related to the photoTAN app’s limited user engagement beyond transaction confirmation and the lack of awareness about other useful features. The document also touches on users' mental models and reluctance to explore more complex functionalities in the app.

User Testing & Problem Discovery

We conducted interviews with current bank customers, ranging in age from 25 to 55, focusing on their experience with the app's current functionality.

Through these conversations, we uncovered key issues and confirmed our hypothesis: 65% of users were either unaware of or ignored the additional features beyond transaction confirmation.

To validate the team's hypothesis, I organized the first user test. Since outsourcing companies don’t have access to bank clients, I collaborated with a UX lab. I developed questions based on the hypothesis and created a detailed plan for engaging with clients. We conducted interviews with current bank customers, ranging in age from 25 to 55, focusing on their experience with the app's current functionality.

Through these conversations, we uncovered key issues and confirmed our hypothesis: 65% of users were either unaware of or ignored the additional features beyond transaction confirmation.

To validate the team's hypothesis,

I organized the first user test. Since outsourcing companies don’t have access

to bank clients, I collaborated with a UX lab.

I developed questions based on the hypothesis and created a detailed plan for engaging with clients.

We conducted interviews with current bank customers, ranging in age from 25 to 55, focusing on their experience with the app's current functionality.

Through these conversations, we uncovered key issues and confirmed our hypothesis: 65% of users were either unaware of or ignored the additional features beyond transaction confirmation.

Step 1: Wireframes

After completing my analysis and user tests, I started working on the concept. Together with the bank’s UX researcher, who was also present during the testing, I developed two approaches: User-Based and Feature-Based. The main goal was to increase focus on the app’s features while ensuring that the core function—transaction confirmation.

📌 The goal of the User-Based approach was to adapt the home screen according to the available features for the selected account. This ensured that users only saw relevant options, making the app more personalized and easier to navigate.

📌 The goal of the Feature-Based approach was to display all available features and then guide the user after they selected their account. This approach ensured that users were aware of all the app's capabilities while receiving clear instructions on how to use them effectively.

Step 2: Mockup-Based User Testing

After developing the two approaches, I needed to test them with users again. I organized

a second user test, creating a clickable prototype and preparing open-ended questions.

The goal was to determine which approach was more intuitive and user-friendly.

The result: users preferred the Feature-Based approach. It was more structured, had

a clearer layout, and allowed users to find information more quickly.

After developing the two approaches, I needed to test them with users again.

I organized a second user test, creating a clickable prototype and preparing open-ended questions. The goal was to determine which approach was more intuitive and user-friendly.

The result: users preferred the Feature-Based approach. It was more structured, had

a clearer layout, and allowed users to find information more quickly.

After developing the two approaches,

I needed to test them with users again.

I organized a second user test, creating a clickable prototype and preparing open-ended questions. The goal was to determine which approach was more intuitive and user-friendly.

The result: users preferred the Feature-Based approach. It was more structured, had a clearer layout, and allowed users to find information more quickly.

📌 This excerpt from the UX lab report shows a clear preference for the Feature-Based approach. Users appreciated its clearer layout, well-structured navigation, and improved sense of security when selecting accounts. The feedback confirmed that this approach made the app more user-friendly and intuitive.

Step 3: New design-system

After choosing the approach, I moved on to the visual part. During my research and collaboration with the bank’s internal team, I discovered that the photoTAN design system hadn't been updated in over 5 years, while the main banking app had a completely different look. This inconsistency impacted user perception of the product and affected Commerzbank's brand image.

📌 The screenshot shows how photoTAN looked with its outdated design system compared to the bank’s main app. This visual disparity highlighted the need for an update to align with the bank’s current branding.

I began integrating components into the photoTAN system to align its appearance with the bank's main app. I worked closely with the development team to ensure the components fit seamlessly into our system.

Step 4: New Design Vision

After launching the updated design system, I developed a plan and aligned it with the business team for gradual implementation. Since a full redesign couldn’t happen overnight,

I worked closely with the development team to integrate components over time.

I created a backlog, prioritizing key changes, and we successfully updated the homepage and added new features based on our research. Accessibility was a focus, ensuring the app is inclusive. We’re continuing to integrate remaining components and update other pages.

Here’s a look at what we’ve accomplished so far.

👩‍💻 My Role: Senior Product Designer

💼 Company: outsourced IT-company Commerzbank

🤩 Team: 14 Members

Step 3: New design-system

I began integrating components into the photoTAN system to align its appearance with the bank's main app.

I worked closely with the development team to ensure the components fit seamlessly into our system.

Step 4: New Design Vision

After launching the updated design system,

I developed a plan and aligned it with the business team for gradual implementation. Since a full redesign couldn’t happen overnight, I worked closely with the development team to integrate components over time.

Result

After I led the redesign of the photoTAN app, we achieved significant improvements in usability and user satisfaction. The app now has a 4.7 rating on the App Store, positioning it as one of the top solutions for secure transaction verification.

To ensure the success of the redesign, we conducted additional user tests, which confirmed better usability and feature discoverability.

Key results include:

Increased user engagement: More users are exploring features beyond transaction confirmation, thanks to the clearer design I developed.
Support call reduction: We saw a 3% decrease in support requests related to navigation after streamlining the interface.
Consistent branding: By aligning the design system with the bank’s main app,
we improved brand perception and trust.

While we continue refining the app, these changes have already had a noticeable impact on both user experience and the product's market standing.

Result

To ensure the success of the redesign,

we conducted additional user tests, which confirmed better usability and feature discoverability.

Key results include:

Increased user engagement: More users are exploring features beyond transaction confirmation, thanks to the clearer design I developed.
Support call reduction: We saw a 3% decrease in support requests related to navigation after streamlining the interface.
Consistent branding: By aligning the design system with the bank’s main app,
we improved brand perception and trust.

While we continue refining the app, these changes have already had a noticeable impact on both user experience and the product's market standing.

Step 3: New design-system

After choosing the approach, I moved on to the visual part. During my research and collaboration with the bank’s internal team,

I discovered that the photoTAN design system hadn't been updated in over 5 years, while the main banking app had a completely different look. This inconsistency impacted user perception of the product and affected Commerzbank's brand image.

I began integrating components into the photoTAN system to align its appearance with the bank's main app.

I worked closely with the development team to ensure the components fit seamlessly into our system.

My Role: Senior Product Designer

Company: outsourced IT-company Commerzbank, Fintech

Team: 14 Members

Result

Here’s what we achieved with the app redesign — and below,

I’ll walk you through how I got there.

Problem Statment

Most users perceive photoTAN only as a security app for confirming transactions. When I analyzed metrics, I found that self-service features (like card unblocking or PIN recovery) were rarely used. Users preferred to visit branches or call support instead. This led to low feature adoption and increased operational load on support teams.

User Experience

I started by reviewing the current app to identify usability gaps and visual flaws. The analysis showed missing onboarding and hidden key functions, helping define priorities for the redesign.