CSV Parsing Bank Statements

We developed a solution for importing CSV formatted bank statements, addressing the challenge of limited integration with open banking APIs like Yapily and Plaid.  The platform offers users a seamless solution to upload their data when API integration is unavailable or insufficient.
Mapping CSV columns and rows
Company
Canua is the first-ever personal finance automation platform.
Industry
Fintech, Banking
Role
Lead Product Designer
Key Areas
Product design
SAAS
UX Design
Product Strategy
User flows
B2C
Information
Architecture

About

In our product, we encounter two significant challenges:
A. Lack of Bank API Integration: Many banks do not have robust communication with the APIs that drive features such as generating tax reports, displaying investment insights, transaction histories, balance sheets, asset and liability tracking, portfolio analysis, and portfolio performance evaluation. This limitation hinders users who rely on such features when their banks are not integrated with our platform's APIs.

B. Limited Historical Data from Banks: Another issue arises when banks offer only limited historical data through APIs. This constraint affects the completeness and accuracy of the financial insights we can provide to our users. In cases where historical data is essential, users may need to supplement it by manually uploading their bank statements, ensuring a more comprehensive analysis of their financial history and performance.

These challenges underscore the importance of our product's adaptability, as we strive to accommodate users facing issues with their banking institutions, ultimately enabling them to better manage their financial data and make informed decisions.

Stats & Results

Timeframe
4 weeks
Team
7 people
CSVs Added
2K
Tech Challenges
6

The Design Process

01
Research
I conducted user interviews to gain insights, checked analytics to understand user behavior and asked for feedback from our active users.
02
Technical Ideation
Collaborating with the engineering team, we addressed technical limitations, gathered essential user data, and established rules and limitations to maintain a user-centered approach, ensuring a seamless user experience and data integrity for our product.
03
IA and User Flows
Our main objective was to design a user-friendly system with a clear and intuitive flow, emphasizing information architecture to simplify complex processes and minimize cognitive overload for users, ensuring a seamless and logical user experience.
04
UI 
Before rolling out new features, we conducted usability tests to guarantee that our solutions catered to the needs of expatriates, offering utility, value, and clarity.
05
CRO & Live Testing
We conducted numerous A/B and multivariate tests utilizing Posthog for data analysis and optimization.
06
Restart
As soon as a feature went live in production, we promptly shifted our focus to developing the next feature in our pipeline.

Technical Challenges

During definition and ideation processes, collaboration with the engineering team was pivotal as we encountered several technical limitations due to backend constraints. We recognized that to ensure a seamless user experience and data integrity, it was essential to gather specific data from users, such as date formats, to prevent any database discrepancies that could potentially affect their reports and insights. To address these challenges,

we organized multiple meetings, fostering open discussions with the entire team. Together, we worked on defining rules and limitations that would guide the design and development work while keeping the system user-centered. This collaborative approach not only allowed us to overcome technical hurdles but also ensured that our product remained aligned with user needs and expectations, ultimately enhancing the overall user experience.

Figma workshop results of technical workshop with developers

Information Architecture & User Flows

Our primary goal was to create a user-friendly system with a clear and intuitive flow. We aimed to ensure that users could easily understand the necessary steps and the logic behind each action, creating a seamless and logical user experience. Additionally, we were committed to minimizing

cognitive overload throughout the system. Even during the most complex and intricate processes, our focus was on reducing the cognitive cost for users, making interactions as straightforward and effortless as possible.

Flowchart for CSV parsing project

UI Design

Step 1 & 2 - Selecting the Bank and Financial Account
Adding banking data to accountAdding bank accounts to profile
Step 3 - Uploading the CSV file
Adding CSV files to the parsing processDrag and drop CSV files
CSV parsing processCSV parsing process finished
Step 4 - Mapping CSV Columns

During definition and ideation processes, collaboration with the engineering team was pivotal as we encountered several technical limitations due to backend constraints. We recognized that to ensure a seamless user experience and data integrity, it was essential to gather specific data from users, such as date formats, to prevent any database discrepancies that could potentially affect their reports and insights. To address these challenges,

we organized multiple meetings, fostering open discussions with the entire team. Together, we worked on defining rules and limitations that would guide the design and development work while keeping the system user-centered. This collaborative approach not only allowed us to overcome technical hurdles but also ensured that our product remained aligned with user needs and expectations, ultimately enhancing the overall user experience.

Defining CSV columns and rows
Defining CSV columns during the parsing process - bank statementsDefining CSV columns
Mapping CSV columns and rows
Parsing bank statementsDetecting issues in the CSV parsing process