Project
BANOON dashboard
Banoon Dashboard - School Managment System
The Challenge
Designing BANOON required solving multiple structural and usability challenges:
Multi-role complexity :
The system needed to support different user types (Admin, School, Supervisors, Parents) with different permissions and access levels.
Hierarchical data structure:
Schools contain students, supervisors, buses, and parents — which required designing a clear relational structure that prevents confusion and data overlap.
Approval workflow:
Schools must register and get approved before accessing the system. The challenge was to design a seamless onboarding and approval experience.
Scalable dashboard architecture:
The system needed to scale for multiple schools across Saudi Arabia while maintaining clarity and performance.
Operational clarity:
Adding, editing, and deleting entities (students, buses, schools, users) had to be simple, intuitive, and error-safe.
The Solution
To address these challenges, I designed a structured and scalable dashboard system with a strong design foundation.
1. Clear Role-Based Architecture
- Designed separate dashboards for Admin and Schools
- Defined permissions visually and structurally
- Reduced cognitive overload by limiting access per role
2. Modular Dashboard System
- Built reusable components using Tailwind CSS
Created consistent patterns for:
Add Student
Add Supervisor
Add Bus
Add User
Delete / Edit entities
Unified table layouts and form structures for consistency
3. Structured Data Flow
Designed relational UI flows that reflect the system hierarchy
Implemented clear breadcrumbs and navigation logic
Used confirmation states for destructive actions (delete school, delete student)
4. Clean Design System
- Built a minimal Tailwind-based design system
Defined typography scale, spacing system, color tokens, and component states
Ensured consistency across dashboard and mobile views
5. Optimized Admin Control
Admin can:
Approve or reject school registrations
Add or remove schools
Manage system-wide users
Monitor activity structure
The system balances clarity with operational power.
Impact
Simplified school onboarding and approval process
Reduced administrative friction through structured UI flows
Improved data clarity with organized dashboard architecture
Created a scalable design system ready for expansion
Delivered a professional SaaS-level dashboard experience aligned with the Saudi market
The final result is a robust school management system that transforms manual school operations into a structured digital ecosystem.
Hierarchical data structure:
Schools contain students, supervisors, buses, and parents — which required designing a clear relational structure that prevents confusion and data overlap.
Approval workflow:
Schools must register and get approved before accessing the system. The challenge was to design a seamless onboarding and approval experience.
Scalable dashboard architecture:
The system needed to scale for multiple schools across Saudi Arabia while maintaining clarity and performance.
Operational clarity:
Adding, editing, and deleting entities (students, buses, schools, users) had to be simple, intuitive, and error-safe.
