GoPay -
billing &
collections.

GoPay is a SAMA licensed billing and collections platform built on SADAD. I joined mid-project, into a system that was already partly built and pulling in different directions. I rebuilt the foundation underneath it, the design system, the components, dark mode, the responsive behavior, and the Arabic and RTL layer, while the product kept shipping, then designed a stack of new flows on top.

The hardest part was not any single screen. It was making one foundation hold four things at once, Arabic and English, light and dark, responsive, and regulated, without freezing a product that was already live.

GoPay is developed by Inclusive Financial Solutions and licensed by the Saudi Central Bank as a payment intermediary on SADAD, the Kingdom's national bill payment rail. It lets businesses of any size issue invoices, collect payments, and reconcile, all inside a regulated environment.

The product is Arabic first and Saudi first, and that is not a detail. In a market where the default language is Arabic and the payment rail is SADAD, the experience has to feel native to that context, not translated into it after the fact. That premise shaped almost every decision below.

• Mine: The new flows and features I designed end to end, onboarding and OTP, the shortened KYC, the roles system, the home dashboard, plans and comparison, checkout and SADAD, bulk reminders, payment requests, the vendor receipt. Then the design system rebuild, the component library, dark mode, responsive across the whole system, and the Arabic and RTL layer.
• Shared: Feature scope, worked out with product managers, engineers, and the CEO. Integrations with Nafath and Tahaqoq, designed around what those systems allow.

What people struggle with. Signup and KYC were long enough that people dropped out of them before finishing. Screens looked different from one flow to the next, so the product felt like several products. It was not responsive. And the Arabic version was awkward, because it had not been designed with Arabic in mind, it had been translated onto layouts built for English.

How I framed it. The question was not "make it prettier." It was "how do you make a regulated, Arabic first platform fast to enter, when the existing signup was long and had not been built around the Kingdom's identity and security systems in the first place." Those systems were not part of the flow before I joined. I rebuilt signup and KYC around them, Nafath, Tahaqoq, and biometrics, so the flow got shorter and properly compliant at the same time. The reframe mattered most here. The friction was not the number of screens. It was asking users to verify things the state can already verify.

I came in mid-project. The direction and the first build were set. What shaped my work was the existing system, the product goals I was handed, and the Kingdom's identity and security systems I had to build the sensitive flows around. I worked from the inside out, audited what was there, kept what worked, rebuilt the rest. Feedback from product, engineering, and the CEO adjusted the flows as they went, especially anything touching identity and payments.

Good meant three things. Onboarding fast enough that people stopped dropping out of it. One system that held together across Arabic and English, light and dark, and every screen size, with no parallel versions drifting apart. And new features that shipped and fit, rather than sitting on top as bolt ons. Onboarding time dropped 70%, and it did that while getting more compliant, not less.

Retrofitting a foundation under a live product. The system was already shipping, so a hard freeze was not on the table. I rebuilt the design system and components in place, then migrated the product across screen by screen. New work was built on the new foundation from day one. Old screens were pulled over in passes. The point was to stop the drift I was brought in to fix without stopping the product to do it.

Arabic and RTL as a build axis, not a translation. Arabic is not English flipped. Direction changes layout, but it also changes type, rhythm, spacing, and how a component reads. I built direction into the components themselves rather than mirroring finished English screens. One source, both directions, across the whole set. An Arabic screen was never a second class version of an English one.

Cutting KYC by moving verification to the state. The heavy part of onboarding was verification, and the compliance and security this flow needed were not there before I joined. So I rebuilt signup and KYC around the Kingdom's systems in the same pass. Nafath and Tahaqoq verify identity at the source, instead of the user collecting, re-entering, and getting manually checked in app. Biometrics carry the trust step. The flow got shorter and properly compliant at once, and every step that survived earns its place.

A roles tree that maps to a real org. A flat list of roles works until a real company signs up. GoPay serves businesses of every size, so I modeled permissions as a tree. You build roles, assign users into them, and the structure mirrors how the organization actually works. It is more to design and explain, but it is the difference between a demo and something an enterprise can run on.

Foundation

• Rebuilt design system and component library. One source of truth under the whole product.
• Dark mode across the system. Themed at the token level, not screen by screen.
• Full responsive. Every module, both themes, every size.
• Arabic and RTL layer. First class, not a translation pass.

Onboarding and identity

• New onboarding with OTP. New logic, fewer steps.
• Shortened KYC. Nafath and Tahaqoq for verification, biometrics for trust, compliant end to end.

Operating the platform

• Entirely new home dashboard. New layout and a new set of widgets: one-time, recurring, and other payments, payment statistics, payment status, last payments, recent activity. What matters, at first glance.
• Plans and comparison. Side by side, easier to choose.
• Roles system with a roles tree. Create roles, assign users, scoped by hierarchy.
• Bulk reminders. Chase overdue invoices at scale.
• Payment requests. New request flow.
• Vendor receipt. New receipt the payer gets back.

Payments

• Checkout with SADAD. New checkout screens, pay through the national rail.

Holding all of it together is the rebuilt design system. That is what makes a dark mode Arabic dashboard and a light mode English checkout read as the same product.

• Onboarding time dropped 70%, by moving verification to Nafath and Tahaqoq and rebuilding the flow around them instead of collecting everything in app.
• One system now holds Arabic and English, light and dark, and full responsive, with no parallel versions to keep in sync.
• A stack of new flows shipped in a month: onboarding, dashboard, plans, roles, checkout, reminders, requests, receipts.
• The rebuilt foundation is carrying the work that came after it, which is the real test of whether it held.

The rebuilt system is the base the wider product family sits on, GoInvoice, GoSplit, GoOnline, and GoPay+. New modules plug into the same components, tokens, and roles model instead of starting over. That was the point of rebuilding the foundation the way I did.