B2P: Reimagining Procurement-to-Pay Platform
B2P is an enterprise procure‑to‑pay platform connecting buyers, suppliers, and banks to digitize procurement workflows using blockchain technology. The platform verifies, matches, and shares purchase orders, goods receipts, and invoices to reduce manual reconciliation and improve transparency. As a UX Design specialist, I partnered with product managers, engineers, and domain experts to transform a complex system into a more intuitive web experience for procurement and finance teams.
B2P: Enterprise procure‑to‑pay
Web app platform leveraging blockchain
Digital Ventures (SCB)
Nov 2018 - Feb 2020
UX Design Specialist
Challenge
The existing B2P platform was difficult to use for procurement and finance teams managing multiple POs, goods receipts, and invoices across partners. Fragmented information and workflows misaligned with real processes caused confusion, delays, and errors. Users took an average of 12 minutes to submit a single invoice, with satisfaction at only 4.7/7. The business needed a more usable interface to encourage adoption and reduce friction. My goals were to improve task efficiency, reduce invoice submission time, and increase user satisfaction among procurement and finance users.
Results
The redesigned B2P platform delivered significant improvements in usability and efficiency across procurement and finance teams. User satisfaction increased from 4.7 to 6.2/7 (+32%), invoice submission time dropped from 12 minutes to 4 minutes (67% faster), and errors were reduced by 34%. The platform achieved an NPS of 65, indicating strong user willingness to recommend it to colleagues. Users could now quickly understand invoice status from the dashboard and take action without hunting through screens, and the redesigned interactive chart eliminated confusion around loading states. Procurement and finance teams reported greater confidence using the platform for daily workflows, leading to higher adoption rates.
65
Net Promoter Score (NPS)
3x
Faster average task completion rate
34%
Reduction in manual error correction tickets
Usability test script
Invoice example and test task
Process
When I joined, the team relied on reactive prototyping based on support tickets rather than formal research. When supplier complaints persisted after launch, I advocated for a structured, evidence-based process to identify root causes.
Direct Observation & Discovery: Direct Observation & Discovery: I leveraged platform training sessions to observe users interacting with the live product, identifying friction points in the supplier workflow that support tickets had missed.
Heuristic Evaluation: To standardize our design audit, I evaluated the platform against Nielsen’s 10 Usability Heuristics. I categorized issues by severity (critical, major, minor) to help stakeholders prioritize high-impact fixes over cosmetic changes.
Iterative Design: Based on these findings, I proposed design improvements focused on error prevention and visibility of system status, iterating rapidly before moving to code.
Usability Testing & Validation: I validated our solutions through two rounds of testing with suppliers. We measured task success and collected user satisfaction scores, ensuring the final designs measurably improved the experience before launch.
Design strategy
To address the issues found during discovery and heuristic evaluation, my strategy focused on simplifying complexity while preserving the accuracy and rigor required in financial workflows. I prioritized clarity, guided flows, and visual cues to help users instantly understand the status of their transactions.
This approach was built on two core principles:
Reduce cognitive load: I grouped related information, removed unnecessary fields from primary views, and surfaced key actions upfront so users could focus on the task at hand.
Build trust: I introduced consistent terminology, clear status indicators, and audit‑friendly detail views to ensure the platform met the strict compliance needs of finance and procurement teams.
The following examples show how these principles were applied to iterate and improve key areas of the platform.
Dashboard: From static data to actionable tasks
To optimize the dashboard, I iterated through three major versions, each driven by usability findings and heuristic violations regarding system status and flexibility.
Initial dashboard (Low value): The original dashboard showed a single donut chart and required manual widget setup. This violated visibility of system status, as users received no immediate insight into their pending tasks upon login.
First redesign: I added more charts to increase data density. However, testing showed suppliers mistook the status donut for a loading indicator and ignored the dashboard entirely to go straight to "Create Invoice."
Insight: Simply adding data does not equal usefulness if affordances are unclear.
Second redesign (Task-oriented but confusing): I shifted to a "Today’s Tasks" layout with shortcuts. Testing revealed users confused the shortcuts with ad banners (banner blindness) and found the new navigation structure hard to learn.
Final redesign (Clear & Interactive): I restyled shortcuts as standard buttons and added explicit labels and counts to the invoice status chart. In the final test, users immediately understood the chart was interactive and used it to filter their work.
Document List: Reducing cognitive load & scrolling
The original document list was cluttered and difficult to scan, violating heuristics on aesthetic and minimalist design and flexibility of use.
Initial state (Cognitive overload): The page displayed over 20 columns by default, forcing extensive horizontal scrolling. Search was hidden behind a button, making information retrieval slow and error-prone.
Redesign strategy (Customization): I introduced a "Column Display" feature, allowing users to select only the data relevant to their role, and exposed the search bar at the top level.
Result: This reduced visual noise and allowed users to tailor the interface to their specific workflow needs, significantly speeding up document retrieval.
Create Invoice Flow: Streamlining complex inputs
Creating an invoice is a core, high-volume task. The original design was disjointed, requiring users to jump between modals and scrolling sections, violating efficiency of use and error prevention.
Initial state (Disjointed): Users had to scroll down to add items via a modal, then scroll back up to check details, losing context and leading to input errors.
First iteration (Wizard): We implemented a step-by-step wizard to linearize the flow. While it reduced errors, suppliers felt that the process, especially blockchain validation, was too slow (over 5 minutes).
Final solution (Pre-generated & Visible): To address efficiency, I introduced pre-generated invoices that auto-fill data from selected POs, allowing users to skip manual entry. I also expanded the item table by default so all details were visible upfront, preventing the "hidden information" errors seen in earlier versions.
Result: Invoice submission time dropped from 12 minutes to 4 minutes, and error rates decreased by 34%.
Collaboration and delivery
I collaborated closely with product and engineering to ensure the design balanced usability, technical constraints, and compliance needs. By facilitating design reviews and workshops with procurement, finance, and IT stakeholders, I ensured that our solutions were both user-friendly and technically feasible.
To support the handoff:
Design System: I created a component library for recurring patterns (tables, filters, status badges) which accelerated development and reduced UI bugs.
QA Partnership: I worked alongside developers during implementation to clarify edge cases and verify that the final build matched the intended experience.
Conclusion
This project was a turning point for the product team’s culture. By introducing user research and heuristic evaluation into our workflow, I helped shift the organization from reactive fixes to proactive, evidence-based design.
The redesign proved that even complex fintech platforms can be intuitive without sacrificing rigor. Moving forward, the team plans to implement in-product analytics and satisfaction surveys to continuously track task success and error patterns, ensuring the platform evolves alongside its users' needs.
