Edupay

Using Edupay: school payments become smooth and transparent, visible to the public!

Comment

Inspiration

School education management requires two essential elements: human resources and educational facilities such as classrooms, teacher rooms, sports fields, libraries, laboratories, and prayer rooms. These elements determine the education process that leads to meaningful educational outcomes.

To build proper educational elements within a school, clear and structured financing is needed. Structured school financing means that no educational cost goes unpaid, and clarity means that each cost must be shown and explained in terms of its urgency and benefit to the community that entrusts their children to the school.

Based on the description above, schools as education providers need a system that manages educational financing. This led to the creation of “Edupay”, a web-based system for transparent and structured school financing so that no cost goes unrecorded and all information can be openly viewed by the public. Edupay is expected to increase public trust toward schools in delivering education.

Definition

School education management requires two essential elements: human resources and educational facilities such as classrooms, teacher rooms, sports fields, libraries, laboratories, and prayer rooms. These elements determine the education process that leads to meaningful educational outcomes.

To build proper educational elements within a school, clear and structured financing is needed. Structured school financing means that no educational cost goes unpaid, and clarity means that each cost must be shown and explained in terms of its urgency and benefit to the community that entrusts their children to the school.

Based on the description above, schools as education providers need a system that manages educational financing. This led to the creation of “Edupay”, a web-based system for transparent and structured school financing so that no cost goes unrecorded and all information can be openly viewed by the public. Edupay is expected to increase public trust toward schools in delivering education.

The Built it

  1. UX Flow in Navigation Structure:

Home / Dashboard → Finance Module → Payment Module → Report Module → Profile & Settings

Simple interaction flow: Login → Dashboard → (Choose Module) Quick Actions (Add Transaction / View Report / Print Data) Confirmation → Save → Success Notification

  1. UI Design (User Interface) 🏠 A. Main Dashboard

Purpose: Provide a quick overview of school finances. Elements:

Header: EduPay logo + institution name

Sidebar menu: Dashboard, Finance, Payments, Reports, Settings

Info Cards:

💰 Total Incoming Funds

💸 Total Expenditures

📊 Final Balance

Chart: Monthly cash flow

Quick Action Buttons: “Add Transaction”, “Print Report”, “Send Notification”

UX Principles:

Important information visible within the first 5 seconds

Green for positive balance, red for deficit

💵 B. Finance Module (Transactions)

Function: Record all incoming and outgoing transactions. UI:

Dynamic table (sortable and filterable)

“+ Add New Transaction” button

Simple popup form:

Type (income/expense)

Source of funds

Amount

Description

Upload proof (optional)

“Save” button → success notification

UX Principles:

Maximum 5 fields per step (avoid input overload)

Action buttons clearly visible at bottom-right

🧾 C. Payment Module (Student Fees / Billing)

Function: Manage student or unit payments. UI:

Student table + payment status Green = paid, Yellow = pending, Red = overdue

Action buttons: “Pay”, “View History”

Receipt printing / Excel export

Automatic notifications (WhatsApp/email to parents)

UX Principles:

Maximum 2 clicks from dashboard to main function

Clean table layout with icons and color indicators

📈 D. Report Module

Function: Display financial summaries. UI:

Filters: date range, fund type, transaction category

Output:

Bar chart (income vs expense)

Recap table

Buttons: “Print PDF” & “Export Excel”

UX Principles:

Summaries that can expand for more details

Print button always accessible (fixed position)

⚙️ E. Settings & Profile

Function: Adjust institution data, users, and access rights. UI:

Tabs: Institution Profile | Users | Data Backup | Theme

Options to change logo, theme colors, export data

Light/Dark Mode toggle

  1. Colors and Typography

Primary color: Soft blue (#2B6CB0) → professional & educational

Secondary color: Green (#38A169) → healthy finance

Accent: Yellow (#ECC94B) → alerts/attention

Fonts: Poppins / Inter — screen-friendly and easy to read

  1. Responsive & Accessibility

Mobile-first design with bottom navigation

Large icons and text labels

High contrast for visibility on projectors/school environments

  1. Additional UX Elements

Real-time notifications (“Transaction saved successfully”)

Tooltip guides on hover for new users

Quick search feature (Ctrl + K shortcut)

Calendar widget for report filtering

Built With

Share this project:

Updates