Nilo: digital wallet 💵

OVERVIEW 📌

Nilo is a new digital wallet platform that aims to make financial transactions more convenient and secure for users. The app allows users to store multiple payment options, including credit/debit cards, bank accounts, and exchange money (USD to other currencies in Latam), in one central location.

 

Project Goals 📢

Design a mobile application from scratch that delivers a fast, intuitive, and easy-to-use digital wallet experience. The app must provide users with a secure, reliable platform for managing their finances, including making payments, sending and receiving money, and managing their accounts.

 

• Test the prototype (over 100 screens)

 

READ FULL PROCESS ⬇️

The Target Audience 🤵

Nilo primarily targets young adults aged 18-40 who are comfortable using digital technology and mobile applications for managing their finances. This demographic values convenience, security, and ease of use, expecting fast and responsive user experiences.

 

The Scope 📋

The application design must incorporate the following features:

• User Registration and Authentication: Users should easily create an account and securely log in using their email and password.
• Wallet Management: Users can store and manage multiple payment options, including credit/debit cards and bank accounts (Zelle), all in one central location.
• Payment Management: Users can easily make payments using the wallet as their preferred method. They can also view payment history, add payment methods, and set payment preferences.
• Money Transfer: Users can send and receive money to and from other Nilo users or external bank accounts. They can view transfer history, manage contacts, and set transfer preferences.
• Security and Privacy: The app should provide a high level of security and privacy to protect user data, including encryption and two-factor authentication.

 

My Role 🙋‍♂️

As the Lead Designer, I was responsible for delivering a user-friendly interface, alongside a streamlined user experience (UX) that ensured easy navigation and clear communication. I led the project with the support of another UI designer throughout the process, collaborating with my team, including the Product Manager, Engineering, and Leadership.

My deliverables included:

• Interactive prototypes that allowed stakeholders to test and evaluate the user experience, consisting of 122 screens in total.
• Detailed design specifications outlining the layout, typography, colors, and graphics used in the app.

 

The Team 🧑‍🤝‍🧑

• Product Owner: Eli Ramirez
• Product Manager: Maria Eugenia Torres
• Head of Technology: Juan Scrocchi
• Lead Designer: Wagner Henriquez  (myself)

 

Timeline ⌛

The project timeline for designing the wallet application was 4/5 months, including research, ideation, design, prototyping, and testing.

 

Tools 📐

• Pen & Paper
• Whimsical
• Miro
• Maze
• Figma
• Illustrador

The Process 🕹️

The design process was broken down into the following stages:

• Empathize: In this stage, we conducted research to gain a deep understanding of the target audience and their needs, pain points, and behaviors related to digital wallets. When I joined the team, I was provided with extensive UX data that accelerated our progress.
• Define: The team used the insights gained in the Empathize stage to define the problem statement and design challenge, identifying the specific goals and requirements for the digital wallet application.
• Ideate: In this stage, the team generated a variety of ideas and potential solutions to the design challenge, considering different approaches and creative concepts for the app.
• Prototype: I created low-fidelity and high-fidelity prototypes of the app, testing and refining the design through multiple iterations to arrive at an optimal user interface.
• Test: Finally, the team tested the prototype with real users to evaluate its usability, functionality, and user experience, incorporating feedback and making further improvements as necessary.

DISCOVER

Understand the core of the product 👨‍🎓

We began by conducting comprehensive research to understand the target audience. We focused on their needs, pain points, and behaviors related to digital wallets. This research involved user surveys, focus groups, and interviews with potential users. Additionally, we analyzed competitor products and industry trends to gather insights.

 

Key findings 📑

• Security Matters: Users prioritize the security of their financial information, valuing features like two-factor and biometric authentication to safeguard their accounts.
• Convenience is Key: A simple and intuitive user interface is crucial, allowing users quick access to payment options and transaction history.
• Integration is Desired: Users expect digital wallets to seamlessly integrate with other financial apps, such as budgeting and savings tools, for a holistic financial management experience.
• Variety of Payment Options: Supporting multiple payment methods, including credit/debit cards, bank transfers, and mobile payments, is essential to meet user preferences.
• Rewards Drive Usage: Incentives like reward programs and cashback can encourage users to adopt a digital wallet for their payments.

 

general flowchart ✨

1. User opens Nilo.
   • The user is presented with a login screen offering two options: “Log in” or “Create account.”
2. Creating an Account:
   • If the user selects “Create account,” they are directed to a registration screen.
   • On the registration screen, the user is prompted to enter their basic information, including their first name, last name, and email address.
   • The user must create a password and confirm it, adhering to specified complexity requirements to ensure account security.
   • The user is presented with the Nilo digital wallet app’s terms and conditions and privacy policy and must accept these to proceed with registration.
   • Once all required information is entered and the terms are accepted, the user can tap “Create account” to proceed.
   • NOTE: ID validation is still missing here, we split the onboarding process (ID comes into play if users want to send or receive money).
3. Logging In:
   • If the user already has an account and selects “Log in,” they are directed to a login screen.
   • If the user enters incorrect login credentials, an error message is displayed, indicating that the username or password is incorrect.
   • The user has the option to recover their password by tapping the “Forgot password” button, which directs them to a screen to enter their registered email address.
   • An email is sent to the user’s registered email address with instructions on how to reset their password.
   • The user follows the instructions in the email to reset their password and regain access to their account.
4. Homepage:
   • Once logged in or after account creation, the user is taken to the homepage of the Nilo app.
   • The homepage presents four key options:
     • Send Money: The user can tap to initiate a money transfer to another Nilo user or external account.
     • Receive Money: The user can tap to view incoming transfers and accept funds.
     • Exchange Currency: The user can tap to convert USD to various local currencies available in South America.
     • Scan QR Code: The user can tap to use their camera to scan a QR code for payments or to receive money.
5. Navigating Options:
   • Tapping on Send Money prompts the user to enter the recipient’s information and the amount to send.
   • Tapping on Receive Money displays the user’s unique QR code and payment requests.
   • Tapping on Exchange Currency provides a selection of local currencies and the option to enter the amount for conversion.
   • Tapping on Scan QR Code opens the camera, allowing the user to scan a code for payments.

 

.

 

VALIDATING THE ID USER JOURNEY 📸

Here’s an outline of the user flow for validating ID:

1. Log In: The user opens Nilo and logs in to their account.
2. Initiate Transaction: The user selects the option to send or receive money but is prompted to validate their ID before proceeding.
3. Validation Instructions: The user is directed to a screen with instructions on how to validate their ID.
4. Take Passport Photo: The user is prompted to take a picture of their passport using the camera on their mobile device.
5. Data Extraction: The app processes the picture and extracts relevant data, such as the user’s name, date of birth, and passport number.
6. Review Extracted Data: The user is presented with a screen displaying the extracted data for review. They can confirm that the data is correct or edit it if necessary.
7. Take Selfie: The user is prompted to take a selfie using the camera on their mobile device. The app uses facial recognition technology to compare the selfie to the picture on the user’s passport.
8. Location Information: The user is prompted to complete their location information, including their current address and country of residence.
9. Answer Security Questions: The user is prompted to answer security questions to further verify their identity.
10. Completion: If the user successfully completes all steps, their ID is validated, and they are able to send or receive money from the Nilo digital wallet app.

 

 

 

ideation

GATHER IDEAS 📓

The sketches were validated by the research and user personas developed in earlier stages of the design process and aim to provide a clear and intuitive user interface that meets the needs of the target audience.

The sketch proposal include the following elements:

• Account creation: The user would be prompted to create an account, providing basic information such as their name, email address, and password.
• Home screen: The home screen will display a summary of the user’s accounts and balances, as well as options to make payments, view transaction history, and access other features.
• Payment: The payment option screen will have a very clear section to make payments from the main wallet to another users.
• Settings: The settings screen could include options for customizing the app’s interface, managing account preferences, and accessing customer support.

 

Design

LOOK AND FEEL 🏛️

A holistic look and feel for the wallet is crucial to establishing a consistent brand identity, creating a positive emotional connection with users, and ensuring that the app’s features and functionalities are tailored to meet their needs. A visually appealing and intuitive design will also increase user engagement and differentiate the app from its competitors.

This is a style guide for the first version of the app and contains colors, typography, icons, and components that follow all recommended accessibility practices according to W3C guidelines.

 

COLORS 🎨

TYPOgraphic 🔠

ICONS 👾

 

challenge faced during the process 😵

We encountered several challenges that needed to be addressed to ensure the project’s success. These challenges included:

• Designing an intuitive interface: One of the biggest hurdles was creating an interface that was user-friendly and appealing to a diverse range of users. We had to balance simplicity and ease of use with robust security and compliance features, requiring extensive research and testing.
• Integrating technologies and APIs: To provide seamless and secure transactions, we needed to integrate various technologies and APIs. This involved ensuring the app could handle multiple currencies and payment methods while delivering a consistent experience across different platforms and devices.
• Collaborating with stakeholders: Working closely with stakeholders was essential to meet their requirements and expectations. This required us to balance competing priorities while keeping the user at the center of the design process.
• Addressing technical challenges: We faced technical hurdles related to optimizing app performance, ensuring compatibility with various operating systems and devices, and implementing thorough testing and quality assurance processes to identify and fix bugs before they impacted users.

 

user testing 🗃️

One of the most valuable aspects of user testing was being able to observe users interacting with the app in real-time. This allowed us to identify areas where users were getting confused or frustrated and make adjustments to improve the user experience.

In addition, user testing allowed us to validate some of our assumptions about how users would interact with the app. We were able to confirm that some of the features we had designed were intuitive and easy to use, while also identifying areas where we needed to provide more guidance or information.

Overall, user testing was a critical part of the design process for Nilo. It helped us to create an app that met our users’ needs and expectations.

UI preview 📱

The UI preview for Nilo is sleek and modern, with a clean and simple interface that is easy to use and navigate.

The app features a dashboard that provides an overview of the user’s account balance, recent transactions, and other key information. Navigation is intuitive, with clear labels and icons to guide users through the various sections of the app. The app incorporates a range of security features to protect user data and transactions and encryption.

 

 

UPDATES BEFORE RELEASE

iterations, feedback and updates needed 🔁

During the design process of Nilo, feedback from users and stakeholders was invaluable in identifying areas for improvement in the UI. As a result, we made several modifications, with one of the most significant being the adjustment of the color scheme to a dark theme. This change aimed to enhance visual appeal, create better contrast between sections of the app, and draw attention to important features and calls to action.

In addition to the color scheme, we simplified the login and account creation screens to improve user-friendliness. Adjustments were also made to the placement and wording of buttons and labels to align with user expectations. Throughout the process, we remained open to feedback and responsive to user needs. By iterating based on this input, we created a UI that effectively met user needs while prioritizing security and compliance with industry standards and regulations.

 

 

test the full prototype

ARE YOU FROM THE PRODUCT TEAM? 🗿

I can’t post this project online, meanwhile, you can try the prototype by clicking here 👈

 

 

project outcomes

WHAT was my contribution on this PROJECT? 🤠

I made significant contributions to the research, design, and development of the app. Collaborating closely with the team, I helped conduct user research and gather insights that informed the design, ensuring it aligned with the needs and expectations of our target audience. My focus was particularly on creating a sleek and modern user interface that is both intuitive and easy to navigate.

I also played a crucial role in streamlining the onboarding process, making it as simple and straightforward as possible. We ensured that users could easily validate their ID within the app, providing clear instructions and guidance for a quick and hassle-free experience. Overall, my contribution was centered on developing a user-friendly and secure digital wallet app.

 

project learnings

what i have learned from this project? 🤓

• I learned a great deal about the importance of collaboration, iteration, and user feedback in the design process. Working closely with the team and gathering insights from users helped us to identify areas for improvement and make adjustments to the app that better met the needs and expectations of our target audience.
• I also gained a deeper understanding of the importance of simplicity and clarity in the design of digital products. By focusing on creating an intuitive and easy-to-use interface, we were able to create an app that users found easy and enjoyable to navigate, which ultimately improved their overall experience.
• In addition to these technical learnings, I also gained a greater appreciation for the importance of teamwork and communication in achieving project success. By fostering a culture of open communication and collaboration.

 

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.