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.