NAFEL — Wireframes / مخططات الشاشات

01

User App — Registration & Authentication

تطبيق المستخدم — التسجيل والدخول | Screens: SC-001, SC-002, SC-003

SC-001 | UC-001

شاشة التسجيل — Registration

تسجيل مستخدم جديد بإدخال بياناته الشخصية وطريقة الدفع

9:41

Logo

Gender Male Female

Role Student Instructor

UC-001 | Use Case: User Registration / تسجيل المستخدم

Use Case Name

User Registration / تسجيل مستخدم جديد

Use Case ID

UC-001

Description

يقوم المستخدم الجديد بإنشاء حساب في تطبيق NAFEL وإدخال بياناته الشخصية وطريقة الدفع

Primary Actor

End User (Customer) / المستخدم النهائي

Secondary Actors

—

Pre-Conditions

Open Application Using:
— Mobile Application (iOS / Android)

التطبيق مثبت على الجهاز

Main Flow / التدفق الرئيسي

Elements In Screen

Logo	عرض شعار التطبيق
Full name	حقل الاسم الكامل
Email	حقل البريد الإلكتروني
Password	كلمة المرور (مشفرة)
Confirm Password	تأكيد كلمة المرور
Phone Number	رقم الهاتف
Gender	Male / Female (Radio)
Payment Method	تفاصيل طريقة الدفع
Role	Student / Instructor (Radio)
Speciality	التخصص (اختياري)
Submit	زر تقديم النموذج

Alternative Flow

إذا لم يصل OTP: يمكن طلب إعادة إرسال بعد 60 ثانية

Exception Flow

البريد الإلكتروني مسجل مسبقًا → رسالة خطأ
حقل فارغ → تظهر رسائل التحقق بجانب الحقل

Post-Conditions

تم إنشاء الحساب. رصيد المحفظة = 0 ريال

SC-002 | UC-002

شاشة الدخول — Login

تسجيل دخول المستخدم المسجل مسبقًا

9:41

Logo

NAFEL

محفظة الوقود الذكية

Forgot Password?

— or continue with —

UC-002 | Use Case: User Login / تسجيل الدخول

Use Case Name

User Login / تسجيل الدخول

Use Case ID

UC-002

Primary Actor

Registered User / مستخدم مسجل

Pre-Conditions

Open Application Using:
— Mobile Application

لديه حساب مسجل مسبقًا

Main Flow

Elements In Screen

Logo	عرض الشعار والاسم
Email	حقل البريد الإلكتروني
Password	حقل كلمة المرور
Forgot Password	رابط استعادة كلمة المرور
Login Button	تسجيل الدخول
Create Account	رابط صفحة التسجيل

Exception Flow

بيانات خاطئة → رسالة: "Email or Password is incorrect"
حساب محظور → رسالة: "Account suspended"

Post-Conditions

المستخدم يدخل إلى الصفحة الرئيسية ويُصدر JWT Token

02

User App — Home & Wallet

الصفحة الرئيسية والمحفظة | Screens: SC-003, SC-004

SC-003 | UC-003

الصفحة الرئيسية — Home Dashboard

لوحة التحكم الرئيسية للمستخدم بعد تسجيل الدخول

9:41

NAFEL ⛽

A

Current Balance / رصيدك الحالي

SAR 320.00

Last top-up: 2 days ago

💳

Top Up

📷

Scan QR

📍

Nearest Station

📊

History

Recent Transactions

⛽ Al-Nakheel Station Today, 10:30 AM

- SAR 85

⛽ Al-Fajr Station Yesterday, 6:00 PM

- SAR 120

💰 Wallet Top-Up 3 days ago

+ SAR 500

Home

Wallet

Scan

Map

Profile

UC-003 | Use Case: Home Dashboard / الصفحة الرئيسية

Use Case Name

Student Homepage / الصفحة الرئيسية للمستخدم

Use Case ID

UC-003

Primary Actor

Logged-in User / مستخدم مسجل الدخول

Pre-Conditions

Open Application Using:
— Web Browser
— Mobile Application

Login (تسجيل الدخول)

Main Flow

Elements In Screen

View Profile	To open user profile
Balance Card	To view current wallet balance
Top Up	To add wallet credit
Scan QR	To open QR scanner for payment
Nearest Station	To view nearby partner stations
History	To view transaction history
Recent Transactions	To view last 3 transactions inline

Post-Conditions

المستخدم يمكنه التنقل بين أقسام التطبيق

SC-004 | UC-004

شاشة المحفظة — Wallet & Top-Up

عرض الرصيد وشحن المحفظة

9:41

My Wallet / محفظتي

Wallet Balance

SAR 320.00

Card •••• 4242

Top-Up Amount

Payment Method

💳 Visa/Mastercard

📱 STC Pay

🏦 Bank Transfer

Home

Wallet

Scan

Map

Profile

UC-004 | Use Case: Wallet Top-Up / شحن المحفظة

Use Case Name

Wallet Top-Up / شحن رصيد المحفظة

Use Case ID

UC-004

Primary Actor

End User (Customer)

Pre-Conditions

User is logged in to the NAFEL User App

Main Flow

Elements In Screen

Balance Card	عرض الرصيد الحالي
Quick Amounts	SAR 50 / 100 / 200 / 500
Manual Amount	حقل إدخال مبلغ مخصص
Payment Method	Card / STC Pay / Bank
Confirm Button	تأكيد الشحن والدفع

Exception Flow

فشل الدفع → لا يُضاف أي رصيد. رسالة خطأ مع خيار إعادة المحاولة

Post-Conditions

يُضاف المبلغ فورًا للمحفظة. يُرسل إشعار للمستخدم

03

User App — QR Payment Flow

سير عملية الدفع بالـ QR | Screens: SC-005, SC-006, SC-007

SC-005 | UC-005

ماسح QR — QR Scanner

مسح رمز QR من تطبيق المحطة لبدء الدفع

9:41

Scan QR to Pay

📷

Point camera at the QR code displayed at the gas station

ضع الكاميرا أمام رمز QR في المحطة

💡 Current Balance: SAR 320.00

SC-006 | UC-005

تأكيد الدفع — Payment Confirmation

مراجعة تفاصيل الدفع وتأكيده قبل الخصم

9:41

Confirm Payment

GAS STATION

⛽ Al-Nakheel Station

Partner Station — Verified ✓

AMOUNT DUE

SAR 85.00

Current Balance:SAR 320.00

Balance After:SAR 235.00

SC-007 | UC-005

نجاح الدفع — Payment Success

تأكيد اكتمال عملية الدفع بنجاح

9:41

✓

Payment Successful!

تمت عملية الدفع بنجاح

RECEIPT / إيصال

Station:Al-Nakheel

Amount Paid:SAR 85.00

Date:Today, 10:31 AM

New Balance:SAR 235.00

UC-005 | Use Case: QR Payment at Gas Station / الدفع بالـ QR

Use Case Name

QR Payment at Gas Station / الدفع بمسح رمز QR في محطة الوقود

Use Case ID

UC-005

Primary Actor

End User (Customer)

Secondary Actors

Gas Station Staff / موظف المحطة

Pre-Conditions

— User has sufficient wallet balance
— Station staff logged into Station App
— Station is a verified NAFEL partner

Main Flow

SC-005: QR Scanner

Camera View	عرض الكاميرا لمسح الكود
Guide Frame	إطار توجيهي للمسح
Balance Display	عرض الرصيد الحالي أسفل الشاشة

SC-006: Confirm

Station Name	اسم المحطة والتحقق منها
Amount	المبلغ المستحق
Balance Before/After	الرصيد قبل وبعد الخصم
Confirm / Cancel	تأكيد أو إلغاء

SC-007: Success

Checkmark	أيقونة النجاح
Receipt	إيصال المعاملة
New Balance	الرصيد المتبقي
Done / History	العودة أو عرض السجل

Exception Flow

رصيد غير كافٍ → رسالة خطأ + رابط شحن المحفظة
QR منتهي (>60 ثانية) → رسالة لإعادة المسح

Post-Conditions

خُصم المبلغ من محفظة المستخدم. أُضيف لحساب المحطة. سُجّلت المعاملة في كلا التطبيقين

04

User App — History & Profile

سجل المعاملات والملف الشخصي | Screens: SC-008, SC-009

SC-008 | UC-006

سجل المعاملات — Transaction History

عرض جميع معاملات الدفع والشحن السابقة

9:41

Transaction History Filter

Today

⛽ Al-Nakheel Station10:31 AM • QR Payment

- SAR 85

Yesterday

⛽ Al-Fajr Station06:00 PM • QR Payment

- SAR 120

3 Days Ago

💰 Wallet Top-UpVisa •••• 4242

+ SAR 500

⛽ Shell Station11:00 AM • QR Payment

- SAR 200

⛽ Aramco Station08:30 AM • QR Payment

- SAR 150

Home

Wallet

Scan

Map

Profile

UC-006 | Use Case: View Transaction History / سجل المعاملات

Use Case Name

Transaction History / عرض سجل المعاملات

Use Case ID

UC-006

Primary Actor

End User (Customer)

Pre-Conditions

User is logged in. At least one transaction exists.

Main Flow

Elements In Screen

Filter Chips	All / Payments / Top-Ups / This Month
Transaction Items	Station name, time, amount (+ or -)
Date Grouping	Grouped by: Today / Yesterday / Date
Color coding	Red = payment, Green = top-up

Post-Conditions

المستخدم يرى سجله المالي الكامل

SC-009 | UC-007

الملف الشخصي — User Profile

عرض وتعديل بيانات المستخدم

9:41

Profile / الملف الشخصي Edit

A

Ahmed Al-Rashid

ahmed@email.com

Account Info

📱 Phone+966 5X XXX XXXX

👤 GenderMale

🎓 SpecialityEngineering

Settings

🔔 NotificationsON

🌐 Languageالعربية

🔒 Change Password›

Support

❓ Help Center›

📄 Privacy Policy›

UC-007 | Use Case: User Profile / الملف الشخصي

Use Case Name

View & Edit Profile / عرض وتعديل الملف الشخصي

Use Case ID

UC-007

Primary Actor

End User (Customer)

Pre-Conditions

User is logged in

Main Flow

Elements In Screen

Avatar / Name	صورة شخصية + الاسم
Account Info	Phone, Gender, Speciality
Settings	Notifications, Language, Password
Support	Help Center, Privacy Policy
Logout	تسجيل الخروج من الحساب

Post-Conditions

تُحفظ التعديلات. يُمسح الـ token عند الخروج

05

Station App — Gas Station Side

تطبيق محطة الوقود — جانب الموظف | Screens: SC-010, SC-011, SC-012

SC-010 | UC-008

دخول المحطة — Station Login

تسجيل دخول موظف المحطة للتطبيق الخاص بها

9:41

NAFEL STATION

Logo

Station Staff Login

Powered by NAFEL
For station use only

SC-011 | UC-009

إدخال المبلغ — Amount Entry

الموظف يدخل مبلغ الوقود ثم يضغط OK لتوليد QR

9:41

⛽ Al-Nakheel Station Staff: Ahmed

Enter fuel amount due

SAR

85.00

SC-012 | UC-009

عرض QR — QR Code Display

عرض رمز QR للعميل لمسحه ودفع المبلغ

9:41

⛽ Al-Nakheel Station Scan to Pay

Ask customer to scan this code

اطلب من العميل مسح هذا الرمز

Amount / المبلغ

SAR 85.00

⏱ Expires in: 00:45

UC-008 & UC-009 | Station App: Login & QR Generation

Use Case Name

Station Login + QR Generation / دخول المحطة وتوليد الرمز

Primary Actor

Gas Station Staff / موظف المحطة

Pre-Conditions

Station has a NAFEL partner account. Device is approved.

SC-010: Station Login

Elements

Logo	شعار تطبيق المحطة
Station ID	معرّف المحطة (يُقدّم من NAFEL)
Staff Password	كلمة مرور الموظف
Login Button	دخول إلى لوحة المحطة

SC-011: Amount Entry

Elements

Amount Display	شاشة عرض المبلغ
Numeric Keypad	لوحة أرقام للإدخال
OK Button	لتوليد رمز QR

SC-012: QR Display

Elements

QR Code	رمز ديناميكي مشفر
Amount	المبلغ المستحق
Countdown Timer	مؤقت 60 ثانية قبل الانتهاء
Regenerate	إعادة توليد QR إذا انتهت المهلة
Cancel	إلغاء المعاملة

Exception Flow

انتهاء مهلة QR → يظهر زر "Regenerate" ويُشعر الموظف
فشل الاتصال → رسالة خطأ مع خيار إعادة المحاولة

Post-Conditions

عند المسح الناجح: يظهر شاشة نجاح خضراء. تسجل المعاملة في السجل اليومي.

SC-013 | Station Success Confirmation

✓

Payment Received!

تم استلام الدفع

SAR

85.00

● CONFIRMED

شاشة تأكيد النجاح تظهر للموظف فور اكتمال الدفع من جهة العميل. تعرض المبلغ المستلم وخيار بدء معاملة جديدة.