GoPay

One payments system for billers and clients.

Fintech product architecture · Saudi Arabia

·

GoPay

Scroll to explore

GoPay case study

GoPay

One payments system for billers and clients.

Fintech product architecture · Saudi Arabia

·

GoPay

Scroll to explore

GoPay case study

Scroll to explore

GoPay

One payments system for billers and clients.

Fintech product architecture · Saudi Arabia

·

GoPay

GoPay case study

GoPay

One payments system for billers and clients.

Fintech product architecture · Saudi Arabia

·

GoPay

Scroll to explore

GoPay case study

PROJECT OVERVIEW

I architected and redesigned an existing payments product through Plexable. The work brought biller and client experiences into one coherent system without pretending the platform started from zero.

CLIENT

GoPay

MY ROLE

Product architect and design lead, via Plexable

SCOPE

Product architecture, mobile experiences for billers and clients, invoicing and payment flows, wallet and dashboard patterns, and design-system direction

VALIDATION

Delivered product architecture and mobile workflow system

TIMELINE

2024 engagement

TEAM

I led the product architecture through Plexable. The studio and GoPay teams carried that direction across the biller and client mobile experiences.

The context

GoPay already served a complex billing and payments domain. The design challenge was to raise the product's clarity and consistency across two audiences with different responsibilities, while respecting existing operations and regulated workflows.

My responsibility

I defined the product structure, separated biller and client responsibilities, and shaped the mobile flows that connected invoicing, payment, account visibility, and recurring operational tasks.

Modernising the product without rewriting its history

01

What I owned

I treated the engagement as an enhancement of an existing platform. The first job was to understand the operating model, then decide what should remain shared and what needed a role-specific mobile experience.

01

What I owned

I treated the engagement as an enhancement of an existing platform. The first job was to understand the operating model, then decide what should remain shared and what needed a role-specific mobile experience.

02

How I led

I set the architecture and role boundaries; the team carried those decisions through the biller and client flows.

02

How I led

I set the architecture and role boundaries; the team carried those decisions through the biller and client flows.

CONSTRAINTS & TRADE-OFFS

Shared financial logic. Different daily jobs.

01

The constraint

Billers needed control over invoices, collections, and operational status. Clients needed a direct path to obligations, payments, and account confidence. Security and regulated-fintech expectations applied to both.

01

The constraint

Billers needed control over invoices, collections, and operational status. Clients needed a direct path to obligations, payments, and account confidence. Security and regulated-fintech expectations applied to both.

02

The trade-off

I separated the mobile experiences by responsibility while keeping common payment objects, terminology, and system patterns. That reduced cognitive load without fragmenting the underlying product model.

02

The trade-off

I separated the mobile experiences by responsibility while keeping common payment objects, terminology, and system patterns. That reduced cognitive load without fragmenting the underlying product model.

● RESEARCH & CONTEXT

Architecture before interface

I started with the operating model: who issues an invoice, who acts on it, which states both sides share, and where permissions diverge. That structure determined the interface.

● PRODUCT DECISIONS

Three decisions that organised the platform

01

Separate experiences by responsibility

Biller and client apps shared the same financial logic but prioritised different tasks, permissions, and status information.

01

Separate experiences by responsibility

Biller and client apps shared the same financial logic but prioritised different tasks, permissions, and status information.

02

Make financial status legible

Invoices, balances, collections, and payment states used consistent language and hierarchy so people could understand what required attention.

02

Make financial status legible

Invoices, balances, collections, and payment states used consistent language and hierarchy so people could understand what required attention.

03

Enhance instead of erase

The redesign preserved valid product behaviour and raised the experience around it. That reduced delivery risk and respected the investment already made in the platform.

03

Enhance instead of erase

The redesign preserved valid product behaviour and raised the experience around it. That reduced delivery risk and respected the investment already made in the platform.

● PROCESS & EVIDENCE

The product map, biller/client responsibility split, core payment journeys, and reusable patterns show how a shared domain model became two focused mobile experiences.

01.

Product architecture

A coherent system for billers, clients, invoices, and payments.

04.

Systems thinking

Shared logic across two distinct user experiences.

02.

Fintech UX

Clear states and actions in a regulated financial context.

05.

Design systems

Consistent interface and financial-status patterns.

03.

Mobile design

Role-specific experiences for recurring operational tasks.

06.

Design leadership

Architecture led personally and delivered with the Plexable team.

01.

Product architecture

A coherent system for billers, clients, invoices, and payments.

03.

Mobile design

Role-specific experiences for recurring operational tasks.

05.

Design systems

Consistent interface and financial-status patterns.

02.

Fintech UX

Clear states and actions in a regulated financial context.

04.

Systems thinking

Shared logic across two distinct user experiences.

06.

Design leadership

Architecture led personally and delivered with the Plexable team.

01.

Product architecture

A coherent system for billers, clients, invoices, and payments.

02.

Fintech UX

Clear states and actions in a regulated financial context.

03.

Mobile design

Role-specific experiences for recurring operational tasks.

04.

Systems thinking

Shared logic across two distinct user experiences.

05.

Design systems

Consistent interface and financial-status patterns.

06.

Design leadership

Architecture led personally and delivered with the Plexable team.

01.

Product architecture

A coherent system for billers, clients, invoices, and payments.

03.

Mobile design

Role-specific experiences for recurring operational tasks.

05.

Design systems

Consistent interface and financial-status patterns.

02.

Fintech UX

Clear states and actions in a regulated financial context.

04.

Systems thinking

Shared logic across two distinct user experiences.

06.

Design leadership

Architecture led personally and delivered with the Plexable team.

LIGHT MODE UI

ABOUT ME

GoPay — The Pivot visual 3
GoPay light mode settings and navigation
GoPay — Adaptive Visual Modes visual 20
GoPay — Visuals Section visual 28

DARK MODE UI

ABOUT ME

GoPay — Wireframe Logic visual 8
GoPay — Design Pillars 2 Section visual 1
GoPay — User Discussions & Insights visual 2
GoPay — The Pivot visual 4
GoPay — Solution Section visual 5
GoPay — The Pivot visual 4
GoPay — Validation visual 10
GoPay — E-Invoice Vault visual 11
GoPay — Filtered Search visual 12
GoPay — Secure Wallet visual 13
Design System Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
GoPay — Adaptive Visual Modes visual 19
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 24
Go Pay fintech app home and transaction screens
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 34

OUTCOMES

ABOUT ME

GoPay — Impact visual 21
GoPay — Result visual 22

LIGHT MODE UI

ABOUT ME

GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
GoPay — The Pivot visual 3
null
GoPay light mode settings and navigation
GoPay light mode settings and navigation
GoPay light mode settings and navigation
GoPay light mode settings and navigation
GoPay light mode settings and navigation
GoPay light mode settings and navigation
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Adaptive Visual Modes visual 20
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28
GoPay — Visuals Section visual 28

DARK MODE UI

ABOUT ME

GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Wireframe Logic visual 8
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — Design Pillars 2 Section visual 1
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — User Discussions & Insights visual 2
GoPay — The Pivot visual 4
GoPay — Solution Section visual 5
GoPay — The Pivot visual 4
GoPay — The Pivot visual 4
GoPay — Solution Section visual 5
GoPay — Solution Section visual 5
GoPay — The Pivot visual 4
GoPay — The Pivot visual 4
GoPay — Solution Section visual 5
GoPay — Solution Section visual 5
GoPay — The Pivot visual 4
GoPay — The Pivot visual 4
GoPay — Solution Section visual 5
GoPay — Solution Section visual 5
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — Validation visual 10
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — E-Invoice Vault visual 11
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Filtered Search visual 12
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
GoPay — Secure Wallet visual 13
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Design System Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
Component Showcase Photo
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Adaptive Visual Modes visual 19
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 23
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
GoPay — Visuals Section visual 24
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
Go Pay fintech app home and transaction screens
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 26
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 27
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 29
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 30
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 31
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 32
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 33
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34
GoPay — Visuals Section visual 34

OUTCOMES

ABOUT ME

GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Impact visual 21
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22
GoPay — Result visual 22

WHAT ID IMPROVE

What improved

Biller and client responsibilities became explicit in the product structure.

Shared financial objects and interface rules created consistency across both apps.

WHAT I LEARNED

What I learned

Product modernisation begins by understanding the operating model, not by replacing every screen.

Role separation works best when the underlying domain model remains shared.

WHAT'S NEXT STARTS WITH A CONVERSATION.