role
Product Designer
scopes
B2B SaaS
Banking Tech
Product Design
collaborators
1 Product Manager
1 Product Designer
1 UX Writer
Engineer Team
timeline
Q3 2023
Background
Back in mid-2023, the Supply Chain Financing (SCF) portal was first established for Seabank Indonesia. SCF was initiated by the business credit team in partnership with corporate clients and SMEs (small and medium enterprises) to enable invoicing demand loan services in our bank.
Seabank looked to expand their business by building an SCF portal to enable new financing products in the Philippines.
The Seabank Philippines portals work similarly to the Indonesian version, albeit with new requirements that adhere to their regulation and streamlining objectives. One of the top priority requirements was an online process for agreement & NPR signing, which occurs offline in the Indonesian version.
discovery
Goals
Each stakeholder has their respective problem statements and goals:
Constraints
Proposed Solutions
On the SCF portals:
On the project management constraints, I facilitated cross-department discussions with the original Singaporean design team. We came to this agreement:
Business Stakeholders Interview
The product manager and I met with business stakeholders to gain insights on several key questions:
At which stage does the agreement & NPR signing process take place?
Which roles will be involved from both Seabank & Buyers/Sellers side?
What are the available actions for each role, and how do they intertwine in the whole process?
Business flow chart
We found that the agreement & NPR signing process kicks off once the initial loan request has been reviewed and approved by Seabank.
Seabank Maker will upload the agreement & NPR documents, which the Seabank Checker then reviews. Once approved, the system will send the documents to the external portals where sellers can download them, sign them, and upload them back.
The signed documents will undergo a review process from Seabank before they can proceed with the loan disbursement.
exploration
Flow Breakdown and Wireframing
Quick flow breakdown across both portals
Based on the business flow chart and the quick flow breakdown, I started drafting wireframe mockups for the new Agreement & NPR section layout.
The initial idea was to put the section below the loan request form section. It will first appear on the internal portal for Seabank Maker roles, since they would be the ones to kick-start the process by uploading the documents, once they have reviewed the loan request above it.
Wireframe mockup for Agreement & NPR section placement & content
iteration
Peer Review Feedback
Business stakeholders were fine with the layout and the content of the Agreement & NPR section. However, in further discussions with the original Singaporean design team, I received valuable peer feedback on how the layout might not be the best solution:
Cognitive overload
Showing the Agreement & NPR section right away, which has a pending upload field, might not be the optimal usability for Seabank Makers. They would first need to review the loan request form thoroughly, before proceeding with any actions relevant to Agreement & NPR.Disconnection between important sections
The Agreement & NPR section will also undergo the approval chain process. The current layout didn't reflect that and instead suggested that it wouldn't be affected by it, unlike the loan request form.
Iteration: Tabs with Guided Navigation
Based on the feedback, I came up with the idea of using tabs with guided navigation.
Tabs separating the Request form and Agreement & NPR form
Guided navigation catered to each role
The tabs separated the Request form and Agreement & NPR form. Both tabs are part of the same Loan Request section, and users could still view the Approval Chain section to monitor the approval progress.
The guided navigation takes the form of buttons that will guide the user to the next action. Together, these solutions solved the aforementioned cognitive overload and disconnected sections issues.
Final Design and UX Documentation
Once the Agreement & NPR page structure is finalized and approved, I proceeded to implement the flow in both internal and external portals.
Seabank Maker view: To review the request form first before uploading the agreement documents
Seabank Checker view: To review request form and agreement documents before sending them to Submitter
Submitter view: Will receive Seabank documents to be signed and re-uploaded
Seabank FinanceOps view: The final verifier of the agreement & NPR signing before confirming loan disbursement
For engineer handoffs, I also provided the detailed UX document. This was done to follow the established design document format from the original Singaporean design team.
Preview of the UX document for engineer handoffs
evaluation
Impact and Performance
key takeaways
Cross-regional collaboration bridges knowledge gaps.
Working with the original Singaporean design team through structured peer reviews (2x per week) enabled the Indonesian team to quickly ramp up on an unfamiliar product domain. This collaborative approach also built internal capability for future banking tech projects.
Questioning initial solutions prevents usability issues.
The shift from single-page layout to tabbed navigation with guided flows came from recognizing cognitive overload risks during peer review. This made me learn how questioning initial solutions, even seemingly straightforward ones, can uncover better approaches.