Back
Back
Request to Pay with Invoicing and Contacts Management
Request to Pay with Invoicing and Contacts Management
Request to Pay with Invoicing and Contacts Management
I designed a Request to Pay with Invoicing feature by breaking down workflows into actionable design milestones. By defining use cases' commonality, I helped the team prioritize design phases, streamlining the development by 30%.
I designed a Request to Pay with Invoicing feature by breaking down workflows into actionable design milestones. By defining use cases' commonality, I helped the team prioritize design phases, streamlining the development by 30%.
I designed a Request to Pay with Invoicing feature by breaking down workflows into actionable design milestones. By defining use cases' commonality, I helped the team prioritize design phases, streamlining the development by 30%.
Stakeholders
Stakeholders
Stakeholders
Product team, Developers, PMs, Compliance team
Product team, Developers, PMs, Compliance team
Product team, Developers, PMs, Compliance team
My Role
My Role
My Role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Duration
Duration
Duration
4 Months
4 Months
4 Months
The project goal was
Enhancing Payment Efficiency and Accuracy with invoicing and request to pay features
The project goal was
Enhancing Payment Efficiency and Accuracy with invoicing and request to pay features
The project goal was
Enhancing Payment Efficiency and Accuracy with invoicing and request to pay features
Buckzy's clients are small community banks and credit unions. As their business expands, they no longer focus solely on domestic and international cross-border transfers; they now require services that align with larger banks to better serve their customers, with 'Request to Pay' enhancing payment efficiency and accuracy to meet these evolving needs.
Buckzy's clients are small community banks and credit unions. As their business expands, they no longer focus solely on domestic and international cross-border transfers; they now require services that align with larger banks to better serve their customers, with 'Request to Pay' enhancing payment efficiency and accuracy to meet these evolving needs.
The research that I have conducted
The research that I have conducted
The research that I have conducted
Collect feedbacks
Collect feedbacks
I began by working with the customer support team to analyze insights from user inquiries on implementing Request to Pay. The following are the three most essential needs from our users:
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
I began by working with the customer support team to analyze insights from user inquiries on implementing Request to Pay. The following are the three most essential needs from our users:
Need for Real-Time Visibility
Need for Real-Time Visibility
Need for Real-Time Visibility
Enhanced Payment Security
Enhanced
Enhanced Payment Security
End Users' Control and Flexibility
End Users' Control and Flexibility
End Users' Control and Flexibility
Conducting a survey to understand user needs
Conducting a survey to understand user needs
I collaborated with the sales team to create a short 3-minute survey to identify the key features users want alongside the "Request to Pay" functionality.
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
I collaborated with the sales team to create a short 3-minute survey to identify the key features users want alongside the "Request to Pay" functionality.
Request to Pay feature, with Contacts Management
Request to Pay feature, with Contacts Management
Request to Pay feature, with Contacts Management
Integrated Invoice Creation, and Batch Uploading
Integrated Invoice Creation, and Batch Uploading
Integrated Invoice Creation, and Batch Uploading
Real-Time Payment Tracking with Status Indication
Real-Time Payment Tracking with Status Indication
Real-Time Payment Tracking with Status Indication
Discussion with Compliance team
Discussion with Compliance team
I had a conversation with the compliance team, specifically regarding Know Your Customer (KYC) and Know Your Business (KYB) compliance. Here are the top 3 considerations:
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
I had a conversation with the compliance team, specifically regarding Know Your Customer (KYC) and Know Your Business (KYB) compliance. Here are the top 3 considerations:
Guide users with a clear layout to complete forms
Guide users with a clear layout to complete forms
Guide users with a clear layout to complete forms
Determine the mandatory fields for KYC/KYB
Determine the mandatory fields for KYC/KYB
Determine the mandatory fields for KYC/KYB
Design to adapt compliance regulations
Design to adapt compliance regulations
Design to adapt compliance regulations
It was hard to eat the big whale
It was hard to eat the big whale
It was hard to eat the big whale
Failure: Over-Scoping Blocked Progress, made it impossible to deliver in one go
Failure: Over-Scoping Blocked Progress, made it impossible to deliver in one go
The product team met with the development team to review the project and identify any technical constraints before proceeding with the design.
It turned out that we had groomed the entire story, covering both the frontend user flow and backend considerations, which made it impossible to deliver in one go. The complexity blocked the PM from prioritizing tasks effectively.
The product team met with the development team to review the project and identify any technical constraints before proceeding with the design.
It turned out that we had groomed the entire story, covering both the frontend user flow and backend considerations, which made it impossible to deliver in one go. The complexity blocked the PM from prioritizing tasks effectively.
The product team met with the development team to review the project and identify any technical constraints before proceeding with the design.
It turned out that we had groomed the entire story, covering both the frontend user flow and backend considerations, which made it impossible to deliver in one go. The complexity blocked the PM from prioritizing tasks effectively.
Clarify use cases
How might we translate broad business requirements into detailed design milestones to effectively plan the MVP
Clarify use cases
How might we translate broad business requirements into detailed design milestones to effectively plan the MVP
Clarify use cases
How might we translate broad business requirements into detailed design milestones to effectively plan the MVP
I took the initiative to prioritize key features from a design perspective and collaborated with PMs to plan the MVP. We began by outlining a few representative use cases from the perspective of end clients to guide our approach.
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
I took the initiative to prioritize key features from a design perspective and collaborated with PMs to plan the MVP. We began by outlining a few representative use cases from the perspective of end clients to guide our approach.
Define commonality
Built from basic need and digest it one bite at a time
Define commonality
Built from basic need and digest it one bite at a time
Define commonality
Built from basic need and digest it one bite at a time
I identified commonalities from the scenarios and summarized them into a high-level user flow. However, we deprioritized setting preferences, as we recognized it was not essential for the first two milestones.
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
I identified commonalities from the scenarios and summarized them into a high-level user flow. However, we deprioritized setting preferences, as we recognized it was not essential for the first two milestones.
Set milestones and clarify MVP 1
Set milestones and clarify MVP 1
Set milestones and clarify MVP 1
I proposed design-driven milestones based on the importance of each feature, which help PMs plan the MVP efficiently.
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
I proposed design-driven milestones based on the importance of each feature, which help PMs plan the MVP efficiently.
Set milestones and clarify MVP 2
Set milestones and clarify MVP 2
Set milestones and clarify MVP 2
Thinking Ahead: Inclusive Design for Evolving User Needs
Thinking Ahead: Inclusive Design for Evolving User Needs
Thinking Ahead: Inclusive Design for Evolving User Needs
Even though we successfully established design priorities, I felt there were more opportunities to approach the design more inclusively.
To better understand the needs of our end clients, I facilitated a workshop with my cross-functional team to review the wireframe. This helped us identify areas for improvement and highlighted the importance of giving clients more control moving forward.
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
Even though we successfully established design priorities, I felt there were more opportunities to approach the design more inclusively.
To better understand the needs of our end clients, I facilitated a workshop with my cross-functional team to review the wireframe. This helped us identify areas for improvement and highlighted the importance of giving clients more control moving forward.
Refine Creation
Refine Creation
Improve Flexibility
Improve Flexibility
The internal validation helps define design milestone 3 and makes the design more user-friendly.
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
The internal validation helps define design milestone 3 and makes the design more user-friendly.
MVP1 Deliverable - Milestone 1
MVP1 Deliverable - Milestone 1
MVP1 Deliverable - Milestone 1
Designing 'Request to Pay' for intuitive ease of use, incorporating tracking management
Designing 'Request to Pay' for intuitive ease of use, incorporating tracking management
We minimize the required information for a direct request to pay and allow users to attach an existing invoice that they already have.
We minimize the required information for a direct request to pay and allow users to attach an existing invoice that they already have.
We minimize the required information for a direct request to pay and allow users to attach an existing invoice that they already have.
Redesigning 'Sender/Receiver Management' for clearer structure and improved accessibility
Redesigning 'Sender/Receiver Management' for clearer structure and improved accessibility
Prioritizing critical information is key to redesigning the 'Sender and Receiver Management' page. I organized the content into layers: the first layer displays essential details prominently, helping users quickly differentiate customer identities with filters. Less critical information, like bank details, is moved to a second layer, accessible via an 'edit' option to reduce clutter.
Prioritizing critical information is key to redesigning the 'Sender and Receiver Management' page. I organized the content into layers: the first layer displays essential details prominently, helping users quickly differentiate customer identities with filters. Less critical information, like bank details, is moved to a second layer, accessible via an 'edit' option to reduce clutter.
Before
Before
After
After
Designing Add ‘Sender/ Receiver’ with consideration for compliance needs
Designing Add ‘Sender/ Receiver’ with consideration for compliance needs
To adhere to compliance rules, KYC (Know Your Customer) and KYB (Know Your Business) are essential in onboarding customers and their clients.
In this scenario, we needed to collect extensive information from receivers. Instead of creating multiple steps or a lengthy page, I designed a more streamlined experience using collapsible tabs. This allows customers to efficiently add receiver information, include multiple payment methods, and set their preferred payment method—all within a clean, user-friendly interface.
To adhere to compliance rules, KYC (Know Your Customer) and KYB (Know Your Business) are essential in onboarding customers and their clients.
In this scenario, we needed to collect extensive information from receivers. Instead of creating multiple steps or a lengthy page, I designed a more streamlined experience using collapsible tabs. This allows customers to efficiently add receiver information, include multiple payment methods, and set their preferred payment method—all within a clean, user-friendly interface.
MVP1 Deliverable - Milestone 2
MVP1 Deliverable - Milestone 2
MVP1 Deliverable - Milestone 2
Designing the 'Create Invoice' feature with a 'What if' mindset to meet user needs for integrated invoice creation
Designing the 'Create Invoice' feature with a 'What if' mindset to meet user needs for integrated invoice creation
'What if users want to edit or update billers directly from the current interface?'
Instead of requiring them to navigate to the 'Manage Sender and Receiver' page, we provided the ability to perform these actions on the same page, reducing steps and improving efficiency.
'What if users want to edit or update billers directly from the current interface?'
Instead of requiring them to navigate to the 'Manage Sender and Receiver' page, we provided the ability to perform these actions on the same page, reducing steps and improving efficiency.
' What if billers allow or recipients would like to pay partial payment such as a deposit?'
We incorporated flexible options, such as allowing recipients to check the Partial Payments options. These features enhance inclusivity but remain optional for users.
' What if billers allow or recipients would like to pay partial payment such as a deposit?'
We incorporated flexible options, such as allowing recipients to check the Partial Payments options. These features enhance inclusivity but remain optional for users.
Since the invoice has many statuses shown internally at the backend, we use colour to differentiate each status.
Since the invoice has many statuses shown internally at the backend, we use colour to differentiate each status.
Since the invoice has many statuses shown internally at the backend, we use colour to differentiate each status.
However, using colour is not enough for a user-friendly design. I discovered that the colour didn't explain everything. Adding a small note or an info icon with a popup to explain the meaning of each status would provide more clarity and help users better understand the situation. （This suggestion and design will be implemented in MVP2.）
However, using colour is not enough for a user-friendly design. I discovered that the colour didn't explain everything. Adding a small note or an info icon with a popup to explain the meaning of each status would provide more clarity and help users better understand the situation. （This suggestion and design will be implemented in MVP2.）
MVP1 Final Prototype
MVP1 Final Prototype
MVP1 Final Prototype
The video demonstrates the Request to Pay flow that is completed in MVP1.
Buckzy aims to develop "Request to Pay" as a key service by expanding the existing "Manage Sender and Receiver" feature.
This includes adding functions such as "Create Invoice," "Manage Invoice," and "Batch Invoice," along with redesigning the "Add and Manage Sender and Receiver" feature. Additionally, notifications, reminders, and recurring payments will be integrated to enhance the user experience and make it more seamless.
The video demonstrates the Request to Pay flow that is completed in MVP1.
Impact on the design and development
Impact on the design and development
Impact on the design and development
Streamlined project scope by breaking down requirements and setting clear milestones, enabling the team to deliver an efficient MVP on time.
Streamlined project scope by breaking down requirements and setting clear milestones, enabling the team to deliver an efficient MVP on time.
Streamlined project scope by breaking down requirements and setting clear milestones, enabling the team to deliver an efficient MVP on time.
Improved usability and efficiency by redesigning 'Request to Pay' and 'Sender/Receiver Management,' simplifying the user flow and streamlining the development process.
Improved usability and efficiency by redesigning 'Request to Pay' and 'Sender/Receiver Management,' simplifying the user flow and streamlining the development process.
Improved usability and efficiency by redesigning 'Request to Pay' and 'Sender/Receiver Management,' simplifying the user flow and streamlining the development process.
Impact on stakeholders
Impact on stakeholders
Impact on stakeholders
Facilitated cross-functional collaboration by leading workshops and aligning design, technical constraints, and business objectives, improving communication across teams.
Facilitated cross-functional collaboration by leading workshops and aligning design, technical constraints, and business objectives, improving communication across teams.
Enhanced compliance integration by incorporating KYC/KYB requirements into the design, streamlining onboarding for users and stakeholders.
Enhanced compliance integration by incorporating KYC/KYB requirements into the design, streamlining onboarding for users and stakeholders.
Reflections
Reflections
Reflections
In this project, I noticed that the design progress was being hindered by technical constraints. It's often said that before moving forward with design, we should consider all aspects and involve more stakeholders. But where do we draw the line? If the project continues to expand, could it complicate the originally clear requirements, making the design direction unclear and increasing potential roadblocks?
In this project, I noticed that the design progress was being hindered by technical constraints. It's often said that before moving forward with design, we should consider all aspects and involve more stakeholders. But where do we draw the line? If the project continues to expand, could it complicate the originally clear requirements, making the design direction unclear and increasing potential roadblocks?