The Challenge
The Escola 10 program is a vital initiative in Alagoas, Brazil, aimed at boosting educational outcomes and reducing school dropout rates through monitoring, support, and financial incentives. However, accessing crucial program information like benefits, progress reports, and results was inconvenient for students, educators, and the public. Previously, obtaining details required phone calls or time-consuming in-person visits to the department headquarters, creating a significant barrier, especially for those living further from the capital. The challenge was to create a centralized, easily accessible digital platform to bridge this information gap.
My Role
I initially led the design team for this project, responsible for defining the overall user experience and visual direction. After finalizing the design phase, I transitioned into the role of Frontend Developer within the development team, taking ownership of implementing the user-facing side of the application using the approved designs. This dual involvement allowed me to ensure design fidelity and contribute throughout the product lifecycle.
The Process & Solution
Design
The primary design goal was to create an intuitive dashboard tailored to its audience, presenting information clearly and concisely. Recognizing the need to appeal to a younger demographic, the design intentionally deviated from typical government aesthetics towards a more modern and engaging feel.
- Information Architecture:
Structuring the dashboard logically using a card-based layout, grouping related information onto distinct white cards against a calming light blue background for easy scanning. - Visual Design:
Selecting colors carefully to ensure good contrast ratios while maintaining the desired modern and student-friendly aesthetic. - Prototyping:
Creating interactive prototypes in Figma to visualize the user flow and refine the interface before development began.
Development
The front-end was implemented using Laravel Blade templates and Vanilla JavaScript for interactivity, adhering closely to the Figma designs. A key focus was ensuring a fully responsive experience; using pure CSS, I implemented a grid layout system and combined Flexbox and Grid techniques to ensure the application adapted seamlessly across various screen sizes, from desktops to mobile phones. I collaborated with the backend team to integrate the necessary data from the program's existing database via the Laravel framework.
Technologies Used
Responsibilities
- Implementing the user interface based on Figma designs
- Developing interactive elements using Vanilla JavaScript
- Ensuring a fully responsive design across different devices
- Integrating with the backend team and Laravel framework
The Outcome
The "Escola 10 - Alunos" platform was successfully launched and is currently live at escola10.educacao.al.gov.br. It serves as the primary digital touchpoint for the program, providing students, educators, and the public across Alagoas with convenient, self-service access to vital information. The platform effectively replaced the need for many phone calls and in-person visits, achieving its goal of improving accessibility and transparency.
This project demonstrates my ability to work with a design team and handle Frontend development. I'm particularly proud of creating an application that stands out for its ease of use and student-friendly appeal, differentiating it from more traditional government platforms. It showcases my skills in translating user needs and strategic design decisions into a functional, accessible, and visually engaging digital tool within the constraints of a large-scale public sector project.
