Minha Escola Eu Amo, Eu Cuido

A iniciativa "Minha Escola Eu Amo, Eu Cuido" da SEDUC Alagoas visa melhorar o ambiente físico e social das escolas estaduais, envolvendo toda a comunidade escolar. Embora o programa promovesse um conceito positivo, faltava uma maneira sistemática de organizar os esforços, acompanhar o progresso em direção aos objetivos e fornecer supervisão em diferentes níveis administrativos. O desafio era construir um sistema digital que permitisse ao departamento de educação criar tarefas, aos distritos escolares atribuí-las adequadamente e às escolas individuais gerenciar seu progresso, trazendo assim estrutura e transparência a esta importante iniciativa.

Meu Papel

Neste projeto, atuei como Designer UX/UI e Desenvolvedor Frontend em uma equipe pequena. Colaborei de perto com uma parceira de design nos aspectos de UX/UI, com meu foco mais voltado para o Design Visual. Após a fase de design, fui responsável por desenvolver os componentes e páginas do frontend e integrá-los com o sistema de backend.

O Processo & A Solução

Design

Nosso processo de design no Figma envolveu a criação de fluxos de usuário, wireframes e protótipos para definir a experiência do usuário para os três níveis distintos de usuários (escola, gerência, administração). Um desafio fundamental foi pesquisar e projetar a maneira mais eficaz de exibir dados de tarefas hierárquicas (tarefas com subtarefas atribuídas em diferentes níveis), pois não era uma interface de gerenciador de tarefas convencional. Focamos na criação de visualizações claras para acompanhar o progresso e as responsabilidades.

• Visualização de Tarefas Hierárquicas:
  Pesquisamos e projetamos maneiras eficazes de exibir tarefas com subtarefas nos níveis de escola, gerência e administração.
• Acompanhamento de Progresso e Responsabilidades:
  Focamos em criar visualizações claras para acompanhar o progresso e na definição de responsabilidades para diferentes níveis de usuários.
• Fluxos de Usuário e Wireframes:
  Criamos fluxos de usuário e wireframes no Figma para definir a experiência do usuário para cada nível de usuário.
• Prototipagem:
  Desenvolvemos protótipos no Figma para testar e refinar a interface do usuário antes do desenvolvimento.

Desenvolvimento

O frontend foi desenvolvido usando templates Laravel Blade, CSS puro e JavaScript para interatividade. Construí as estruturas de página definidos na fase de design, garantindo uma tradução fiel do design para o código. A implementação de um layout responsivo foi alcançada de forma eficaz, organizando tarefas e informações em estruturas baseadas em cartões que se adaptaram bem a diferentes tamanhos de tela. Também cuidei da integração desses elementos do frontend com o backend Laravel.

Tecnologias Usadas

Responsabilidades

• Desenvolvimento de páginas frontend com base nos designs do Figma.
• Garanti uma tradução precisa do design para o código.
• Implementei um layout responsivo usando CSS.
• Integrei elementos do frontend com o sistema de backend Laravel.

O Resultado

O sistema de acompanhamento "Minha Escola" foi desenvolvido com sucesso, estando atualmente no ar em minhaescola.educacao.al.gov.br. A plataforma é utilizada ativamente por administradores escolares, gerências e funcionários da administração, melhorando significativamente a organização e o acompanhamento da iniciativa "Minha Escola Eu Amo, Eu Cuido" em todo o estado. Ela fornece visibilidade clara sobre a atribuição de tarefas e o progresso, ajudando a garantir que os objetivos do programa sejam alcançados de forma mais eficaz.