Why user flows are important?

The importance to know all the flows that a user could face in your site to achieve a goal.

Currently, I am working in the digital credit card acquisition project at an important bank in Mexico.

The principal goal is to improve the user experience in the end to end journey to get a credit card online.

The different journeys that a user can take to apply for a credit card are:

Home: Credit card shortcut > digital credit card acquisition.

Menu home: product list > digital credit card acquisition.

Menu home: product list > compare tool > digital credit card acquisition.

Menu home: product page > digital credit card acquisition.

Link home: “Conoce todas las tarjetas” > digital credit card acquisition.

Link footer: digital credit card acquisition.

My task was to validate every journey and improve them to ensure that each one provides the best experience. Therefore, I asked to the metrics team for data to understand the users’ behavior into the site.

I discovered an interesting behavior:

Data reference explained by the metrics team

Users are used to selecting a credit card, then looking for another one and finally return to the first one that they had selected.

According to this behavior, the compare tool was the principal focus to improve.

The hypothesis

Usually users navigate between different credit cards looking for higher o lower tier than the first one they had selected to know the difference between each other before taking a decision.

However, they were not doing this task with the compare tool. The biggest question was why they were not using this?

Well, we carry out a quick evaluation of the tool, and we discovered that its was created thinking only in a single flow.

That is to say the user only could access to the compare tool selecting in the menu the option “Todas las tarjetas de crédito”, adding two or three credit cards and comparing.

This task was simple for users that were exploring the site and wanted to know more about the cards trough the product list page. However, if a rational user wanted to analyze and compare as the first task, he/she couldn’t do that.

So, we implement an A/B test, where we wanted to try how a shortcut worked at home.

The result was not good enough because the conversion rate was bad for this proof. However, I wanted to know why this tool had a bad performance and I applied thinking aloud test with 6 users where I detected the next insights:

• The flow was not intended to start with a direct link from home. So the navigation looked broken and the task was completed with mistakes.
• They felt confused about which credit card they had to select because of the many options that were available.
• Add a credit card was difficult for them, and they did it by a different way that the UI component was thought.
• They did not identify what was happening at the moment that they completed an action.
• The text was not clear for them. They did not find a real value in every point that they read because all the text was mixed.
• Some user got lost in the interface when they were trying to compare, they thought that “Apply online” was the CTA that would start the comparison. Then they read the information in request form’s step 0, and they returned to the previous page and again selected another credit card’s CTA to evaluated too.

Through these ideas, I was able to visualize all the usability problems of the compare tool.

As conclusion from the test, the principal problems were about interaction visibility of system status, information architecture and the user flow.

Also, I worked in a benchmark to identify the best practices that others banks have been implementing.

Some insights were found in international banks because in Mexico the only brand that use a compare tool is American Express. Therefore, we have an advantage to create a great tool that be useful for rational users as Veronica and Angelica (These User personas were worked before with the knowing of the data and surveys with real people).

Thus, I had another point to support how users are used to using a compare tool before taking a decision. In fact exist a concept from behavioral economics that is called social proof, its says that a user before taking a decision is used to looking for advice in social media or with family members.

After all, I showed to the stakeholders the usability problems and why a changed was necessary.

So, I started with ideation process but I could not change completely the experience because I had to reduce the time impact with the developer team. Therefore, changes had to be minimized.

I worked in a co-creation workshop to identify which was the elements that users needs in a credit card compare tool. In this session they created their optimum compare tool.

Also, I applied card sorting test to have a better understanding of what users wanted to evaluate first in the compare tool. For example if is most important for them the benefits or the costs.

So I continued with the prototype and I applied some usability test to iterate and give the best results and the easiest way to users to complete the task.

Research methods applied: Co-creation, usability test and card sorting.

Finally, I got the last design and the changes are the following:

• By the hand of the UX writing team we created a list of three most important benefits of each credit card, and then we chose the most representative benefit of every card to offer a significant value at the moment to evaluate a card.

• A filter with the possibility to select the incomes and/or categories to focus and lead time the users to take a better selection, also it helps us as a business to delimit if the user is a candidate of this credit card and reduce the frustration.

• Cognitive overload was reduced, improving the information architecture hierarchy facilitating reading and comprehension.

• The interaction was adjusted applying the visibility of system status and user control and freedom from the heuristics rules.

• Clear interactive elements and size adaptation, applying the Fitts’s Law to facilitate the mobile interaction.

These changes are being implemented by the developer team. Next steps to follow will be test the compare tool and again check the metrics and iterate the flow.

Create a clear user flow and understands the complete panorama is very important, to be able to identify the different uses cases that could exist. Also, is a good practice know if the lead comes from organic traffic or paid traffic (campaign).

You have to validate all the touch points in your website and validate broken links where the user could lose the intention.

Finally, always have in mind the usability, interaction, and design rules, that always have to be applied.

Flow