eFAWATEERcom - Bill payments for Jordan on web and mobile
“
Look up a bill and pay it from your bank account, on any screen.
eFAWATEERcom
Website, web app and mobile app, 2017
About the project
eFAWATEERcom is Jordan’s national service for presenting and paying bills, owned by the Central Bank of Jordan and run by MadfooatCom. In 2017 we redesigned its website and web app and designed its new mobile app for iOS and Android, every screen in Arabic and English. People use it to look up a bill and pay it straight from their bank account.
Project
eFAWATEERcom Website and App
Industry
Fintech and Bill Payments
Location
Amman, Jordan
Date
2017
“
Client Request
eFAWATEERcom wanted an app where people inquire about any bill and pay it from their bank account, without going through an ATM or online banking.
eFAWATEERcom
Business requirements, January 2017
Design Pillars
Core UX Principles
Pick a category, a biller and a service, and see the amount due before paying.
Choose a bank and an identifier, then confirm with the code the bank sends by SMS.
Each screen has an Arabic twin, mirrored for right to left reading.
What Users Need
Built Around How Jordan Pays
No Card Needed
Few people in Jordan pay with credit cards, so the app takes the money from a bank account.
Citizens and Residents
Jordanians and non-Jordanians sign up with different IDs, so registration asks for nationality first and adjusts the fields.
Bills That Come Back
Saved bills are checked on their own, and the app sends a notification when a new one is issued.
The Challenge
Problem Statement
The Main Goal: Make a National Payment System Easy to Use
A payment on eFAWATEERcom passes between the user, a biller and a bank, each with its own rules and limits. The website, web app and apps had to turn all of that into a short path: find the bill, check the amount, choose a bank and confirm the code, in Arabic or English.
“
Simplicity for the user. Convenient user interface.
eFAWATEERcom Business Requirements
eFAWATEERcom, 2017
Our Approach
Solution
One System on Web and Mobile
User flows, wireframes and the final UI for the public website, the web app and the iOS and Android apps, in Arabic and English. It is an example of our Fintech Product Design work.
01 - Flows and Wireframes
We mapped every flow and its error cases first, then reviewed them with the eFAWATEERcom team.
02 - The Mobile Apps
Native iOS and Android designs for sign in, My bills, inquiry, payment, prepaid top ups and the profile.
03 - Website and Web App
A new public site with billers and support pages, and a web app with the same bills and history as the apps.
Before & After
The Blueprint & Evolution
Old Site to New Site
We redesigned the public website alongside the apps.
Before: the billers page of the old eFAWATEERcom site.
After: the new billers page, with an icon tile for each type of biller.
Design
Key Features
My Bills
Saved bills sit in one list by type, with a red tag on any bill that is due and a Due bills tab beside it.
Sign In With a Fingerprint
After the first sign in, people can open the app with Touch ID, and it signs them out by itself after a set time.
Design System
Visual Identity
Bilingual Type
Roboto for English and Helvetica Neue Arabic for Arabic, in light weights with bold amounts.
Color Palette
The green of the eFAWATEERcom leaf for headers and buttons, and a color per bill type, like blue for water.
Error States
Each step has a planned error state, such as a wrong code with the tries left, a timer after too many attempts, or a bank that cannot pay several bills at once.
Impact
A Full Design Handover
Results for eFAWATEERcom
In late 2017 we handed over the final UI and UX files for every flow on iOS, Android and the web app, each screen in Arabic and English.
eFAWATEERcom
Result
By the Numbers
1,270 Screens and States
In the final iOS, Android and web app files.
4 Platforms
iOS, Android, a web app and the public website.
2 Languages
Arabic and English, mirrored screen by screen.
User Flows
Mapping the Payment Rules
Every Case Before the UI
The requirements involved banks, billers, ID checks and payment limits. We drew user flows for each part of the app, with a note on every rule and error, then linked the wireframes into clickable prototypes before the final UI. You can see some of the results below.
Final Showcase
The eFAWATEERcom Product
