OSEL Signage CMS
A signage management experience designed to help users create, manage and control digital signage content across displays.
Role: UX/UI Design
Professional UX/UI
School ERP
An education management experience designed to bring multiple school workflows and information into a structured digital platform.
Role
UX/UI Design
Type
Education Management Platform
Project Overview
Project
School ERP
Role
UX/UI Design
Type
Education Management Platform
Status
completed
01 —
The Challenge
Building a unified School ERP system meant translating broad requirements into a coherent experience that could serve multiple school roles and workflows simultaneously — across admissions, student enrollment, academic operations, financial management, and staff administration.
02 —
My Design Approach
My process: understand the requirements, map key workflows (admissions, enrollment, fee management, staff roles), structure the information architecture, design each workflow's UX, and refine through stakeholder feedback.
03 —
Administration Dashboard
Operational Overview
An administration-focused dashboard bringing core school operations into one structured view, from programs and academic terms to fee structures, classrooms, activities and events.
04 —
The School ERP System
ADMISSIONS
Leads · Registrations · Enrollments
↓
PEOPLE
Students · Families · Users · Roles
↓
ACADEMIC
Classes · Teachers · Sessions
↓
OPERATIONS
Tasks · Events · Activity · Communication
↓
FINANCE
Fee Structure · Payments · Collections
↓
ADMINISTRATION
User Management · Permissions · Settings
05 —
From Lead Management to Student Fee Assignment
01
Lead Management
Capture and qualify prospects
02
Family Records
Connect students with family information
03
New Enrollment
Multi-step enrollment process
04
Enrollment Management
Manage active enrollments
05
Enrollment Detail
Track record history and status
06
Fee Structure
Administrative configuration
07
Student Fee Assignment
Apply fees to enrolled students
01
Lead Management
Capture and qualify prospects
02
Family Records
Connect students with family information
03
New Enrollment
Multi-step enrollment process
04
Enrollment Management
Manage active enrollments
05
Enrollment Detail
Track record history and status
06
Fee Structure
Administrative configuration
07
Student Fee Assignment
Apply fees to enrolled students
06 —
Lead Management
High-Volume Lead Tracking
The lead management interface demonstrates how to structure a high-volume prospect experience around searchable records, status tracking, assignment, and next actions. Each lead record contains key information — name, program interest, age, assignment, contact information, and lead date — organized in a scannable list format.
- •Search and filtering for 100+ records
- •Lead status and assignment tracking
- •Contact information at a glance
- •Action controls without drilling into detail
- •Structured column organization
07 —
Family Records & Relationships
Family Information Management
Family records connect students with related household information, giving staff a structured view of students, parents and other family members within the same record. Families are organized to show the student-family relationship and other household members.
- •Students connected to family records
- •Family member roles and relationships
- •Multiple members per household
- •Centralized household information
- •Clear member organization by relationship
08 —
New Enrollment — Multi-Step Wizard
Structured Enrollment Process
New enrollment is handled through a structured workflow with dedicated steps: Student, Family, Program, Fees, Services, Health Record, and Documents. Each step focuses on specific data categories, making complex enrollment manageable by breaking it into clear, progressive stages.
- •Seven-step enrollment workflow
- •Student information as first step
- •Progressive data collection across related areas
- •Clear step indicators and navigation
- •Each stage focused on one data category
09 —
Enrollment Management
Active Enrollment Records
Once enrollment records are created, staff can manage students across academic year, program and enrollment type while reviewing associated services and guardian information. The enrollment list provides a structured view for managing multiple students.
- •Filter by academic year, program, enrollment type
- •Search and organize active enrollments
- •Bulk actions for multiple records
- •Program fee assignment from list view
- •Guardian and services information visible
10 —
Enrollment Detail & History
Student Enrollment Record
The enrollment record brings program history, activities, notes and status changes into a single detailed view, supporting ongoing management after enrollment. Staff can review the complete enrollment journey and make adjustments as needed.
- •Program history and changes
- •Activities and service enrollment
- •Notes and communication record
- •Enrollment timeline and status
- •Detailed student context over time
11 —
Role-Based Design
The system needed to serve different school roles with fundamentally different perspectives. Administrators need system-wide operational visibility and configuration controls. School/center staff need a local view of their students and operations. The design approach was to create distinct experiences optimized for how each role thinks about their work, rather than forcing them into a unified interface.
A clear example is the fee management experience: administrators configure system-wide fee structures defining fees for all programs and centers, while school staff apply those structures to their specific students and track payments. Both work with the same underlying data, but from completely different perspectives.
12 —
Admin Configuration vs. School Application
Fee Structure Management
Fee structures are organized as reusable configurations for different program and admission contexts. Administrators can manage multiple fee structures, each tailored to specific program-admission combinations, providing a centralized place to organize and apply fees across the system.
School-Specific Fee Management
School staff manage student-specific fee assignment at the local level, focusing on how individual students are enrolled in programs and assigned fee structures. The view demonstrates fee breakdown, discount management, and related management actions available to school staff.
13 —
Key Design Decisions
Several design decisions emerged from analyzing the School ERP workflows and requirements:
14 —
Design Principles
Key Responsibilities
- •Separate Role-Based Interfaces — Different roles see different views of the same data (admin sees system configuration; school sees student application), each optimized for their mental model and workflow.
- •Structured Workflows — Complex enrollment and data capture are broken into clear stages or sections, making the process feel manageable rather than overwhelming.
- •Information Grouping — Related information (student + guardian) is grouped by semantic relationship, making dense information feel organized.
- •List-Based Management — High-volume records (leads, students, enrollments) use searchable, filterable lists with status visibility and action controls.
- •Progressive Disclosure — Complex forms show essential fields by default and provide options to show/hide advanced fields based on user needs.
- •Consistent Patterns — Navigation, forms, lists, and filters use consistent patterns across modules, making the system feel cohesive despite handling diverse workflows.
15 —
Outcome
The complete School ERP UX/UI design was approved by the manager and handed over to the development team.
16 —
Reflection
School ERP demonstrates the importance of approaching enterprise UX as systems thinking. The challenge was not optimizing a single screen, but structuring how dozens of interconnected workflows would be experienced by different user roles.
Role-based design works best when each interface is optimized for a specific mental model rather than forcing all users into one view. Information density becomes manageable through semantic grouping and progressive disclosure. Most importantly, successful enterprise design starts by thoroughly understanding workflows and requirements, translating them into clear user experiences, and refining through stakeholder feedback.
Next Case Study
Sakisa Seafoods
I designed the website UX/UI and implemented it on Google Sites, then created supporting marketing materials—a menu card and promotional flyer—all sharing a cohesive visual language.
Related Work
Advocate Consultation Platform
A two-sided consultation platform connecting clients seeking legal advice with available advocates through integrated booking and case management workflows.
Role: UX/UI Design
View Case Study→
Resources
Kit Management
A structured management experience designed to simplify operational workflows and improve visibility across kit-related processes.
Role: UX/UI Design
Have a brand, product or website to build?
Let's discuss your project, role or collaboration opportunity.