The Challenge
The "Minha Escola Eu Amo, Eu Cuido" initiative by SEDUC Alagoas aims to enhance the physical and social environment of state schools by engaging the entire school community. While the program fostered a positive concept, it lacked a systematic way to organize efforts, track progress towards goals, and provide oversight across different administrative levels. The challenge was to build a digital system enabling the education department to create tasks, school districts to assign them appropriately, and individual schools to manage their progress, thus bringing structure and transparency to this important state-wide initiative.
My Role
On this project, I worked as both a UX/UI Designer and Frontend Developer within a small team. I collaborated closely with a design partner on the UX/UI aspects, with my focus leaning more towards the Visual Design. Following the design phase, I was responsible for developing frontend components and pages, and integrating them with the backend system.
The Process & Solution
Design
Our design process in Figma involved creating user flows, wireframes, and prototypes to define the user experience for the three distinct user levels (school, district, department). A key challenge was researching and designing the most effective way to display hierarchical task data (tasks with subtasks assigned across different levels), as it wasn't a conventional task manager interface. We focused on creating clear visualizations for tracking progress and responsibilities.
- Hierarchical Task Visualization:
Researched and designed effective ways to display tasks with subtasks across school, district, and department levels. - Progress and Responsibility Tracking:
Focused on clear visualizations to track progress and define responsibilities for different user levels. - User Flows and Wireframes:
Created user flows and wireframes in Figma to define the user experience for each user level. - Prototyping:
Developed prototypes in Figma to test and refine the user interface before development.
Development
The frontend was developed using Laravel Blade templates, pure CSS, and JavaScript for interactivity. I built out the components and page structures defined in the design phase, ensuring faithful translation from design to code. Implementing a responsive layout was achieved effectively by organizing tasks and information within card-based structures that adapted well to different screen sizes. I also handled the integration of these frontend elements with the Laravel backend.
Technologies Used
Responsibilities
- Developing frontend pages based on Figma designs.
- Ensuring accurate translation from design to code.
- Implementing a responsive layout using CSS.
- Integrating frontend elements with the Laravel backend system.
The Outcome
The "Minha Escola" tracking system was successfully developed and deployed, currently live at minhaescola.educacao.al.gov.br. The platform is actively used by school administrators, district managers, and department officials, significantly improving the organization and trackability of the "Minha Escola Eu Amo, Eu Cuido" initiative across the state. It provides clear visibility into task assignment and progress, helping to ensure the program's goals are met more effectively.
I'm particularly proud of the UI design achieved in this project and my ability to implement that design accurately and effectively using Laravel Blade and CSS. This project showcases my skills in visual design, tackling data visualization challenges, developing responsive interfaces, and collaborating within a team to deliver a functional tool that provides real organizational value to an important educational program.
