Back
Back
Request to Pay Solution with Invoicing and Profile Management for Banking Service @ Buckzy Payment
Request to Pay Solution with Invoicing and Profile Management for Banking Service @ Buckzy Payment
Request to Pay Solution with Invoicing and Profile Management for Banking Service @ Buckzy Payment
Utilizing my systematic thinking during the design process, I developed the Request to Pay feature suite, spanning from upstream profile management to mid-point user invoicing and downstream payment tracking.
The major design encompasses invoice creation, sending requests with attached invoices, user management, and receivables tracking.
Utilizing my systematic thinking during the design process, I developed the Request to Pay feature suite, spanning from upstream profile management to mid-point user invoicing and downstream payment tracking.
The major design encompasses invoice creation, sending requests with attached invoices, user management, and receivables tracking.
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
Context
Context
Context
Enhancing Payment Efficiency and Accuracy with invoicing and request to pay features
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.
Early research
Early research
Early research
Session reply, collect feedback
Session reply, collect feedback
I began by working with the customer support team to analyze insights from user inquiries on implementing Request to Pay. The following are the 3 most essential needs from our users:
I began by working with the customer support team to analyze insights from user inquiries on implementing Request to Pay. The following are the 3 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 Payment Security
Enhanced Payment Security
End Users' Control and Flexibility
End Users' Control and Flexibility
End Users' Control and Flexibility
Conducting a survey to understand business cases
Conducting a survey to understand business cases
I collaborated with the sales team to meet with clients, having a 20 minute conversation and a short survey to identify the key features users want alongside the "Request to Pay" functionality. Here are 3 main things that they are expecting to experience:
I collaborated with the sales team to meet with clients, having a 20 minute conversation and a short survey to identify the key features users want alongside the "Request to Pay" functionality. Here are 3 main things that they are expecting to experience:
Profile Management
Profile Management
Profile Management
Invoice Creation
Invoice Creation
Invoice Creation
Payment Tracking
Payment Tracking
Payment Tracking
Discussion with the Compliance Team
Discussion with the 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:
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:
Provide a clear layout forms
Provide a clear layout forms
Provide a clear layout forms
Simplify the KYC/KYB process
Simplify the KYC/KYB process
Simplify the KYC/KYB process
Design for error prevention
Design for error prevention
Design for error prevention
Set the stage
Set the stage
Set the stage
It was hard to eat the big whale, over-Scoping Blocked Progress, made it impossible to deliver in one go
It was hard to eat the big whale, over-Scoping Blocked Progress, made it impossible to deliver in one go
It was hard to eat the big whale, 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.
Phase 1
- narrowing down
Phase 1
- narrowing down
Phase 1
- narrowing down
How might we translate broad business requirements into detailed design milestones to effectively plan the MVP
How might we translate broad business requirements into detailed design milestones to effectively plan the MVP
How might we translate broad business requirements into detailed design milestones to effectively plan the MVP
Clarify use cases
Clarify use cases
Clarify use cases
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.
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.
Built from basic needs and digest it one bite at a time
Built from basic needs and digest it one bite at a time
Built from basic needs and digest it one bite at a time
Define bill payments' commonality to fit all
Define bill payments' commonality to fit all
Define bill payments' commonality to fit all
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.
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.
Quick design and test
Quick design and test
Quick design and test
To quickly get a flexible solution out the door, I designed a Request to Pay feature with attached invoices, so we can test the market.
Performance
wasn't great
More research on specific clients' pain points
Luckily, a new client emerged during this phase and helped us define a clear short-term goal. We soon realized that the solution we were building could benefit not only this client, but also many others with similar needs. So, I conducted a one-on-one in-depth interview with the client to better understand their specific pain points and priorities.
Our persona Emily Shih, she’s an Accounts Receivable Specialist at a supply chain management company. Each day, she sends out invoices, both for her own company and on behalf of their clients, requesting payments from customers across countries On average, it takes her about 35 minutes to complete just one invoice task.
These are the daily struggles our users face, working 10-hour days, clicking through 2–3 layers, and juggling 3–4 different tools to get things done. That’s why they come to us. The client needed a centralized platform for cross-border payments that allows them to update customer information in real time, as well as create, edit, send, and track invoicing and payment progress.
Phase 2 - ideate
Phase 2 - ideate
Phase 2 - ideate
By treating a feature like Request to Pay as a systemic midpoint and designing both upstream and downstream experiences to link our current portal features.
By treating a feature like Request to Pay as a systemic midpoint and designing both upstream and downstream experiences to link our current portal features.
By treating a feature like Request to Pay as a systemic midpoint and designing both upstream and downstream experiences to link our current portal features.
Systemic design thinking
Systemic design thinking
Systemic design thinking
I ensured a cohesive end-to-end flow that connects invoice creation, request delivery, and post-payment management into one seamless user journey.
I ensured a cohesive end-to-end flow that connects invoice creation, request delivery, and post-payment management into one seamless user journey.
I ensured a cohesive end-to-end flow that connects invoice creation, request delivery, and post-payment management into one seamless user journey.
Clarify design MVPs focusing on core functionality
Clarify design MVPs focusing on core functionality
Clarify design MVPs focusing on core functionality
Starting from core Request to Pay and its aftercare
Starting from core Request to Pay and its aftercare
Starting from core Request to Pay and its aftercare
I proposed design-driven milestones based on the importance of each feature, which help PMs plan the MVP efficiently.
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.
Thinking Ahead: Inclusive Design for Evolving User Needs
Thinking Ahead: Inclusive Design for Evolving User Needs
Thinking Ahead: Inclusive Design for Evolving User Needs
Providing user flexibility in MVP 2
Providing user flexibility in MVP 2
Providing user flexibility in MVP 2
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.
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.
Sketches and
Team critiques
Sketches and Team critiques
Sketches and
Team critiques
I quickly draw sketches to help me organize my thoughts
I quickly draw sketches to help me organize my thoughts
I quickly draw sketches to help me organize my thoughts
I sketched major elements and features, and make down any questions on the side that come to mind during the rough sketch process.
I sketched major elements and features, and make down any questions on the side that come to mind during the rough sketch process.
I sketched major elements and features, and make down any questions on the side that come to mind during the rough sketch process.
Always questions over guesses
Always questions over guesses
Always questions over guesses
I invited key stakeholders, including the Product Lead, Engineering Lead, and Project Manager, to align the frontend solution with the backend feasibility. We agreed to upgrade the profile management tables to include setting payment method preferences, launch a new 'Create Invoice' and 'Attach Invoice' feature, and integrate payment tracking under the Receivables management tables.
I invited key stakeholders, including the Product Lead, Engineering Lead, and Project Manager, to align the frontend solution with the backend feasibility. We agreed to upgrade the profile management tables to include setting payment method preferences, launch a new 'Create Invoice' and 'Attach Invoice' feature, and integrate payment tracking under the Receivables management tables.
I invited key stakeholders, including the Product Lead, Engineering Lead, and Project Manager, to align the frontend solution with the backend feasibility. We agreed to upgrade the profile management tables to include setting payment method preferences, launch a new 'Create Invoice' and 'Attach Invoice' feature, and integrate payment tracking under the Receivables management tables.
Design approaches
Design approaches
Design approaches
Upstream
Upstream
'Add a Receiver' with compliance consideration.
'Add a Receiver' with compliance consideration.
To adhere to compliance rules, KYC (Know Your Customer) and KYB (Know Your Business) are essential in onboarding customers and their clients.
First, we have to understand what customer information is needed for different payment methods.
To adhere to compliance rules, KYC (Know Your Customer) and KYB (Know Your Business) are essential in onboarding customers and their clients.
First, we have to understand what customer information is needed for different payment methods.
Second, since we needed to collect extensive information from the receivers and maintain the accessibility
Second, since we needed to collect extensive information from the receivers and maintain the accessibility
Using collapsible tabs, allows customers to efficiently add payment methods, receiver information, and final reviewing at the end
Using collapsible tabs, allows customers to efficiently add payment methods, receiver information, and final reviewing at the end
Increase the colour contrast and highlight the entering field
Used colour cues and error messages to highlight and guide users to unfilled mandatory fields.
To increase the users' flexibility, users can also add multiple payment methods to save as a back up.
Create Invoice
Create Invoice
'How might we design a feature that helps users to edit or update biller information directly from the current interface?'
'How might we design a feature that helps users to edit or update biller information 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 by using pop up windows, reducing steps and improving efficiency.
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 by using pop up windows, reducing steps and improving efficiency.
' How might we design an invoice that gives billers the flexibility, such as deposits?'
' How might we design an invoice that gives billers the flexibility, such as deposits?'
Users are able to send invoice for their own business or on behalf of their clients
Users are able to select an existing clients as a biller or add a new one.
Users have options to check the Partial Payments or not.
Add multiple items in on invoice.
Users are able to scheduling or set recurring payment.
Invoice can be saved as a draft, and users can return to continue editing later.
Midpoint
Midpoint
Request to Pay
Request to Pay
We minimize the required information for a direct request to pay and allow users to attach an existing invoice that they already have. After sending the request to pay, users can view their request under invoice management.
We minimize the required information for a direct request to pay and allow users to attach an existing invoice that they already have. After sending the request to pay, users can view their request under invoice management.
Downstream
Downstream
Invoice Management
Invoice Management
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.
Users have the flexibility to view, modify, cancel and reminder on the data table page.
Redesigning 'Profile Management' for clearer structure and improved accessibility
Redesigning 'Profile Management' for clearer structure and improved accessibility
Final Touch up
Final Touch up
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
Usability Testing
Usability Testing
Usability Testing
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.
Utilizing my systematic thinking during the design process, I developed the Request to Pay feature, spanning from upstream management to mid-point user invoicing and downstream payment tracking. I enhanced usability and efficiency by revamping the 'Sender/Receiver Management' tables, simplifying the user details form with multiple payment methods, and advancing the receive payment tracking features.
Utilizing my systematic thinking during the design process, I developed the Request to Pay feature, spanning from upstream management to mid-point user invoicing and downstream payment tracking. I enhanced usability and efficiency by revamping the 'Sender/Receiver Management' tables, simplifying the user details form with multiple payment methods, and advancing the receive payment tracking features.
Utilizing my systematic thinking during the design process, I developed the Request to Pay feature, spanning from upstream management to mid-point user invoicing and downstream payment tracking. I enhanced usability and efficiency by revamping the 'Sender/Receiver Management' tables, simplifying the user details form with multiple payment methods, and advancing the receive payment tracking features.
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?