Cashtrac | Simulating future impact of financial choices

Improve the UX of a complex fintech product to highlight the core value of the product, simplify user flows, improve data visibility, maximize user retention, and reduce cognitive load.

Applied skills

Wireframing, Hi-Fidelity Design & Prototyping, KPI-oriented UX Decisions, Iterative Design, Component-level Handoff & Documentation, Collaboration with engineers, Microcopy & UX Writing, Mobile-first design

Overview & Role

Cashtrac is an AI-based predictive service that helps users visualize the impact of their economic choices in the short, medium and long term, providing them with tips and strategies to make the most of their finances.

For Cashtrac I worked as a UX consultant. During the months of collaboration, I got to collaborate 1:1 with the developers team and the marketing department, which provided very useful insights from market, secondary, and primary research.

I became involved in features already under development. I helped the programmers bring out the best in the user experience flows without having to rewrite the code from scratch, focusing on efficiency of changes rather than perfection in terms of UI, which would be addressed later because of strategic and economic constraints.

Individual flows were managed via tickets on GitHub so as to maximize cross-team collaboration and keep track of all progress amongst team members.

Problems & Challenges

The product had been egregiously developed by programmers but lacked strong UX rationale and UI consistency. Some of the main user flows needed substantial restructuring to simplify the flows and reduce cognitive load, while preserving their functionality. The website did not convert sufficiently and the mobile MVP showed some serious flaws in terms of visualization, having to show a lot of numerical data (e.g., large tables) on the small screen, since the product hasn’t been designed with a mobile‑first approach.

When I joined the team as an external UX consultant, the product was already under development and most of the flows had already been defined. Since this was an early stage start-up, the main challenge was to fit into a context that lacked UX structure while still having to take into account the resources already deployed to develop the product. Every implementation and improvement decision was therefore made as a team, choosing to focus on the most critical and highest cost/benefit gain flows.

Macro-areas of action

At the moment, the main areas of intervention have been the following:

  1. Mobile MVP: Conversational Chat and complex data visualization

  2. Web app: Redesign desktop critical flows

  3. Website: landing page redesign -Still WIP-

Design Solutions | Mobile MVP

The main problem with the mobile MVP was making the product's chat/conversational interface more intuitive, as it had several shortcomings in terms of UX best practices.

Below you will find both the before and after images and an explanation of the rationale used through Figma annotations.

For the why of my choices,
Click to open in a new tab >

Another issue addressed was that of data display tables, which, due to their high density of information, were (well, seemed!) impossible to view on mobile devices without adding an (admittedly ugly) horizontal scroll section.

Below you will find both the solution adopted and notes on all the reasons that led me to the final table.

Hoover to zoom / Tap to open in a new tab >

For the why of my choices,
Click to open in a new tab >

Design Solutions | Web app critical flows

We worked on some existing features of the main product, which is web-based. One of these was the persona catalog feature. To give you some context, users could select one of the predefined financial profiles (personas) that most closely matched their own, customize it, and use it as a basis for building their own financial planner.

Cognitive load was far too high
• The “goal” and “cash flow” sections were virtually indistinguishable, creating confusion
• It was necessary to click on “edit” every time you wanted to edit a field, then save, and then possibly start the process all over again
• The descriptions of the personas were too long and detailed, forcing the user to read the cards one by one instead of quickly scrolling through to find the one that interests them most (to then open and consult in detail).

Below a before/after on how I decided to solve it:

For a better understand of the updated flow and solutions,
Click to open in a new tab >

Design Solutions | Website: landing page redesign

The website’s conversion rate was too low (drop‑off rate > 60%). Since we had to guide the end user to a rather complex product, we had to walk a fine line that allowed us to create a web page that was self-explanatory, but also not too rich in mockups or informations that would only confuse the end user before they got to use the features.

The main work involved definitely a lot of study on the microcopy.

I chose to use a modular approach that treated the web page as a series of sections (hero section, features, about us, etc.) and proposed multiple variations of each, so as to build the final page step by step with the team and make it “consistent with itself” only at the end, through small key refinements.

Here the before and after of my first attempt :)
Click to open in a new tab.

Iteration & Testing

The flows have been tested within the team.

Everything related to user retention, web page drop rate and other metrics involving the impact of the product on the user before actual use, have been tested in progress. Results were measured when possible by tracking specific KPIs.

In particular, the landing page was created in two completely different versions: the first, more futuristic and dark, was a the favourite of the team, while I really liked the second one, and although it was extremely different from the first, I found it more suited to our target audience.

The goal was to attract all those users interested in managing their personal finances but reluctant to approach worlds like trading and cryptocurrencies. I believed the first version could implicitly reference the style of these latter worlds, so we decided to do an A/B test and put under pressure both the prototypes.

The results of the A/B test are still WIP but you can see a preview of the tested version below.

Learnings

Cashtrac allowed me to get my hands on an structured and complex product that was extremely rich from a design and development perspective, and to learn when to stop and how to really prioritize design decisions. Every company needs the right mix of money in/money out in order to sustain itself, and having arrived at work that was already well advanced, I had to find the right balance between the things I wanted to improve (quite a few) and what the real cost/benefit ratios were.

Being involved in the project not only as a UX designer but also as a consultant allowed me to relate closely with the developers, helping them at critical stages along the way.

Thanks to an excellent company structure, I learned how to motivate not only to myself, but also the rest of the team on every single choice in UX and the rationale behind it. This allowed me to gain trust from the team and also to grow a lot as a designer.

From this experience, I realized how working “from scratch” differs from going into a product already developed and ready to launch, and I learned to interface with the real world more than with ideal UX processes.

Thank you!
💖

Cashtrac | Simulating future impact of financial choices

Improve the UX of a complex fintech product to highlight the core value of the product, simplify user flows, improve data visibility, maximize user retention, and reduce cognitive load.

Applied skills

Wireframing, Hi-Fidelity Design & Prototyping, KPI-oriented UX Decisions, Iterative Design, Component-level Handoff & Documentation, Collaboration with engineers, Microcopy & UX Writing, Mobile-first design

Overview & Role

Cashtrac is an AI-based predictive service that helps users visualize the impact of their economic choices in the short, medium and long term, providing them with tips and strategies to make the most of their finances.

For Cashtrac I worked as a UX consultant. During the months of collaboration, I got to collaborate 1:1 with the developers team and the marketing department, which provided very useful insights from market, secondary, and primary research.

I became involved in features already under development. I helped the programmers bring out the best in the user experience flows without having to rewrite the code from scratch, focusing on efficiency of changes rather than perfection in terms of UI, which would be addressed later because of strategic and economic constraints.

Individual flows were managed via tickets on GitHub so as to maximize cross-team collaboration and keep track of all progress amongst team members.

Problems & Challenges

The product had been egregiously developed by programmers but lacked strong UX rationale and UI consistency. Some of the main user flows needed substantial restructuring to simplify the flows and reduce cognitive load, while preserving their functionality. The website did not convert sufficiently and the mobile MVP showed some serious flaws in terms of visualization, having to show a lot of numerical data (e.g., large tables) on the small screen, since the product hasn’t been designed with a mobile‑first approach.

When I joined the team as an external UX consultant, the product was already under development and most of the flows had already been defined. Since this was an early stage start-up, the main challenge was to fit into a context that lacked UX structure while still having to take into account the resources already deployed to develop the product. Every implementation and improvement decision was therefore made as a team, choosing to focus on the most critical and highest cost/benefit gain flows.

Macro-areas
of action

At the moment, the main areas of intervention have been the following:

  1. Mobile MVP: Conversational Chat and complex data visualization

  2. Web app: Redesign desktop critical flows

  3. Website: landing page redesign -Still WIP-

Design Solutions | Mobile MVP

The main problem with the mobile MVP was making the product's chat/conversational interface more intuitive, as it had several shortcomings in terms of UX best practices.

Below you will find both the before and after images and an explanation of the rationale used through Figma annotations.

For the why of my choices,
Tap to open in a new tab >

Another issue addressed was that of data display tables, which, due to their high density of information, were (well, seemed!) impossible to view on mobile devices without adding an (admittedly ugly) horizontal scroll section.

Below you will find both the solution adopted and notes on all the reasons that led me to the final table.

Hoover to zoom / Tap to open in a new tab >

For the why of
my choices,
Tap to open in a new tab >

Design Solutions | Web app critical flows

We worked on some existing features of the main product, which is web-based. One of these was the persona catalog feature. To give you some context, users could select one of the predefined financial profiles (personas) that most closely matched their own, customize it, and use it as a basis for building their own financial planner.

Cognitive load was far too high
• The “goal” and “cash flow” sections were virtually indistinguishable, creating confusion
• It was necessary to click on “edit” every time you wanted to edit a field, then save, and then possibly start the process all over again
• The descriptions of the personas were too long and detailed, forcing the user to read the cards one by one instead of quickly scrolling through to find the one that interests them most (to then open and consult in detail).

Below a before/after on how I decided to solve it:

For a better understand of the updated flow and solutions,
Tap to open in a new tab >

Design Solutions | Website: landing page redesign

The website’s conversion rate was too low (drop‑off rate > 60%). Since we had to guide the end user to a rather complex product, we had to walk a fine line that allowed us to create a web page that was self-explanatory, but also not too rich in mockups or informations that would only confuse the end user before they got to use the features.

The main work involved definitely a lot of study on the microcopy.

I chose to use a modular approach that treated the web page as a series of sections (hero section, features, about us, etc.) and proposed multiple variations of each, so as to build the final page step by step with the team and make it “consistent with itself” only at the end, through small key refinements.

Here the before and after of my first attempt :)
Tap to open in a new tab.

Iteration & Testing

The flows have been tested within the team.

Everything related to user retention, web page drop rate and other metrics involving the impact of the product on the user before actual use, have been tested in progress. Results were measured when possible by tracking specific KPIs.

In particular, the landing page was created in two completely different versions: the first, more futuristic and dark, was a the favourite of the team, while I really liked the second one, and although it was extremely different from the first, I found it more suited to our target audience.

The goal was to attract all those users interested in managing their personal finances but reluctant to approach worlds like trading and cryptocurrencies. I believed the first version could implicitly reference the style of these latter worlds, so we decided to do an A/B test and put under pressure both the prototypes.

The results of the A/B test are still WIP but you can see a preview of the tested version below.

Learnings

Cashtrac allowed me to get my hands on an structured and complex product that was extremely rich from a design and development perspective, and to learn when to stop and how to really prioritize design decisions. Every company needs the right mix of money in/money out in order to sustain itself, and having arrived at work that was already well advanced, I had to find the right balance between the things I wanted to improve (quite a few) and what the real cost/benefit ratios were.

Being involved in the project not only as a UX designer but also as a consultant allowed me to relate closely with the developers, helping them at critical stages along the way.

Thanks to an excellent company structure, I learned how to motivate not only to myself, but also the rest of the team on every single choice in UX and the rationale behind it. This allowed me to gain trust from the team and also to grow a lot as a designer.

From this experience, I realized how working “from scratch” differs from going into a product already developed and ready to launch, and I learned to interface with the real world more than with ideal UX processes.

Thank you!
💖

Cashtrac | Simulating future impact of financial choices

Improve the UX of a complex fintech product to highlight the core value of the product, simplify user flows, improve data visibility, maximize user retention, and reduce cognitive load.

Applied skills

Wireframing, Hi-Fidelity Design & Prototyping, KPI-oriented UX Decisions, Iterative Design, Component-level Handoff & Documentation, Collaboration with engineers, Microcopy & UX Writing, Mobile-first design

Overview & Role

Cashtrac is an AI-based predictive service that helps users visualize the impact of their economic choices in the short, medium and long term, providing them with tips and strategies to make the most of their finances.

For Cashtrac I worked as a UX consultant. During the months of collaboration, I got to collaborate 1:1 with the developers team and the marketing department, which provided very useful insights from market, secondary, and primary research.

I became involved in features already under development. I helped the programmers bring out the best in the user experience flows without having to rewrite the code from scratch, focusing on efficiency of changes rather than perfection in terms of UI, which would be addressed later because of strategic and economic constraints.

Individual flows were managed via tickets on GitHub so as to maximize cross-team collaboration and keep track of all progress amongst team members.

Problems & Challenges

The product had been egregiously developed by programmers but lacked strong UX rationale and UI consistency. Some of the main user flows needed substantial restructuring to simplify the flows and reduce cognitive load, while preserving their functionality. The website did not convert sufficiently and the mobile MVP showed some serious flaws in terms of visualization, having to show a lot of numerical data (e.g., large tables) on the small screen, since the product hasn’t been designed with a mobile‑first approach.

When I joined the team as an external UX consultant, the product was already under development and most of the flows had already been defined. Since this was an early stage start-up, the main challenge was to fit into a context that lacked UX structure while still having to take into account the resources already deployed to develop the product. Every implementation and improvement decision was therefore made as a team, choosing to focus on the most critical and highest cost/benefit gain flows.

Macro-areas of action

At the moment, the main areas of intervention have been the following:

  1. Mobile MVP: Conversational Chat and complex data visualization

  2. Web app: Redesign desktop critical flows

  3. Website: landing page redesign -Still WIP-

Design Solutions | Mobile MVP

The main problem with the mobile MVP was making the product's chat/conversational interface more intuitive, as it had several shortcomings in terms of UX best practices.

Below you will find both the before and after images and an explanation of the rationale used through Figma annotations.

For the why of my choices,
Tap to open in a new tab >

Another issue addressed was that of data display tables, which, due to their high density of information, were (well, seemed!) impossible to view on mobile devices without adding an (admittedly ugly) horizontal scroll section.

Below you will find both the solution adopted and notes on all the reasons that led me to the final table.

For the why of my choices,
Tap to open in a new tab >

Design Solutions | Web app critical flows

We worked on some existing features of the main product, which is web-based. One of these was the persona catalog feature. To give you some context, users could select one of the predefined financial profiles (personas) that most closely matched their own, customize it, and use it as a basis for building their own financial planner.

Cognitive load was far too high
• The “goal” and “cash flow” sections were virtually indistinguishable, creating confusion
• It was necessary to click on “edit” every time you wanted to edit a field, then save, and then possibly start the process all over again
• The descriptions of the personas were too long and detailed, forcing the user to read the cards one by one instead of quickly scrolling through to find the one that interests them most (to then open and consult in detail).

Below a before/after on how I decided to solve it:

For a better understand of the updated flow and solutions,
Tap to open in a new tab >

Design Solutions | Website: landing page redesign

The website’s conversion rate was too low (drop‑off rate > 60%). Since we had to guide the end user to a rather complex product, we had to walk a fine line that allowed us to create a web page that was self-explanatory, but also not too rich in mockups or informations that would only confuse the end user before they got to use the features.

The main work involved definitely a lot of study on the microcopy.

I chose to use a modular approach that treated the web page as a series of sections (hero section, features, about us, etc.) and proposed multiple variations of each, so as to build the final page step by step with the team and make it “consistent with itself” only at the end, through small key refinements.

Here the before and after of my first attempt :)
Tap to open in a new tab.

Iteration & Testing

The flows have been tested within the team.

Everything related to user retention, web page drop rate and other metrics involving the impact of the product on the user before actual use, have been tested in progress. Results were measured when possible by tracking specific KPIs.

In particular, the landing page was created in two completely different versions: the first, more futuristic and dark, was a the favourite of the team, while I really liked the second one, and although it was extremely different from the first, I found it more suited to our target audience.

The goal was to attract all those users interested in managing their personal finances but reluctant to approach worlds like trading and cryptocurrencies. I believed the first version could implicitly reference the style of these latter worlds, so we decided to do an A/B test and put under pressure both the prototypes.

The results of the A/B test are still WIP but you can see a preview of the tested version below.

Learnings

Cashtrac allowed me to get my hands on an structured and complex product that was extremely rich from a design and development perspective, and to learn when to stop and how to really prioritize design decisions. Every company needs the right mix of money in/money out in order to sustain itself, and having arrived at work that was already well advanced, I had to find the right balance between the things I wanted to improve (quite a few) and what the real cost/benefit ratios were.

Being involved in the project not only as a UX designer but also as a consultant allowed me to relate closely with the developers, helping them at critical stages along the way.

Thanks to an excellent company structure, I learned how to motivate not only to myself, but also the rest of the team on every single choice in UX and the rationale behind it. This allowed me to gain trust from the team and also to grow a lot as a designer.

From this experience, I realized how working “from scratch” differs from going into a product already developed and ready to launch, and I learned to interface with the real world more than with ideal UX processes.

Thank you!
💖

Create a free website with Framer, the website builder loved by startups, designers and agencies.