top of page
FER RUGAMA | ART & DESIGN
BRIEF
Design of a Personal Finance Manager (PFM) for a digital banking service website of a financial entity. The entity will remain anonymous for confidentiality reasons; however, the company has agreed to allow me to share this project while maintaining their brand's anonymity.
PFM PLATFORM
2019 | INTERNSHIP PROJECT
ROLE
UX/UI designer
and researcher
TECH
Figma
Illustrator
Optimal Workshop
COLLAB
Individual project
CLIENT
Anonymous financial entity
FINANCIAL EDUCATION
This information was added to promote financial awareness among users and provide them with a sense of gratification and motivation by showcasing their achievements and progress. It also offers predictions on how the user's financial status may develop in the future based on their current practices, while also helping them learn how to improve their financial health.
BUDGETING
This feature allows users to better organize their expenses and adjust them to their income. It enables users to add as many budgets as they need and displays the progress of expenses graphically on a monthly basis, showing the percentage of the budget remaining.
ALERTS AND NOTIFICATIONS
This feature was added to help users become aware of new features, facilitate their learning curve in financial education, and maintain motivation regarding their finances.
CALENDAR
The website already had a feature for scheduling payments and money transfers, allowing users to personalize these transactions. However, this information was not effectively displayed. As a solution, a calendar was developed to show all scheduled payments and transactions.
GENERAL FINANCIAL SUMMARY
This feature was added to the top of the landing page of the website to provide the user with a quick overview of their financial status. Additionally, it serves as a portal that directs the user to the 'My finances' section when clicked.
GOALS
• Design of the graphic interface of a PFM (Personal Finance Manager) on the bank's digital platform, to enhance user independence and management of their own digital financial services.
• Enhancing the usability and functionality of the website's financial education section to foster user autonomy and promote financial literacy.
CHALLENGES
Since this was my first "real" project with "real" stake holders, I had to come to terms with the idea that the project could have real-life consequences and the potential to make a significant impact on users' financial lives. This made me understand that I had to meet the expectations of stakeholders from a major financial entity and made me feel a profound sense of responsibility.
PHASE 3: IMPLEMENTATION AND FINAL DESIGN
After applying several adjustments and considering the results of the last Heuristic user test, a final version of the project was created, taking into account all the feedback from both the test users and the stakeholders.
PHASE 2: APPROACH AND DEVELOPMENT
A series of user tests and adjustments took place in this phase. It began with a Cardsorting and a Dendrogram analysis of its results. Subsequently, an adjustment of the Alpha Architecture was necessary to proceed with a Paper Prototyping test, which was conducted using a Low-Fidelity Wireframe prototype in Figma. Following this, another round of adjustments was made to create the Beta Architecture and the 2nd prototype with the High-Fidelity Wireframes for the final Heuristics test.
I
PROCESS
PHASE 1: INVESTIGATION AND ANALYSIS
An in-depth research process was essential to gain a comprehensive understanding of the project:
Step 1. I conducted a personal usability test in the "My Finances" section, performing basic tasks outlined by my supervisor, without prior knowledge of the page's functions.
Step 2. This was followed by extensive theoretical research on Personal Finance Managers (PFMs) and financial health, accompanied by a content inventory and traffic analysis of the entire website to grasp its structure, navigation, and hierarchy.
Step 3. Subsequently, an analysis of existing websites and apps with similar objectives to this project was conducted.
Step 4. Building on the insights gathered, and the conclusions drawn from interviews with the bank's clients, the Alpha Architecture, user requirements, and the primary project's needs were defined.
USERS & NEEDS
The company had already established user segmentation criteria to determine suitable users for each project. Since it was impractical to target all users of the bank within the project's timeframe, stakeholders decided to focus on users experiencing "Momentary Crisis" and "Crisis Due to Misinformation."
The concept of "Personas" was then employed, defined as identifying user types who will utilize the tool and grouping them based on similar needs. This approach helped define three user types to target on the site, each representing distinct project requirements.
OVERVIEW
The project's subject was initiated by the Digital Experience Department's management, which continually seeks opportunities to enhance digital services and products based on user needs analysis.
The company required a redesign of the existing "My Finances" section on the bank's digital platform. Despite its potential value for users' financial education, the section was underutilized. Enhancing this section was a priority for the bank to improve its image, digital product offerings, and operational efficiency.
The Digital Experience department gave me full green light to propose innovative ideas and improvements for the “My finances” section.
Skip process, jump to final solution →
SOLUTION
The 'My finances' section received an enhancement to an existing feature (the categorization of the user’s financial transactions) and the addition of five new features: general financial summary, budgeting, alerts and notifications, financial education, and a payment calendar.
Investigation and analysis > Interviews > Definition of users and needs > Alpha architecture > User tests (card sorting) > Correction of architecture > Low fidelity wireframes > User tests (paper prototyping) > Beta architecture > Look & feel > High fidelity wireframes > Last user tests (heuristics) > Final design
Synthetization of the information obtained through an infographic of the theoretical research regarding financial health, good financial practices, PFMs, among others...
FUNCTIONAL PROTOTYPE
The final prototype of the section "My Finances" was fully functional and executed in Figma and Illustrator.
bottom of page