All workFathia Nazzal
M-Payment app: the get-started screen in the middle, with the splash and the login screens on either side, over a blue gradient

M-Payment

(04 / 08) Mobile app, card management, Banking, card managementOne card app that banks put their own name on.

Client
CSC, who sold the app to several banks
My role
Onboarding, login and home, Card management screens
Platform
Mobile app
Tools
Figma
(Overview)

M-Payment is a card management app from CSC, which sold it to several banks. You see your cards, freeze them, change the PIN and check your transactions. Each bank gets a white-label of its own.

(My part)

What I did

I designed the M-Payment screens: the onboarding, the login, the home and the card features.

The Bank of Jordan Syria version, a white-label of this app, has its own page.

  • Splash and a three-step walkthrough
  • Login in English and in Arabic, with Face ID
  • Home with a card carousel and quick actions
  • Card services: change PIN, permanent block, hide card, spending behaviour, billing cycle, and the menu
(Onboarding)

Splash andwalkthrough

The splash, the get-started screen and the three-step walkthrough.

SplashGet startedWalkthrough 1Walkthrough 2Walkthrough 3
M-Payment
(Login and home)

Login andhome

Login in English and in Arabic, then the home with the cards.

LoginLogin, emptyLogin in ArabicHome with cards
M-Payment
(Card features)

Card featuresand menu

Card services and the menu, which comes last.

More services, card hiddenCard hiddenMore servicesMenu
M-Payment
Next project (05)

Bank ofJordan Syria