PagoFX
A summary of the last year and a half within fintech PagoFX (by Santander)
My role
My role began as a UX/UI Designer consultant for the PagoFX team. I was given the task of creating the MVP of the Web app or the web core. Half a year later my role and responsibilities increased to become one of the Product Designers of the project.
The Company
PagoFX is a fintech with a start up philosophy that helps you send money abroad. It is currently available in some European countries.
The Design Team
We were around 5 designers, each in a part of the project but all acting under the same umbrella and with the same goal. My role was to lead the design of the web app for both individuals, sole traders and companies. I was also part of a "Product Decision Team" that curated input from stakeholders for important strategic decisions. We had weekly team meetings to discover collaborative opportunities and frequent design reviews were scheduled with whoever was available at the moment.
Challenges
Entered a team that had no experience working with an embedded designer.
Creation of flows and processes for greater and better collaboration with the technical team.
Creation of the business part from scratch, including implementation with third parties and very complicated user verification.
Creation of flows and processes for greater and better collaboration with the technical team.
Creation of the business part from scratch, including implementation with third parties and very complicated user verification.
"We had little or no time to create a functional responsive website. The first step was to evaluate our strengths and weaknesses as a team and create the most flexible template possible".
Discovery
Multiple types of users will need distinct type of user verification and onboarding, and they required from us different type of information.
A various type of verification is required for the UK than for Spain or Belgium, depending on the law of each country. As a designer, you have to face different challenges and strategies as well as third parties involved.
A various type of verification is required for the UK than for Spain or Belgium, depending on the law of each country. As a designer, you have to face different challenges and strategies as well as third parties involved.
In-depth design
The creation of the MVP of the Web app and shortening the distance with our users. Until this moment only the Native apps had been launched and due to the typology of our target users, it was essential to make the jump to web responsive as soon as possible.
Research
When you are assigned a project everything starts with the analysis of your competitors and the basis of the target user(s) that the different stakeholders wish to engage.
When I entered the project, I very quickly realised the incredible competition we were facing, not only in terms of the number of users but also how powerful their tools were.
One of the first steps to be taken was not only to know the target user but also the stakeholders involved, including conversations with the Engineering team, Product, Business and internal users.
My approach included the generation of workflows and information architecture required by stakeholders. An attractive UI designed from branding. The inclusion of third parties for onboarding and user identity verification, being for retail very different than for SMEs (small and medium enterprises).
All this required the creation of a new working culture, including the Engineering team and other stakeholders. Validate and understand each problem and prioritise the workload. And of course, asking the right questions to find the right answers.
When you are assigned a project everything starts with the analysis of your competitors and the basis of the target user(s) that the different stakeholders wish to engage.
When I entered the project, I very quickly realised the incredible competition we were facing, not only in terms of the number of users but also how powerful their tools were.
One of the first steps to be taken was not only to know the target user but also the stakeholders involved, including conversations with the Engineering team, Product, Business and internal users.
My approach included the generation of workflows and information architecture required by stakeholders. An attractive UI designed from branding. The inclusion of third parties for onboarding and user identity verification, being for retail very different than for SMEs (small and medium enterprises).
All this required the creation of a new working culture, including the Engineering team and other stakeholders. Validate and understand each problem and prioritise the workload. And of course, asking the right questions to find the right answers.
Architecture and flows
The most challenging part of the design process for me has undoubtedly been the onboarding and verification process for SMEs. The following wireframes and flows show not only the web app process but also the Native apps I was able to design.
The most challenging part of the design process for me has undoubtedly been the onboarding and verification process for SMEs. The following wireframes and flows show not only the web app process but also the Native apps I was able to design.
The MVP
Context
PagoFX started as a mobile only solution for individuals (we call it: Retail). The new strategy for designing the MVP was to create a responsive website with the addition of the Sole traders and Business flows (onboarding and payments).
The web app would in addition connect to the product promotion landing page that was designed by another agency.
The web app would in addition connect to the product promotion landing page that was designed by another agency.
Minimum Research
When I joined the project the apps had been designed and implemented for over a year, which meant that the PMs, POs and dev team were eager to start building the website with the challenge of building it with the emerging design system (buttons and form fields).
Having to create almost everything from scratch, my first thought was to do minimal research:
Having to create almost everything from scratch, my first thought was to do minimal research:
-
Interviewing key stakeholders
-
By relaying on the POs understanding
- Analysing existing research
First demo
After a short iteration cycle using the directions from the ideation sessions with the different stakeholders, I needed to find the best overall shape for a first solution and the best way to implement it. All the while keeping in mind that we were running against the clock and that the hand-off would have to be the most polished we could deliver.
While implementing this first MVP, we started testing with potential target users and within the team itself. This all took place initially in London and expanded to Belgium, Poland and Spain as we grew.
While implementing this first MVP, we started testing with potential target users and within the team itself. This all took place initially in London and expanded to Belgium, Poland and Spain as we grew.
Flows in depth
At the same time as I was going through the first phase of ideation, gathering information and building the first wireframes, I started to build flows that we could show to the main stakeholders and dev team so that a first validation could be done.
The flows shown below are not only for the Web but also some of the app flows I was involved in, such as the creation of the flows for SMEs and Sole traders.
![]()
![]()
![]()
![]()
![]()
The flows shown below are not only for the Web but also some of the app flows I was involved in, such as the creation of the flows for SMEs and Sole traders.
Iteration never stops
Like many other projects, in our case there was also a lot of iteration mostly based on data collected from tools like Google Analytics or through testing and user interviews done by us (Design Team and POs).
Below are wireframes in low resolution for the iteration of our Sign up screen, documentation to test with users and to improve our Phone number field component.
![Sign up screen iterations]()
![Tests documentation]()
![]()
Below are wireframes in low resolution for the iteration of our Sign up screen, documentation to test with users and to improve our Phone number field component.
Achievements
By January 2021 desktop and mobile web had up to 70% better performance compared to native apps.
By January 2021 desktop and mobile web had up to 70% better performance compared to native apps.
Synthesising aesthetics
In addition to designing the wireframes for the Web app, I was part of the team that was in charge of executing and laying the foundations for the Design System that is currently used for both the web and native apps.
In addition to designing the wireframes for the Web app, I was part of the team that was in charge of executing and laying the foundations for the Design System that is currently used for both the web and native apps.
Everything takes shape and we start to build the designs so that most of the components are modular and responsive.
The Design System
How I was involved in the creation of the Design System and its evolutionLearning from others' failure
In the beginning we were three different teams working on different parts of the product. Our efforts fell on deaf ears as we worked with different stakeholders who could not find a common ground. Agreeing was the main challenge and we found common ground to work as hard as possible to achieve the goals of our different teams and stakeholders.
This effort involved the creation of a common Design System (which currently uses the Web app and Native apps).
Meetings twice a week to keep them up to date on the different objectives and to have a common Kanban for the whole design team.
Meetings once every two weeks, to set long term objectives according to the Business team's Road Map.
This effort involved the creation of a common Design System (which currently uses the Web app and Native apps).
Meetings twice a week to keep them up to date on the different objectives and to have a common Kanban for the whole design team.
Meetings once every two weeks, to set long term objectives according to the Business team's Road Map.
First steps
My day-to-day work during the first months included not only the creation of the MVP but also laying the foundations for the Design System.
In order to do this, the whole design team had to agree on the route to follow. Once this was achieved, including elements to the library would be not only comfortable but intuitive.
In the short term, using native elements should be the fundamental task as long as there are no resources needed to create the custom components. To a large extent we were able to create different modular components that in most cases were totally customised.
The continuous iteration and evolution of components were almost daily tasks for the whole team, in the case of the Web app almost all components had to be created from scratch.
In the long term, our goal as a web team was to be able to bring all the icons to font icons, while getting the illustrations to be .json to optimise the speed of loading the web.
In order to do this, the whole design team had to agree on the route to follow. Once this was achieved, including elements to the library would be not only comfortable but intuitive.
In the short term, using native elements should be the fundamental task as long as there are no resources needed to create the custom components. To a large extent we were able to create different modular components that in most cases were totally customised.
The continuous iteration and evolution of components were almost daily tasks for the whole team, in the case of the Web app almost all components had to be created from scratch.
In the long term, our goal as a web team was to be able to bring all the icons to font icons, while getting the illustrations to be .json to optimise the speed of loading the web.
The Design System
We started working with Abstract to share and manage the library in an efficient and fast way. This helped us to find possible duplicate components and to be more collaborative.
By including more designers in the team, it made this task less painful and less time consuming to have direct contact with the library. It also helps everyone learn from problems that other designers run into.
By including more designers in the team, it made this task less painful and less time consuming to have direct contact with the library. It also helps everyone learn from problems that other designers run into.
Achievements
By acting as separate companies, not only did we manage to separate ourselves from the main direction and objective, but it was also discouraging potentially valuable interactions between us.
Being able to create a common library has not only made the onboarding of more designers much more friendly but has also helped the different technical teams to be more agile and efficient.
Being able to create a common library has not only made the onboarding of more designers much more friendly but has also helped the different technical teams to be more agile and efficient.
Conclusion
My time at PagoFX has improved me as a professional, learning not only from leading figures within the fintech world but also from great professionals within the UX sector to whom I am grateful for this opportunity.In the year and a half that I have been in the team, I have been able to see improvements in myself when facing problems outside my comfort zone through the practice of good design and day-to-day communication with the multiple cross-functional teams.
At the end of the day, testing with real users and data-driven design has been a big driver for me to aim to improve the flows and the product that is PagoFX today.
New Tomorrow
A case study in five days
The problem
A brand dedicated to the production of bags using 100% recyclable materials wants to enter the e-Commerce model and open a multi-device online shop, with the aim of increasing sales in the national territory (Spain).
A brand dedicated to the production of bags using 100% recyclable materials wants to enter the e-Commerce model and open a multi-device online shop, with the aim of increasing sales in the national territory (Spain).
Research
Two main variables of sustainable brands have been found from the earliest stages of the Research process:
1. Brands whose products are made from plastics recovered from the oceans. These brands stand out for their social involvement, focused on environmental cleanliness.
2. Brands that trade in products made from recycled materials, such as leather, suede, old clothing, carpets or even fruit peels and skins.
Two main variables of sustainable brands have been found from the earliest stages of the Research process:
1. Brands whose products are made from plastics recovered from the oceans. These brands stand out for their social involvement, focused on environmental cleanliness.
2. Brands that trade in products made from recycled materials, such as leather, suede, old clothing, carpets or even fruit peels and skins.
Benchmark
Benchmark
![]()
![]()
![]()
![]()
Comparative table
After an initial assessment of the characteristics and particularities of each brand, a table was drawn up with comparisons of those characteristics most closely related to the nature of our project.
Conclusions
With the comparative table created, we can see the different functionalities that our competitors have. It is worth noting that 5 out of 6 brands do not offer the possibility of customising their products, and that the brand that does (Labienhecha) has not designed a specific tool, but rather customisation consists of the purchase of elements added to the product.
On the other hand, although most of them emphasise the durability of their products, only one brand has a guarantee of up to two years. While durability is not a factor that has to be linked to the guarantee, the latter will be a positive point to take into account when your customers compare your products with your competitors.
Finally, it should be pointed out that user registration to make a purchase is not necessary in 5 out of 6 of the brands investigated, Ecoalf being the only one that forces its users to register in order to complete the order.
After an initial assessment of the characteristics and particularities of each brand, a table was drawn up with comparisons of those characteristics most closely related to the nature of our project.
Conclusions
With the comparative table created, we can see the different functionalities that our competitors have. It is worth noting that 5 out of 6 brands do not offer the possibility of customising their products, and that the brand that does (Labienhecha) has not designed a specific tool, but rather customisation consists of the purchase of elements added to the product.
On the other hand, although most of them emphasise the durability of their products, only one brand has a guarantee of up to two years. While durability is not a factor that has to be linked to the guarantee, the latter will be a positive point to take into account when your customers compare your products with your competitors.
Finally, it should be pointed out that user registration to make a purchase is not necessary in 5 out of 6 of the brands investigated, Ecoalf being the only one that forces its users to register in order to complete the order.
User persona
At this point in the Research process, many of the original questions are beginning to be answered, but the specifics of our target customers still need to be uncovered.
To answer these questions, the following User Personas are developed.
![]()
![]()
At this point in the Research process, many of the original questions are beginning to be answered, but the specifics of our target customers still need to be uncovered.
To answer these questions, the following User Personas are developed.
User journey
The elaboration of the User Journey puts us in the context of two potential consumers and how they go through the various phases of pre-sale, sale and post-sale. This User Journey is based on the possible behaviour of the User Persona, which according to the Theory of Planned Behaviour (TPB), the intention to buy a product, in this case a recyclable product, derives from the interaction of three subjective constructs: attitude, subjective norms and behavioural control.
In our case, the User Journey will help us to assess opportunities or pain points from the time the target customer has the attitude of purchase (first construct) of a recycled product, which will lead to a positive or negative evaluation (second construct) by the customer regarding the purchase of this product and as such is a direct antecedent of the purchase intention (third construct). Therefore, as a brand we have two major opportunities to impact the customer prior to the purchase of the product, influencing the customer's view of the purchase of recycled products, thus establishing a positive valuation of the product and therefore the brand.
But as not everything is black and white, it has also been decided to add another type of User Journey, referring to a possible consumer different from the previous one, in which the second User persona (Amanda) will play the role of a customer who, without a direct motivation to buy a bag made from recycled materials, is able to fit into the User Target, showing possible opportunities and pain points that otherwise would not be valued.
![]()
![]()
The elaboration of the User Journey puts us in the context of two potential consumers and how they go through the various phases of pre-sale, sale and post-sale. This User Journey is based on the possible behaviour of the User Persona, which according to the Theory of Planned Behaviour (TPB), the intention to buy a product, in this case a recyclable product, derives from the interaction of three subjective constructs: attitude, subjective norms and behavioural control.
In our case, the User Journey will help us to assess opportunities or pain points from the time the target customer has the attitude of purchase (first construct) of a recycled product, which will lead to a positive or negative evaluation (second construct) by the customer regarding the purchase of this product and as such is a direct antecedent of the purchase intention (third construct). Therefore, as a brand we have two major opportunities to impact the customer prior to the purchase of the product, influencing the customer's view of the purchase of recycled products, thus establishing a positive valuation of the product and therefore the brand.
But as not everything is black and white, it has also been decided to add another type of User Journey, referring to a possible consumer different from the previous one, in which the second User persona (Amanda) will play the role of a customer who, without a direct motivation to buy a bag made from recycled materials, is able to fit into the User Target, showing possible opportunities and pain points that otherwise would not be valued.
Summary
We started working with Abstract to share and manage the library in an efficient and fast way. This helped us to find possible duplicate components and to be more collaborative. By including more designers in the team, it made this task less painful and less time consuming to have direct contact with the library. It also helps everyone learn from problems that other designers run into.
We started working with Abstract to share and manage the library in an efficient and fast way. This helped us to find possible duplicate components and to be more collaborative. By including more designers in the team, it made this task less painful and less time consuming to have direct contact with the library. It also helps everyone learn from problems that other designers run into.
MVP
Constrains
Like any project in the real world, it is decided to make an assessment of the possible Constrains that we may face when building the website, in order to have an objective view of the Must-have that it should have.
1. Construction of the Happy Path only
In this first phase, only the Happy Path is considered, i.e. from the moment the user enters the website until the end of the payment process, without taking into account possible failures such as 404 or 500 errors.
2. Payment gateway integration
This will depend on the time and equipment we'll have, and can be built from scratch or we can seek help from third parties such as Shopify.
3. Customiser tool
One of the key parts of the website will be the personaliser. It will be very important to carry out A/B tests with users to check its usability.
4. Presence of features such as 360º view or Videos
The 360º view or gallery with videos can be an attraction for many users. As for the 360º view, it will be key when building the customiser.
Like any project in the real world, it is decided to make an assessment of the possible Constrains that we may face when building the website, in order to have an objective view of the Must-have that it should have.
1. Construction of the Happy Path only
In this first phase, only the Happy Path is considered, i.e. from the moment the user enters the website until the end of the payment process, without taking into account possible failures such as 404 or 500 errors.
2. Payment gateway integration
This will depend on the time and equipment we'll have, and can be built from scratch or we can seek help from third parties such as Shopify.
3. Customiser tool
One of the key parts of the website will be the personaliser. It will be very important to carry out A/B tests with users to check its usability.
4. Presence of features such as 360º view or Videos
The 360º view or gallery with videos can be an attraction for many users. As for the 360º view, it will be key when building the customiser.
Must-have and nice-to-have
According to Nielsen and Norman Group, there are a series of Must-Have and Nice-To-Have that an e-Commerce should have.
Based on what NNGroup has proposed, a list has been drawn up with characteristics that the Web (Must-Have) and a Nice-To-Have will have, in order to have an added value that can delight our customers.
Must-have:
Descriptive product name
Recognisable images
Price (including possible extra charges)
Clear product options: Colour, size...
Availability or Stock
Clear way to Add a product to basket & Feedback that it has been added
Concise and informative product description
Customisation tool (in our case it is a fundamental part of the Briefing)
Nice-to-have:
Reviews:
From the list that NNGroup proposes (https://www.nngroup.com/articles/ecommerce-product-pages/), we have chosen to add Reviews on the Website, as they can be an opportunity to highlight the brand values, as well as a key indicator for a customer's purchasing decision.
According to a compilation of trends from BrightLocal, prospective buyers ignore comments older than three months.
Are they important? Yes. According to the Baymard Institute, 95% of users rely on other users' reviews to learn more about a product or to evaluate a product in a decisive way.
According to Nielsen and Norman Group, there are a series of Must-Have and Nice-To-Have that an e-Commerce should have.
Based on what NNGroup has proposed, a list has been drawn up with characteristics that the Web (Must-Have) and a Nice-To-Have will have, in order to have an added value that can delight our customers.
Must-have:
Descriptive product name
Recognisable images
Price (including possible extra charges)
Clear product options: Colour, size...
Availability or Stock
Clear way to Add a product to basket & Feedback that it has been added
Concise and informative product description
Customisation tool (in our case it is a fundamental part of the Briefing)
Nice-to-have:
Reviews:
From the list that NNGroup proposes (https://www.nngroup.com/articles/ecommerce-product-pages/), we have chosen to add Reviews on the Website, as they can be an opportunity to highlight the brand values, as well as a key indicator for a customer's purchasing decision.
According to a compilation of trends from BrightLocal, prospective buyers ignore comments older than three months.
Are they important? Yes. According to the Baymard Institute, 95% of users rely on other users' reviews to learn more about a product or to evaluate a product in a decisive way.
Special features
To the previously mentioned generic list, we have added a series of qualities and properties to highlight that will increase not only the brand value that we want to transmit but also the positioning and a positive rating with respect to the competition.
Highlight the durability and guarantee
The materials of which the bags are made, such as rubber and plastic fibre, are highly durable and resistant to external influences.
According to the European Union's 2018 Behavioural Study on Consumers' Engagement in the Circular Economy, which surveyed a diverse group of people between the ages of 25 and 60, the durability and repairability of a product were found to be features of high interest and they would like to see them on the product label or warranty. They conclude that these factors are effective in encouraging purchase and justifying the possible higher price of a product over one without these outstanding features.
Shipment
The fact that deliveries are free of charge or that in-store pick-up is available can be decisive for a quick purchase decision.
Purchase flow strategy
In the Benchmark phase, not only verticalised brands in the handbag trade were compared, but also how other e-commerce market leaders in the clothing trade implement the shopping flow strategy. In this type of retailer, the strategy is aimed at consumer engagement, i.e. the flow strategy seeks continuous and prolonged browsing in the catalogue, taking into account that the consumer's use cases will be to get ideas/inspiration and to make a multiple purchase in most cases. However, in the handbag retail vertical, user behaviour tends to be different. In this case, the user will be looking to make a direct purchase of one or a few units of the product, so the strategy to follow will be the one that involves the least interaction in the purchase flow.
Registration
The Log in / Sign up process for users does not have to be mandatory for a user to be able to track their shipment. It may cause unnecessary friction.
To the previously mentioned generic list, we have added a series of qualities and properties to highlight that will increase not only the brand value that we want to transmit but also the positioning and a positive rating with respect to the competition.
Highlight the durability and guarantee
The materials of which the bags are made, such as rubber and plastic fibre, are highly durable and resistant to external influences.
According to the European Union's 2018 Behavioural Study on Consumers' Engagement in the Circular Economy, which surveyed a diverse group of people between the ages of 25 and 60, the durability and repairability of a product were found to be features of high interest and they would like to see them on the product label or warranty. They conclude that these factors are effective in encouraging purchase and justifying the possible higher price of a product over one without these outstanding features.
Shipment
The fact that deliveries are free of charge or that in-store pick-up is available can be decisive for a quick purchase decision.
Purchase flow strategy
In the Benchmark phase, not only verticalised brands in the handbag trade were compared, but also how other e-commerce market leaders in the clothing trade implement the shopping flow strategy. In this type of retailer, the strategy is aimed at consumer engagement, i.e. the flow strategy seeks continuous and prolonged browsing in the catalogue, taking into account that the consumer's use cases will be to get ideas/inspiration and to make a multiple purchase in most cases. However, in the handbag retail vertical, user behaviour tends to be different. In this case, the user will be looking to make a direct purchase of one or a few units of the product, so the strategy to follow will be the one that involves the least interaction in the purchase flow.
Registration
The Log in / Sign up process for users does not have to be mandatory for a user to be able to track their shipment. It may cause unnecessary friction.
Information
architecture
The information architecture of the website will help us to gather all the necessary information to then start designing the MVP.
![]()
![]()
The information architecture of the website will help us to gather all the necessary information to then start designing the MVP.
Prototype
Desktop
![]()
![]()
![]()
![]()
![]()
![]()
Mobile
![]()
![]()
![]()
![]()
![]()
Success measure
KPIs
To measure user behaviour on the website, a series of metrics will be needed at several key points in the sales funnel. The main intention is that this funnel is as narrow as possible at the end of the checkout flow and that the majority of users with purchase intent complete their session with a transaction.
The conversion rate and bounce rate should be taken into consideration as sales indicators, as well as indicators that both the user experience and the user's understanding of the product have been favourable.
It is also worth noting the balance of the abandonment rate of the custom screen, which will indicate if there is something wrong with the process in order to address the problem as soon as possible.
To measure user behaviour on the website, a series of metrics will be needed at several key points in the sales funnel. The main intention is that this funnel is as narrow as possible at the end of the checkout flow and that the majority of users with purchase intent complete their session with a transaction.
The conversion rate and bounce rate should be taken into consideration as sales indicators, as well as indicators that both the user experience and the user's understanding of the product have been favourable.
It is also worth noting the balance of the abandonment rate of the custom screen, which will indicate if there is something wrong with the process in order to address the problem as soon as possible.
Find me at: carolaunchon@gmail.com
I’ll contact you in 1 or 2 working days.