Mobile Adaptation in Educational System
Customer Need
The client was an educational company with a custom-built system used to manage and operate school processes, such as student and teacher management, course registrations, payments, and additional administrative tasks. While the system performed well, it was originally developed exclusively for desktop resolutions, posing challenges for users accessing the platform via smartphones. To address this limitation, the company required adapting specific views of the system for mobile resolutions.
System Description
The system is developed as a Single Page Application (SPA) using Angular, designed to interact seamlessly with backend services through a RESTful API. The application is modularly structured into reusable components, facilitating easy maintenance and scalability.
Client Requirements and Solution Design
The client’s primary objective was to adapt select views for mobile usage, focusing on critical functionalities. The identified views included:
- Headquarters and project management
- Student registrations
- Payment management
The project team meticulously gathered these requirements and diagrammed the views and navigation flows to ensure mobile compatibility without disrupting existing workflows. The team strategically hid navigation links to views that were excluded from the mobile adaptation, focusing solely on the client’s prioritized functionalities. Furthermore, common elements such as headers, footers, and general filters were standardized and adapted.
Coding Approach and Design Patterns
The development team ensured responsive adaptability across resolutions ranging from 320px to 1024px. The approach involved establishing universal styling and component standards, incorporating generic grids, layouts, and fundamental elements such as input fields and selection menus, adhering strictly to the DRY (Don’t Repeat Yourself) principle.
The implementation extensively utilized responsive design patterns, specifically:
- Mostly Fluid Pattern
- Column Drop Pattern
- Off-Canvas Pattern (for menus)
Two views presented significant challenges due to their content density and procedural complexity, making standard responsive adaptations insufficient. Consequently, customized mockups were developed, validated by product owners, and new, specially-tailored views were created to maintain usability and functionality on mobile devices.
Result
The project concluded successfully, delivering a fully responsive system that seamlessly presented the specified views and supported intended user flows on mobile devices. Additionally, foundational architectural principles and design patterns were established, facilitating future scalability and simplifying the implementation of further mobile adaptations.
