Fiserv Digital Banking: Personal Finace Management Tool

Mobile App Design

Details

Project Overview

After joining the team, a week later, our product was DROPPED! Until reassigned to a new product, we shifted our focus to the new star of the show Architect. This design sprint allowed us to discover new areas of opportunities for Architect, impacting the 2024 product roadmap. This Case study details my Design Sprint for Architect's Personal Finance Management tool.

Project Objective

1. To identify areas for opportunity for Architect's Personal Finance tools.
2. Design an intuitive process for users to manage their finances.


Successes

Impacted Architect's 2024 product road map, in which my proposed designs, features, and user joinery will be used in the shipped product.

Lessons

I learned that sometimes your first idea isn't your best and going through multiple iterations will ultimately land you in a better place than where you started.

Next Steps

Periodically met with the product team and developers to iron out concerns while Architect was being developed and revamped.

Services

UX / UI

Product Design

Credits

Year

Fiserv Digital Banking: Personal Finace Management Tool

Mobile App Design

Details

Project Overview

After joining the team, a week later, our product was DROPPED! Until reassigned to a new product, we shifted our focus to the new star of the show Architect. This design sprint allowed us to discover new areas of opportunities for Architect, impacting the 2024 product roadmap. This Case study details my Design Sprint for Architect's Personal Finance Management tool.

Project Objective

1. To identify areas for opportunity for Architect's Personal Finance tools.
2. Design an intuitive process for users to manage their finances.


Successes

Impacted Architect's 2024 product road map, in which my proposed designs, features, and user joinery will be used in the shipped product.

Lessons

I learned that sometimes your first idea isn't your best and going through multiple iterations will ultimately land you in a better place than where you started.

Next Steps

Periodically met with the product team and developers to iron out concerns while Architect was being developed and revamped.

Services

UX / UI

Product Design

Credits

Year

WHAT HAPPEN?

There was a corporate shift from the personal banking fintech product 'Abiliti' to a more current product ‘Architect.' This sprint was to help discover new opportunities for ‘Architect.'

The 2 areas of opportunity we successfully identified were within the Personal Finance Management (PFM) and Money Movement functions of the application.

RESEARCH INSIGHTS

First we conducted a Heuristic Evaluation.


RESEARCH INSIGHTS

We then followed up by conducting a Competitive Analysis across different areas, focusing on a range of Banks such as Bank of America, Chase, Ally, Educators Credit Union, and Wells Fargo, as well as Fintech applications such as Brex and Backbase.


PERSONAS

Following the initial research phase, we conducted a series of user interviews to better understand how Architect users interacted with their mobile banking applications and which features they relied on most. We then synthesized these findings into user personas, allowing us to more effectively identify user pain points and prioritize opportunities for improvement.


USER JOURNEY

During the interview phase, we conducted a card-sorting exercise with small and medium-sized business (SMB) owners to better understand feature priorities and user needs. Participants were asked to organize 33 potential features into three categories: “Must-Have,” “Nice to Have,” and “Not Relevant.” Within each category, participants then ranked the features from most to least important based on their individual business needs and banking behaviors.

We analyzed the results both by persona type and across shared behavioral patterns to identify overlapping priorities, uncover common pain points, and determine which features delivered the highest perceived value across user groups.


AFFINITY MAP

Once the research phase was completed, we synthesized our findings by organizing insights into groups based on shared themes, behavioral patterns, and user needs. This process helped identify key opportunity areas and allowed the broader team to align around specific problem spaces and ownership responsibilities.

I was part of “The A Team” (Team 1), which focused on developing a UX solution that enabled users to view uploaded expenses within a calendar-based timeline experience. The goal was to create a more intuitive and organized way for users to track, review, and manage their financial activity over time.


DESIGN SOLUTION ITERATIONS

As the team’s Figma specialist and lead designer, my primary focus was creating design iterations that explored how users could better understand their cash flow, credit availability, and projected expenses within the Architect platform. Using Figma, I developed UI concepts and interaction patterns to help the team evaluate and align on potential user experiences.

These explorations were inspired by financial management applications such as Spend, Budget, and Simplifi by Quicken, particularly their approaches to budgeting, expense tracking, and financial visualization.

Through these iterative concepts, I helped shape a more intuitive and modern financial management experience for Architect.


First Iteration / LOW Res(Wireframe): I designed low res wireframe to conceptualize the idea of monitoring your money over time.

Second Iteration / MED Res : After presenting the initial concepts to the broader team, I incorporated feedback from stakeholders and collaborators to further refine the experience. This second iteration focused on developing more polished mid-fidelity designs, including clearer home dashboard views and more detailed expense-tracking interfaces.

Third Iteration / High Res (Usability Tested): Following a second round of team feedback, I further refined the Personal Finance Management experience into a more user-friendly and polished high-fidelity prototype. This iteration focused on improving usability, simplifying financial insights, and creating a more intuitive overall experience for users.

The updated design also introduced opportunities for banks to deliver personalized financial offers and recommendations based on user behavior and spending activity. This version of the application was subsequently usability tested to validate the experience and identify additional areas for refinement.

Usability Test


Fourth Iteration / Updated Design from Findings:

Based on insights gathered from usability testing, the fourth iteration focused on improving clarity, simplifying interactions, and creating a more supportive financial guidance experience.

Dashboard

  • Refined the “Fixed” and “Flexible” spending labels to improve user understanding.

  • Added supporting copy to the “Need Additional Cash?” feature to better communicate its purpose and value.

Help Me Find Cash

  • Clarified the functionality of the tool and simplified the overall experience.

  • Added visual spending bars to help users better understand their financial breakdown.

  • Removed the need for manual spending calculations to reduce friction and cognitive load.

  • Consolidated two separate screens into a single streamlined experience to improve usability.

Other Ways to Find More Money

  • Expanded the experience beyond traditional financial offers by introducing more practical and actionable ways users could identify additional sources of money or savings opportunities.


WHAT HAPPEN?

There was a corporate shift from the personal banking fintech product 'Abiliti' to a more current product ‘Architect.' This sprint was to help discover new opportunities for ‘Architect.'

The 2 areas of opportunity we successfully identified were within the Personal Finance Management (PFM) and Money Movement functions of the application.

RESEARCH INSIGHTS

First we conducted a Heuristic Evaluation.


RESEARCH INSIGHTS

We then followed up by conducting a Competitive Analysis across different areas, focusing on a range of Banks such as Bank of America, Chase, Ally, Educators Credit Union, and Wells Fargo, as well as Fintech applications such as Brex and Backbase.


PERSONAS

Following the initial research phase, we conducted a series of user interviews to better understand how Architect users interacted with their mobile banking applications and which features they relied on most. We then synthesized these findings into user personas, allowing us to more effectively identify user pain points and prioritize opportunities for improvement.


USER JOURNEY

During the interview phase, we conducted a card-sorting exercise with small and medium-sized business (SMB) owners to better understand feature priorities and user needs. Participants were asked to organize 33 potential features into three categories: “Must-Have,” “Nice to Have,” and “Not Relevant.” Within each category, participants then ranked the features from most to least important based on their individual business needs and banking behaviors.

We analyzed the results both by persona type and across shared behavioral patterns to identify overlapping priorities, uncover common pain points, and determine which features delivered the highest perceived value across user groups.


AFFINITY MAP

Once the research phase was completed, we synthesized our findings by organizing insights into groups based on shared themes, behavioral patterns, and user needs. This process helped identify key opportunity areas and allowed the broader team to align around specific problem spaces and ownership responsibilities.

I was part of “The A Team” (Team 1), which focused on developing a UX solution that enabled users to view uploaded expenses within a calendar-based timeline experience. The goal was to create a more intuitive and organized way for users to track, review, and manage their financial activity over time.


DESIGN SOLUTION ITERATIONS

As the team’s Figma specialist and lead designer, my primary focus was creating design iterations that explored how users could better understand their cash flow, credit availability, and projected expenses within the Architect platform. Using Figma, I developed UI concepts and interaction patterns to help the team evaluate and align on potential user experiences.

These explorations were inspired by financial management applications such as Spend, Budget, and Simplifi by Quicken, particularly their approaches to budgeting, expense tracking, and financial visualization.

Through these iterative concepts, I helped shape a more intuitive and modern financial management experience for Architect.


First Iteration / LOW Res(Wireframe): I designed low res wireframe to conceptualize the idea of monitoring your money over time.

Second Iteration / MED Res : After presenting the initial concepts to the broader team, I incorporated feedback from stakeholders and collaborators to further refine the experience. This second iteration focused on developing more polished mid-fidelity designs, including clearer home dashboard views and more detailed expense-tracking interfaces.

Third Iteration / High Res (Usability Tested): Following a second round of team feedback, I further refined the Personal Finance Management experience into a more user-friendly and polished high-fidelity prototype. This iteration focused on improving usability, simplifying financial insights, and creating a more intuitive overall experience for users.

The updated design also introduced opportunities for banks to deliver personalized financial offers and recommendations based on user behavior and spending activity. This version of the application was subsequently usability tested to validate the experience and identify additional areas for refinement.

Usability Test


Fourth Iteration / Updated Design from Findings:

Based on insights gathered from usability testing, the fourth iteration focused on improving clarity, simplifying interactions, and creating a more supportive financial guidance experience.

Dashboard

  • Refined the “Fixed” and “Flexible” spending labels to improve user understanding.

  • Added supporting copy to the “Need Additional Cash?” feature to better communicate its purpose and value.

Help Me Find Cash

  • Clarified the functionality of the tool and simplified the overall experience.

  • Added visual spending bars to help users better understand their financial breakdown.

  • Removed the need for manual spending calculations to reduce friction and cognitive load.

  • Consolidated two separate screens into a single streamlined experience to improve usability.

Other Ways to Find More Money

  • Expanded the experience beyond traditional financial offers by introducing more practical and actionable ways users could identify additional sources of money or savings opportunities.