Loan Calculator
Loan Calculator
Loan Calculator
The expansion of our financial product line to include Business Lending, broadening market reach and enhancing client financing options. This project focused on adding a new module to our CRM, administrative settings for the module, and redesigns of other modules impacted by the new feature.
The expansion of our financial product line to include Business Lending, broadening market reach and enhancing client financing options. This project focused on adding a new module to our CRM, administrative settings for the module, and redesigns of other modules impacted by the new feature.
The expansion of our financial product line to include Business Lending, broadening market reach and enhancing client financing options. This project focused on adding a new module to our CRM, administrative settings for the module, and redesigns of other modules impacted by the new feature.
My Role
My Role
UI Design
UI Design
UI Design
UX Design
UX Design
UX Design
Research
Research
Research
Team
Team
Product Designer (me)
Product Designer (me)
Product Designer (me)
UX Researcher
UX Researcher
UX Researcher
Director of Product
Director of Product
Director of Product
Business Analyst
Business Analyst
Business Analyst
Client (x2)
Client (x2)
Client (x2)
Tools
Tools
Figma
Figma
Figma
Jira
Jira
Jira
Slack
Slack
Slack
Challenge
Challenge
Challenge
One of our business partners, a white-label client in the corporate finance industry, sought to expand its product offering to include business lending.
For four years, progress on this initiative was intermittent, with repeated setbacks delaying its release. Ultimately, we decided to start fresh, leveraging our Merchant Cash Advance functionality as a foundation to guide the design and ensure a successful implementation.
One of our business partners, a white-label client in the corporate finance industry, sought to expand its product offering to include business lending.
For four years, progress on this initiative was intermittent, with repeated setbacks delaying its release. Ultimately, we decided to start fresh, leveraging our Merchant Cash Advance functionality as a foundation to guide the design and ensure a successful implementation.
One of our business partners, a white-label client in the corporate finance industry, sought to expand its product offering to include business lending.
For four years, progress on this initiative was intermittent, with repeated setbacks delaying its release. Ultimately, we decided to start fresh, leveraging our Merchant Cash Advance functionality as a foundation to guide the design and ensure a successful implementation.
Results
Results
Results
The revamped project successfully delivered a robust business loans solution, enabling our partner to expand their offerings and establish a foothold in a new market. Despite starting with a less-than-ideal Merchant Cash Advance framework, we overcame the challenges to create a highly functional and well-received product.
The success of this project was so impactful that our business partner has now requested we revisit and improve the original Merchant Cash Advance functionality to match the quality of the business loans solution.
The revamped project successfully delivered a robust business loans solution, enabling our partner to expand their offerings and establish a foothold in a new market. Despite starting with a less-than-ideal Merchant Cash Advance framework, we overcame the challenges to create a highly functional and well-received product.
The success of this project was so impactful that our business partner has now requested we revisit and improve the original Merchant Cash Advance functionality to match the quality of the business loans solution.
The revamped project successfully delivered a robust business loans solution, enabling our partner to expand their offerings and establish a foothold in a new market. Despite starting with a less-than-ideal Merchant Cash Advance framework, we overcame the challenges to create a highly functional and well-received product.
The success of this project was so impactful that our business partner has now requested we revisit and improve the original Merchant Cash Advance functionality to match the quality of the business loans solution.
Baseline
Baseline
Baseline
Frustrated with the intermittent progress on this project, when it came time to restart this project our business partner essentially wanted to cmd+c and cmd + v a similar module in system. Wanting to make progress, they were desperate to release something as software was promised to prospective clients.
Frustrated with the intermittent progress on this project, when it came time to restart this project our business partner essentially wanted to cmd+c and cmd + v a similar module in system. Wanting to make progress, they were desperate to release something as software was promised to prospective clients.
Frustrated with the intermittent progress on this project, when it came time to restart this project our business partner essentially wanted to cmd+c and cmd + v a similar module in system. Wanting to make progress, they were desperate to release something as software was promised to prospective clients.
Below are some images of the module we were to use as a baseline.
Below are some images of the module we were to use as a baseline.
Comparative Research & Information Architecture
Comparative Research & Information Architecture
Comparative Research & Information Architecture
To kick off the project, we began by creating information architecture maps and conducting comparative research to identify industry-wide standards for similar products. However, our ability to conduct direct user research was limited by the client restricting access to their users. Consequently, the client became our primary source of feedback on design and product functionality, effectively acting as proxy users throughout the design process.
To kick off the project, we began by creating information architecture maps and conducting comparative research to identify industry-wide standards for similar products. However, our ability to conduct direct user research was limited by the client restricting access to their users. Consequently, the client became our primary source of feedback on design and product functionality, effectively acting as proxy users throughout the design process.
To kick off the project, we began by creating information architecture maps and conducting comparative research to identify industry-wide standards for similar products. However, our ability to conduct direct user research was limited by the client restricting access to their users. Consequently, the client became our primary source of feedback on design and product functionality, effectively acting as proxy users throughout the design process.
Information Architechture
Information Architechture
Information Architechture
Structure & Organization: We outlined a simple chart of the information architecture, ensuring users could efficiently navigate and interact with the CRM. The image above is the initial pass we made at the IA, created to serve as a foundational guide for the designs of three distinct CRM sections.
Structure & Organization: We outlined a simple chart of the information architecture, ensuring users could efficiently navigate and interact with the CRM. The image above is the initial pass we made at the IA, created to serve as a foundational guide for the designs of three distinct CRM sections.
Structure & Organization: We outlined a simple chart of the information architecture, ensuring users could efficiently navigate and interact with the CRM. The image above is the initial pass we made at the IA, created to serve as a foundational guide for the designs of three distinct CRM sections.
Strategic Alignment: By outlining the IA, we were able to align with business goals and requirements written by our Business Analyst.
Strategic Alignment: By outlining the IA, we were able to align with business goals and requirements written by our Business Analyst.
Strategic Alignment: By outlining the IA, we were able to align with business goals and requirements written by our Business Analyst.
Comparative Research
Comparative Research
Comparative Research
We conducted comparative research to analyze industry standards and best practices for similar products. This approach provided valuable insights into user expectations (especially due to our lack of direct user access), feature prioritization, and design patterns, ensuring our solution aligned with market trends and delivered a competitive, user-centered experience.
We conducted comparative research to analyze industry standards and best practices for similar products. This approach provided valuable insights into user expectations (especially due to our lack of direct user access), feature prioritization, and design patterns, ensuring our solution aligned with market trends and delivered a competitive, user-centered experience.
We conducted comparative research to analyze industry standards and best practices for similar products. This approach provided valuable insights into user expectations (especially due to our lack of direct user access), feature prioritization, and design patterns, ensuring our solution aligned with market trends and delivered a competitive, user-centered experience.
Iterative Designs
Iterative Designs
Iterative Designs
I took foundational wireframes and worked through six design iterations over three months to create polished designs. My focus was on refining visual elements, improving usability, and streamlining workflows to deliver a functional and cohesive final product.
I took foundational wireframes and worked through six design iterations over three months to create polished designs. My focus was on refining visual elements, improving usability, and streamlining workflows to deliver a functional and cohesive final product.
I took foundational wireframes and worked through six design iterations over three months to create polished designs. My focus was on refining visual elements, improving usability, and streamlining workflows to deliver a functional and cohesive final product.
Early Design Iterations
Early Design Iterations
Early Design Iterations
Initially, the client was insistent that a large amount of information be always accessible in the header, which led us to explore multiple design options to accommodate the requirement. After a few design iterations, we quickly realized that displaying all the information at once took up too much real estate, limiting the space needed for key user tasks.
The images below show some initial mid fidelity design explorations.
Initially, the client was insistent that a large amount of information be always accessible in the header, which led us to explore multiple design options to accommodate the requirement. After a few design iterations, we quickly realized that displaying all the information at once took up too much real estate, limiting the space needed for key user tasks.
The images below show some initial mid fidelity design explorations.
Initially, the client was insistent that a large amount of information be always accessible in the header, which led us to explore multiple design options to accommodate the requirement. After a few design iterations, we quickly realized that displaying all the information at once took up too much real estate, limiting the space needed for key user tasks.
The images below show some initial mid fidelity design explorations.
Iteration 1
Iteration 1
Iteration 1
Iteration 1
Iteration 1
Iteration 1
Iteration 2 - Collapsed
Iteration 2 - Collapsed
Iteration 2 - Collapsed
Iteration 2 - Expanded
Iteration 2 - Expanded
Iteration 2 - Expanded
Refined Design Iterations
Refined Design Iterations
Refined Design Iterations
After multiple iterations, I proposed a solution to hide non-essential information until it was relevant to the user's workflow. This helped to improve the layout's efficiency to ensure that screen real estate was maximized to prioritize user tasks.
In the screenshot below, information related to Offers remains hidden because it only becomes relevant once a user accepts an offer. Displaying this section globally at all times would result in an empty state for the majority of the user’s workflow, as we do not know which specific information to show until an offer is accepted.
After multiple iterations, I proposed a solution to hide non-essential information until it was relevant to the user's workflow. This helped to improve the layout's efficiency to ensure that screen real estate was maximized to prioritize user tasks.
In the screenshot below, information related to Offers remains hidden because it only becomes relevant once a user accepts an offer. Displaying this section globally at all times would result in an empty state for the majority of the user’s workflow, as we do not know which specific information to show until an offer is accepted.
After multiple iterations, I proposed a solution to hide non-essential information until it was relevant to the user's workflow. This helped to improve the layout's efficiency to ensure that screen real estate was maximized to prioritize user tasks.
In the screenshot below, information related to Offers remains hidden because it only becomes relevant once a user accepts an offer. Displaying this section globally at all times would result in an empty state for the majority of the user’s workflow, as we do not know which specific information to show until an offer is accepted.
No Offer Accepted Yet
No Offer Accepted Yet
No Offer Accepted Yet
In the image below, critical stats related to an accepted offer are displayed, as the workflow shifts from loan generation to servicing. During generation, users focus on data entry via the left-hand navigation, making loan details less critical. Once a loan is accepted, monitoring payments becomes the priority, allowing more screen real estate to be dedicated to the accepted Loan Offer.
In the image below, critical stats related to an accepted offer are displayed, as the workflow shifts from loan generation to servicing. During generation, users focus on data entry via the left-hand navigation, making loan details less critical. Once a loan is accepted, monitoring payments becomes the priority, allowing more screen real estate to be dedicated to the accepted Loan Offer.
Offer Accepted
Offer Accepted
Offer Accepted
Key Project Takeaways
Key Project Takeaways
Key Project Takeaways
Above is one example of many looking into the process that took place over the design of hundreds of screens. Below are some key takeaways when reflecting on the project.
Above is one example of many looking into the process that took place over the design of hundreds of screens. Below are some key takeaways when reflecting on the project.
Above is one example of many looking into the process that took place over the design of hundreds of screens. Below are some key takeaways when reflecting on the project.
Analyzing Feedback & Requests Beyond Face Value
Analyzing Feedback & Requests Beyond Face Value
Analyzing Feedback & Requests Beyond Face Value
Stakeholders often focused on articulating solutions they believed would work, rather than identifying the underlying problem they want to solve.
By actively listening and asking clarifying questions, I aimed to uncover the true intent behind their requests.
For example, when the client insisted that a large amount of information remain visible, I recognized their primary concern was ensuring quick access to key details, not necessarily the visibility of all information at all times.
Stakeholders often focused on articulating solutions they believed would work, rather than identifying the underlying problem they want to solve.
By actively listening and asking clarifying questions, I aimed to uncover the true intent behind their requests.
For example, when the client insisted that a large amount of information remain visible, I recognized their primary concern was ensuring quick access to key details, not necessarily the visibility of all information at all times.
Stakeholders often focused on articulating solutions they believed would work, rather than identifying the underlying problem they want to solve.
By actively listening and asking clarifying questions, I aimed to uncover the true intent behind their requests.
For example, when the client insisted that a large amount of information remain visible, I recognized their primary concern was ensuring quick access to key details, not necessarily the visibility of all information at all times.
Facilitating Collaboration & Managing Expectations
Facilitating Collaboration & Managing Expectations
Facilitating Collaboration & Managing Expectations
Making sure to position myself as a bridge between client expectations and user advocacy, ensuring both sides are heard and understood. It's important to not be dismissive of others' ideas.
Maintaining an open feedback loop to incorporate client input while staying true to UX methodologies.
I consistently communicated how design changes aligned with client goals, creating a shared understanding and fostering confidence in the design process.
Making sure to position myself as a bridge between client expectations and user advocacy, ensuring both sides are heard and understood. It's important to not be dismissive of others' ideas.
Maintaining an open feedback loop to incorporate client input while staying true to UX methodologies.
I consistently communicated how design changes aligned with client goals, creating a shared understanding and fostering confidence in the design process.
Making sure to position myself as a bridge between client expectations and user advocacy, ensuring both sides are heard and understood. It's important to not be dismissive of others' ideas.
Maintaining an open feedback loop to incorporate client input while staying true to UX methodologies.
I consistently communicated how design changes aligned with client goals, creating a shared understanding and fostering confidence in the design process.
Final Designs
Final Designs
Final Designs
Below are some shots of the screens designed for this project. We are currently gathering user feedback on this feature in our beta environment while we also work on the second phase of this project.
Below are some shots of the screens designed for this project. We are currently gathering user feedback on this feature in our beta environment while we also work on the second phase of this project.
Below are some shots of the screens designed for this project. We are currently gathering user feedback on this feature in our beta environment while we also work on the second phase of this project.
