Results
Saved Users $$$
Account-to-account transfers eliminated high percentage card processing fees.
Merchants kept more revenue from every transaction.
Instant Payments
Customers left dealerships with funds already in their accounts.
What previously took days now completed while they were
still on-site.
85% Adoption Rate
What started as an innovation became the default way dealerships send money.
85% of transactions are now utilizing the Pay By Bank feature.
Refined Design System
Through design system refinement, we accelerated ideation and development by 40%
What used to take weeks now takes days.
Opportunity
Market Position
Be first to offer electronic automotive payouts
No platform connected open banking to dealerships. Prommt could establish itself as the innovation leader in automotive payments.
Revenue Expansion
Create new transaction revenue streams
Payout processing introduced new fee structures beyond payment acceptance. This diversified Prommt's revenue model.
Combat Rising Fraud
UK dealerships faced escalating fraud with 1 in 5 falling victim in 2024.
Open banking authentication through PayIt eliminated card fraud exposure and chargeback risks that cost dealerships thousands per incident.
Future-Proof Compliance
Challenges
Legacy System
We had to keep the payout workflow resembling existing Prommt UI structure, which is built on a dated version of React.
This limited how extensively the workflow could be reimagined.
Status-State Complexity
The API returned 20+ transaction statuses with technical terminology.
Translating these into clear, actionable information for non-technical dealership staff required careful information architecture.
Hand-Off Design
Users transition from Prommt to PayIt's bank selection, then return after authentication.
I designed seamless visual and messaging continuity to maintain trust during this critical handoff.
Design System Inflexibility
The existing design system lacked flexibility between different verticals.
Building the payout workflow revealed this limitation, requiring parallel work on component architecture while designing the feature.
Discovery
Researching the capabilities within NatWest's payouts API, we explored existing merchant workflows & regulatory requirements.
Dealerships were stuck using slow payment methods for paying customers or issuing refunds, creating 3-5 day delays in transaction closures that were highly susceptible to fraud ris and disappointing customers..
Open banking infrastructure existed, but merchants lacked a straightforward way to use it at scale.
The opportunity was clear
Research confirmed that payment speed directly impacted customer satisfaction and fraud risk. The solution wasn't just technical integration, it required designing trust into every step of a merchant payment flow that customers have grown accustom to with other businesses.
Research
Method
I mapped out everything needed for integration:
Authentication flows
Required data fields
How statuses progress through the system
Business rules
Reconciliation protocols.
This gave me a complete picture of what the integration would require technically. I then translated these technical requirements into simple, intuitive workflows that merchants and customers could actually use.
Challenge
The key challenge was taking 20+ backend API fields and distilling them into 5-7 straightforward form inputs that made sense to users.
For example, instead of exposing technical fields like "merchant_id" and "brand_id", I created a simple "Location" dropdown. I also converted technical status codes into friendly language, so active became "Sent" and merchants could understand what was happening at each stage.
The result was a clean user experience that hid all the complexity (OAuth tokens, webhooks, polling logic) while still delivering full API functionality behind the scenes.
Solution
Merchant Side: Creating Payout
Dealership staff access the payout form and input:
Amount
Secret answer
Customer details
Delivery channel (email/SMS/link).
They can customize the message or use the default provided.
Review and send.
Customer Side: Receiving the Payout
Customers receive branded notifications via
SMS, Email, or link) with transaction details, security answer and a link to complete the payout.
Customers enter their security answer
Select their bank from 300+ options via PayIt
Authenticate through their bank's portal
Choose Account & receive funds instantly.
Transparency = Trust
Notifications explain exactly what customers need to do and why. Each screen reinforces security through clear messaging & branding about the merchant, transaction amount, and verification purpose.
Customers always know what's happening and what comes next, reducing anxiety around a new payment method.
Authentication & Security
Customers authenticate through their own bank's portal, not a third-party login screen. PayIt connects to 300+ UK banks, allowing customers to use existing credentials in a familiar interface.
No sensitive banking details are shared with merchants, maintaining security and privacy.
Instant Gratification
After verification and bank selection, funds arrive in customer accounts instantly. Customers leave dealerships with money already transferred, no check deposits, no 3-5 day waiting periods, no trips to the bank.
The transaction completes while they're still on-site.
Design System Improvements
The Problem
Building the payout workflow exposed rigid design system architecture.
Components lacked the flexibility to adapt across payment types or verticals, often forcing designers to detach instances from master components for customization.
This created inconsistencies, slowed delivery, and complicated engineering handoffs.
The Solution
Robust Components
Components are built as fully responsive elements utilizing variants & booleans which allowiteams to update content, states, and layouts without breaking structure or responsiveness.
Rapid Ideation
Utilizing variants and robust components designers can now rapidly ideate on workflows, examine edge cases and build out features or design pages in minutes
Organized Design System
I went through each component and applied conventional naming and syntax to best utilize figma's component search feature. Designers can search from any design file or go into the design system file and find the component necessary.
Components are now organized in individual pages, nomenclature and usage descriptions to allow for quick access to the correct components.
This sped up product ideation significantly, allowing the team to build
hi-fidelity artboards, examine workflows & discover edge cases sooner.
This variant-based approach enabled components to:
→ Maintain visual consistency when customized
→ Allow single-layer editing instead of managing multiple layers
→ Adapt across Prompt's different verticals through variants
→ Scale responsively across all devices and screen sizes
The Impact
Feature iteration and delivery accelerated by 40%.
This efficiency gain compounds across every subsequent design excercise, feature & established reusable patterns for future products at Prommt.
Key Takeaways
→ API integration requires design thinking
Translated NatWest's three-part data structure into a logical user journey
→ Security Requirements
Became trust-building features through proper framing.
→ Information Architecture
Organizing 20+ statuses by "what users need to do" rather than backend processes made the system understandable to non-technical dealership staff.
→ Design System Investment
The 40% efficiency gain from component refinement applies to every feature built afterward, demonstrating the ROI of treating design systems as first-class product work.
→ Domain Expertise
Researching, understanding & empathizing with merchants and their customers was integral to understanding the true direction of a successful product.
