Swapplet 💳

OVERVIEW 📌

Swapplet is a digital bank account based in Panama, created to provide individuals in South America with access to U.S. dollars. The app focuses on delivering a friendly digital banking experience, enabling users to manage their finances effortlessly and efficiently from their smartphones. They are a client of a previous company I worked for, N5 Now.

 

Outcomes 📊

• Sign up conversion rates increased from 17.55%  to 46.32%
• More than 1,000 accounts created from the app.
• Reduced onboarding time by 32% by simplifying account creation into a single flow, including ID verification.

 

• Available on Google Store
• Available on Apple Store

 

READ FULL PROCESS ⬇️

The Problem 🔍

• User Verification: Opening a bank account with a passport is convenient but presents challenges in verifying a user’s identity. If not implemented well, it can create friction and lead to a high drop off rate.
• Complicated Onboarding: Online banking often involves complex onboarding with many steps (over 120 clicks!), causing some users to quit before completion.
• Trust and Safety: Users need to feel confident that their personal data, such as the passport used to create their account, and their transactions are safe. The interface should communicate transparency and reliability throughout the user journey.

 

The Opportunity 🎯

• How might we democratize banking and provide users with accessible ways to manage US dollars in South America?
• How might we encourage younger users (18-35 years old) to easily open a bank account through a seamless onboarding process within the app?
• How might we ensure users feel secure while uploading sensitive information, like their passports, by implementing robust KYC verification and strong security measures?
• How might we design an experience that instills confidence in users, making them feel safe while managing their finances through the app?

 

My Role 🙋‍♂️

I worked as the Product Designer, focusing on the end-to-end flow of this onboarding project in collaboration with my team, including the Product Manager, engineers, and design reviews with the Lead Designer.

 

The Team 🧑‍🤝‍🧑

• Product Owner: Claudia Bello Peralta
• Product Manager: Yorcelys Aguilar
• Lead Designer: Gonzalo Fasce
• Product Designer: Wagner Henriquez  (myself)

 

Responsibilities 🧐

• User Research: Conducting user research to understand the needs, behaviors, and preferences of the app’s target users. This includes creating user personas, conducting user interviews, and analyzing user feedback to inform the design decisions.
• UX Design: Designing the user experience of the app, including creating wireframes, prototypes, and user flows. This involves ensuring that the app is easy to use, intuitive, and meets the needs of its target users.
• UI Design: Designing the visual elements of the app, including the interface, color schemes, typography, and icons. This includes creating a consistent design language that is both visually appealing and functional.
• Collaboration: Collaborating with other members of the development team, including developers, product managers, and QA testers, to ensure that the design is feasible, technically sound, and meets the project’s goals and objectives.
• User Testing: Conducting user testing to evaluate the app’s usability and user experience. This involves testing the app with real users to identify areas for improvement and to ensure that the app meets the needs of its target audience.
• Iteration: Continuously iterating on the app’s design based on user feedback and data analysis. This includes incorporating new features, optimizing the user experience, and improving the app’s overall usability and functionality.

 

Tools 📐

• Adobe XD
• Miro
• Pen & Paper
• Whimsical

 

The Process 🕹️

The design process was broken down into the following stages:

• Empathize: We conducted user research to understand the needs, behaviors, and pain points of our target users. We identified key user personas, conducted user interviews, and gathered user feedback through surveys and other research methods.
• Define: We defined the problem statement, set goals, and established success metrics. We prioritized the features and functionalities of the app based on user research and input from the product manager.
• Ideate: We generated a wide range of ideas and potential solutions to the problem. We held brainstorming sessions with the development team, created sketches, and developed wireframes and prototypes.
• Prototype: We created low-fidelity and high-fidelity mockups of the app’s interface and user flows. We worked closely with the development team to ensure that the prototypes were technically feasible and aligned with the app’s overall vision.
• Test: We tested the prototypes with real users to gather feedback and evaluate the user experience. We worked with the product manager to define the testing parameters, recruit test participants, and analyze the results. We then used this feedback to iterate on the design and improve the user experience.
• Deliver: We broke down the app’s features and functionalities into smaller user stories, which were developed in sprints. We worked with the development team to ensure that the app’s design was implemented according to the design system and guidelines.
• Iterate: We continued to iterate on the design based on user feedback and data analysis. We conducted regular usability testing, monitored user engagement metrics, and identified areas for improvement. We worked with the product manager to prioritize the design updates and collaborated with the development team to implement them in future sprints.

The design process for the project followed a design thinking approach within an agile environment. We empathized with users, defined the problem and goals, ideated potential solutions, prototyped, tested, delivered the app, and iterated based on user feedback and data analysis. As a team, we try to apply this process as much as possible, but sometimes we need to tweak it a little bit.

 

 

DISCOVER

Understand the core of the product 👨‍🎓

To kick off the project, I collaborated with the product manager to define the app’s vision, goals, and target market, mapped features using post-its to create user flows, identified pain points for improvement, worked with developers to craft user stories for sprints, and delivered a user-centered, technically feasible design aligned with the app’s purpose.

 

 

Key findings 📑

• User onboarding is a critical pain point: One of the main challenges for users was the onboarding process, which required a lot of information and documentation to be submitted. We worked to streamline this process and reduce the number of steps required to create an account, while still ensuring compliance with regulatory requirements.
• Users value simplicity and ease of use: In our user research, we found that users preferred a simple, intuitive interface that made it easy to complete transactions and manage their finances. We worked to design the app with this in mind, focusing on a clean and user-friendly interface that was easy to navigate.
• International functionality is crucial: Our target audience is primarily located in South America, where many users expressed a desire to access American dollars through the app. We focused on ensuring that the app could support international transactions, making it easier for users to manage their finances across borders. In this context, user writing (UXW) was critical, as Spanish has different slang variations in each country.
• Security and privacy are key concerns: Users were understandably concerned about the security of their financial information, particularly when using an online banking app. We worked to ensure that the app met all necessary security and compliance requirements.
• Ongoing support: Finally, we found that users appreciated ongoing support around the app and its features. The bank has a help center and support system to ensure that users can get the assistance they need.

 

One key finding of our competitor’s analysis was that many traditional banks and financial companies required a high number of clicks and steps to create a bank account online. In some cases, this process could take up to 120 clicks and multiple pages of information entry, which was frustrating and time-consuming for users.

To improve this area, we focused on creating a streamlined and user-friendly onboarding process that required as few clicks and steps as possible. We leveraged technology such as AI and machine learning to pre-populate user information and reduce the amount of manual data entry required. We simplified the process by breaking it down into smaller, more manageable steps and provided clear guidance and feedback to users along the way. Additionally, we offered support and resources to help users navigate any potential roadblocks or questions they may encounter during the onboarding process. By creating a more efficient and user-friendly onboarding process, we differentiated ourselves from our competitors and provided a more positive user experience for our customers. Our happy path consists of about 40 clicks.

 

 

general flowchart ✨

User Journey: login or create account

1. App Launch: The user opens the Swapplet app.
2. Login or Registration: The user is prompted to either log in or register a new account.
3. Account Registration: If the user selects registration, they enter their full name, email address, and a password.
4. Email Verification: The user receives a confirmation link via email to verify their email address.
5. Phone Number Entry: After verifying their email, the user is prompted to enter their phone number.
6. Phone Verification: The app sends a verification code to the user’s phone to confirm the number’s validity.
7. Identity Verification: The user is prompted to upload a picture of their passport and take a security selfie.
8. Passport and Identity Check: The app verifies the passport information and the user’s identity.
9. Additional Information: The user enters further details, including their profession, salary range, and address.
10. Terms and Conditions: The user is prompted to read and accept the terms and conditions.
11. Signature Confirmation: The user signs their name to confirm that they have read and agreed to the terms.
12. Final Password Setup: The user sets a password to complete the registration process.
13. Account Dashboard Access: After setting the password, the user is taken to their account dashboard to access their information and start using Swapplet.

This user flow covers the basic steps required for a user to register a new account with Swapplet, including email verification, phone number verification, identity verification, and completion of a form with additional information. The flow is designed to be clear and straightforward, guiding the user through each step of the registration process to ensure a positive user experience.

 

 

ideation

GATHER IDEAS 📓

When gathering ideas for the app, we utilized sketching and wireframes as part of our design process. Sketching was an essential part of generating ideas and exploring different concepts for the app. This allowed us to quickly iterate on different proposals and get a better understanding of what features and behaviors we wanted to include in the onboarding.

Once we had a rough idea of what we wanted the UI to look like and the fields we wanted to include, we would move on to creating wireframes to flesh out our ideas and refine the user flow of the app. This gave us the opportunity to test out different ideas and get feedback from stakeholders and potential users before investing too much time and resources into development.

 

 

Design

LOOK AND FEEL 🏛️

We focused on developing a strong visual identity that was consistent with the brand’s values and appealing to its target audience. We selected a color palette that matched the original bank, providing a sense of trust, security, and professionalism. The typography we chose was clear, legible, and easy to read on mobile devices, following all recommended accessibility practices according to W3C guidelines.

The following image is in Spanish because the client is located in South America.

 

COLORS 🎨

TYPOgraphic 🔠

ICONS 👾

 

challenge faced during the process 😵

During the development of the app, we faced several challenges that needed to be addressed to ensure the success of the project. These challenges included:

• Simplifying the onboarding process: One of the biggest challenges was to create an onboarding process that was simple and easy to follow while still ensuring that all necessary information was collected. We needed to balance the need for security with the desire to create a frictionless user experience.
• Integrating with third-party services: To provide a seamless user experience, we needed to integrate the app with a variety of third-party services, including payment gateways, identity verification tools, and data providers. This required adapting the interface according to the selected third-party service.
• Creating a consistent and intuitive user experience: Because the app would be used by people with different levels of technical expertise, we needed to create a user experience that was both consistent and intuitive. This required a lot of user testing and feedback to ensure that the app was easy to use and understand.
• Developing for multiple platforms: The Swapplet app needed to be available on both iOS and Android, which meant that we had to develop two separate code bases. This required careful coordination between the design and development teams to ensure that the app looked and functioned consistently across both platforms.

 

user testing 🗃️

We conducted user testing with several different prototypes to ensure that the app was easy to use and met the needs of our target audience. We started with low-fidelity wireframes to get feedback on the overall user flow and then moved on to more high-fidelity prototypes as we refined the design. I wasn’t able to provide any test here due to NDA restrictions.

We recruited participants who matched our target audience and had them complete the onboarding, while thinking aloud to provide feedback on their experience. This allowed us to identify pain points and areas where users were getting stuck or confused. We also asked participants to complete a survey after each session to gather more detailed feedback.

Based on the results of the user testing, we made a few changes to the design of the app, including adjusting the onboarding flow, simplifying the navigation, and adding more contextual help and guidance.

 

UI preview 📱

The UI and typography is clean and simple, with a sans-serif font used throughout the app for a consistent look and feel. We also made sure to use clear and easy-to-read font sizes, especially for important information such as account balances and transaction details.

The onboarding was designed to be visually appealing, easy to use and understand.

 

 

project outcomes

WHAT was my contribution on this PROJECT? 🤠

I played a key role in the app’s success by conducting in-depth research, designing user flows, and crafting the app’s overall visual identity.

During the research phase, I focused on understanding the unique needs and pain points of potential users in South America. By conducting surveys, interviews, and competitor analyses, I developed comprehensive user personas and flows that guided the app’s design.

Leveraging these insights, I collaborated closely with the development team to create intuitive user flows, simplifying complex tasks like account registration and money transfers. I also streamlined onboarding by consolidating account creation into a single flow, including ID verification, reducing onboarding time by 32%.

On the UI side, I developed a cohesive visual language across all screens, with a carefully selected color palette and typography that enhanced both readability and aesthetics.

Impact:

• Sign-up conversion rates increased from 17.55% to 46.32%.
• Over 1,000 accounts created through the app.
• Onboarding time reduced by 32%, boosting platform engagement.

 

project learnings

what i have learned from this project? 🤓

There were several key learnings from the project that I believe are important to highlight:

• Thorough research is essential: One of the most important takeaways from this project is the importance of conducting thorough research before beginning the design process. By taking the time to understand the needs and pain points of potential users, we were able to create an app that truly met their needs.
• Iteration is key: Another important learning was the importance of iterating on designs and gathering feedback throughout the development process. By continually testing and refining our designs, we were able to create a better product and ensure that it met the needs of users.
• Collaboration is everything: The success of this project was due in large part to the collaboration between the design team, the development team, and other stakeholders. By working closely together and gathering feedback from multiple perspectives, we were able to create a better product that met the needs of all stakeholders.
• Attention to detail matters: Finally, this project taught me the importance of paying attention to even the smallest details. From the color palette to the typography to the placement of buttons, every element of the design played a role in creating a cohesive and effective app.

 

It’s quite common sign a NDA, or non-disclosure agreements, so I’m limited to show some part of the process or none in most cases. This apply to all my portfolio.