Hesabe is a licensed payment gateway listed on Forbes Middle East's Fintech 50. It runs a merchant panel, POS terminals and the payment pages, all of it built feature by feature over a decade into fragmented, complicated interface.
I was invited to rethink Hesabe's merchant platform from the ground up, aligning existing features, introducing customer and SKU libraries, and unifying everything into one consistent system built for future growth.
The design requirement was to enable creation and analysis of vast amount of payment mechanisms while maintaining: RTL/LTR support, full responsiveness for mobile, respect for legacy user habits, all while navigating Central Bank and KNET payment laws to keep Hesabe compliant.
Table data overviews carry most of the daily work, so they received lots of quality-of-life improvements. Filtering and searching were expanded and split into quick and granular options. Users were particularly happy with the introduction of standardized bulk actions, letting them apply actions to many records at once.
Filtering
Quick actions for every record
Bulk actions
Record details overlay
Alongside the interface work, user research mapped the jobs-to-be-done for each table space. That made it possible to cut each view to cover the most use cases. A record was reducing a table from 16 columns to 6.
Default vs all columns enabled view
The dashboard was rebuilt for at a glance reading. Users can set a date range and compare it against the preceding period. Every metric from the old dashboard carried over, so the rebuild took nothing away.
Invoice creation was the most delicate flow to touch. Users run it constantly, and since the redesign shipped in a single release, the deep habits had to meet a new interface overnight. That set the rule for every shortcut I introduced: it had to be skippable, so anyone who read it as friction could fill the form by hand instead.
Every entered customer is saved and can be picked from a list
When inputting a new customer only the name is mandatory
Missing fields are asked for only when needed
For a quick invoice the amount can be typed straight in
For a detailed invoice, the amount can be built from saved products
Invoices can also be bulk created from XML, a format many used as templates since the old system saved no customer data.
The rework covered internal staff's needs too. Onboarding flows were prepared so that new users can set up accounts on their own. This replaced introductory video calls that took Hesabe team up to four hours per user.
Guided setup
Product tour
Onboarding template library
To trust a payment gate merchants need to see and manage their own compliance. The settings section gathers business and compliance data with account structure and administrative controls, so verification, permissions and history are all in one place.
Larger companies require more than one entity so I designed an account model to support multiple submerchants and employee accounts. Nested sub-merchants receive configuration cascading down from main merchant while status and reporting are propagated up. Employees sit under main account with permissions scoped by role (PBAC)
Employees panel with permissions
Submerchants panel
Merchants needing more capability from the platform have access to a dedicated panel of additional services and integrations, each enabled through its own guided wizard.
Online and offline services
Integration setup wizard
A change log records every action in the settings space for audit purposes. Entries tagged as "added", "removed" or "updated" disclose each user who made the change.
Changes details, type: Updated
Reworking an entire platform on a short deadline meant strong prioritisation. I mapped every view, grouped them by shared structure, and ran workshops to pick the pages that needed tailored rework. Everything else got template flows linking back to those tailor examples. This workflow resulted in crucial spaces fully documented, while the rest was derivatively extendable.
Center: template, borders: pages that could be derived from template
Most of Hesabe's merchants work in Arabic, so right-to-left reading shaped the design from the start. The Design System was built on shadcn with horizontal spacing kept even throughout components. No overrides or custom values to keep the LTR/RTL switching straightforward.
LTR & RTL layouts
Because some merchants run their whole business on the phone, every design decision took into consideration mobile renditions. Every component and space renders suitably on mobile and desktop view.
Desktop & mobile layouts
A full checkout flow was prepared on top of Hesabe merchant panel. Its aim is to streamline the customer flow so merchants get more conversion.
One interesting challenge was to determine how much merchant identity a payment page could carry. Customers had flagged heavily branded pages as scams, so Hesabe's own presence was doing the reassurance work.
Checkout pages
Payment pages
Payment page – desktop
The designs were really good, and useful, it really looks promising, for our merchants to utilize “-” new ways/modern ways to introduce different solutions/features for merchants Rakan – CEO
The documentation is clear and makes it easy to understand the purpose of each feature. The interface is simple, clean, and professional. Rekha – Lead Developer