Skip to content

C Pay · Product design

A clearer way
to pay.

One connected experience.
For the customer, the merchant
and the team behind the transaction.

Payment gatewayMerchant portalBack office
Explore the original prototypes ↓
C Pay QR payment on an iPad Pro in a minimal setting
C Pay merchant dashboard on an Apple MacBook Pro
C Pay back-office dashboard on an Apple iMac

01 · The opportunity

Crypto at checkout. Clarity everywhere else.

A payment is a shared moment: a customer needs to know what to send, a merchant needs to know what arrived, and an operations team needs to understand what happened in between.

C Pay connects those three perspectives through one product family: a payment gateway, a merchant portal and a back office. The design makes amounts, fees, references and payment status visible at the moment each person needs them.

02 · Three connected experiences

One transaction. Three points of view.

The customer flow stays focused on completing one payment. The merchant workspace turns payments into bills, records and daily oversight. The back office adds the operational controls needed to support a wider merchant network.

The visual language stays familiar across all three, while the density changes with the task: fewer choices at checkout, more context in the workspace.

01 / Customer

Choose a currency, understand the total and follow the payment to its confirmation.

02 / Merchant

Issue a bill, trace a payment and keep the day's activity in view.

03 / Operations

Manage merchants, review transfers and follow settlement and exchange records.

C Pay payment gateway on an Apple device

03 · Payment gateway

Make the next step feel obvious.

A familiar price anchors the journey while supported currencies offer a choice of payment method. Selecting a coin reveals its transaction and exchange charges before the user continues.

A QR code and copyable address connect the invoice to a wallet. Waiting, success and expired-link states give the payment a legible beginning, middle and end. The supplied prototype also explores a mobile wallet handoff, a simulated fingerprint confirmation, English and Persian, and light and dark appearances.

Choose a currency → Next → follow the QR payment flow. Amounts, addresses and confirmations are demonstration data.

The C Pay mobile payment experience on an iPhone

04 · Point of sale

The same clarity. At the counter.

C Pay also explores payments on point-of-sale terminals. The supplied hardware concepts carry the journey from entering an amount and choosing a currency to scanning a QR code, waiting for payment and showing a receipt.

A phone and terminal share the moment of payment: the customer follows the amount on their own screen, while the merchant sees the status at the counter. These product visualizations present the POS experience alongside the original browser prototypes.

C Pay payment stages across the original white POS terminals and central iPhone

05 · Merchant portal

A working day, not a wallet address.

For a merchant, the job starts before money arrives. A bill needs an amount, a payer and a reference; a payment link then needs a clear route to the customer.

The portal brings bill issuance, open and paid bills, transaction history and exchange reports into one workspace. Summaries give the day a readable shape, while detail views keep an individual payment connected to its original bill.

Demo sign-in: enter any non-empty username and password, then any four digits. No account or real payment is created.

C Pay merchant dashboard on an Apple MacBook Pro

06 · Back office

Keep the whole operation in view.

The back office extends the same system to the team behind the service. Merchant management, withdrawal journeys, sold-crypto records, bill reports and exchange history sit within a consistent navigation model.

High-consequence actions are staged: enter the information, review the details, then confirm. The prototype demonstrates these steps with sample records and simulated verification, making the interaction model tangible without moving real funds.

Explore Merchant Management, Bill Report or Crypto Withdraw using the supplied sample records.

C Pay back-office dashboard on an Apple iMac

07 · The interface language

Warmth at the surface. Structure underneath.

Pale surfaces and quiet navy typography give dense financial information room to breathe. The orange-to-coral gradient makes the amount or summary card easy to locate, while a consistent family of coin symbols helps the user distinguish payment options.

Rather than making every surface equally expressive, the system concentrates color around the transaction. Shared cards, lists, forms and status patterns connect a simple checkout with a much richer administrative workspace.

The C Pay mobile payment experience on an iPhone
The original C Pay mark on minimal brand cards
C Pay merchant dashboard on an Apple MacBook Pro
C Pay payment gateway on an Apple device

08 · Beyond the screen

Designed around the people using it.

The new visualizations keep the interface at the center: an iPad at checkout, a MacBook for the merchant and an iMac for operations. Quiet surfaces and restrained lighting carry the navy, orange and coral palette into a minimal physical setting.

These are art-directed product mockups, not documentary photographs of a deployed service. The laptop, tablet and desktop scenes use Apple hardware; the POS scenes expand the supplied terminal concepts. The original films and prototype interfaces remain as supplied.

09 · What this work demonstrates

A clear experience on both sides of the payment.

The design brings three different levels of complexity into one recognizable product family: a focused customer journey, a useful merchant workspace and a structured operational environment.

The original films and interactive HTML prototypes are presented here unchanged. The next validation step would be task-based testing of currency selection, fee comprehension, invoice creation, payment-status interpretation and withdrawal review. No conversion, processing-speed or adoption results are claimed.

Customer clarity

Can a first-time payer explain the total, the selected currency and the next step?

Merchant confidence

Can an owner create a bill and trace its status without losing the reference?

Operational control

Can an operator review a merchant or withdrawal and identify what needs attention?

Product design & art direction · Alireza Jelodar
Original interface and films · C Pay / Crypto Pay
New minimal device visualizations · AI-assisted art direction

Back to Case Studies ↗