Ágata

entre design e código.

UX/UI Designer · Desenvolvedora Web · Front-end

manifesto.txt

Transformo problemas em experiências digitais intuitivas, unindo pesquisa, design e tecnologia.

Disponível para estágio e freelas

Projetos

Estudos de caso selecionados
2026
Capa do Aprende+: logo da plataforma, coruja mascote estudando no notebook, card de progresso de 75%, chat com o Tutor IA e trilhas sobre uso de água, saúde mental e alimentação escolar Mockup do Aprende+ com cinco telas: quiz sobre proteína vegetal, aula de alimentação escolar, tela inicial com temas recomendados, explorar temas e perfil com progresso de 76% Mockup do Aprende+ com três telas do quiz de lanche escolar saudável: resposta correta, resposta incorreta e resumo da atividade com 4 de 5 acertos

Aprende+: educação que conecta e transforma

Uma plataforma educacional que une inteligência artificial, interatividade e design acessível para transformar a forma como estudantes da rede pública aprendem. Com conteúdos conectados ao cotidiano e um tutor inteligente, o Aprende+ torna o aprendizado mais intuitivo, envolvente e personalizado.

IAAcessibilidadeEdtech
Ver estudo de caso
GovTech
Capa do Regulariza Brasil com três celulares: notificação, detalhes da pendência e pagamento com Pix Capa do Regulariza Brasil com situação do veículo e pagamento com Pix
App mobile · Serviços públicos

Regulariza BR: menos burocracia, mais clareza

Proposta de app para motoristas entenderem pendências, débitos e prazos e regularizarem o veículo em uma jornada simples.

GovTechMobile-firstServiços públicos
Ver estudo de caso
Full Stack
Capa do CINOVA com logo e três celulares: login, tutorial e perfil Quatro celulares do CINOVA: tutorial, perfil, prestadores e comunidades
App mobile · Full Stack

CINOVA: gestão predial conectada

App em React Native integrado a uma API Node.js com Prisma e PostgreSQL, para organizar ordens de serviço entre moradores, técnicos e síndicos.

React NativeNode.jsPostgreSQL
Ver estudo de caso
Web · Impacto social
Capa do CIntegre+: logo em destaque e duas janelas de navegador com o painel da ONG e os detalhes de uma ação, em fundo azul-claro Capa do CIntegre+: logo branca em fundo azul, monitor com o painel da ONG e janela com o formulário de criação de ação
Plataforma web · Full Stack

CIntegre+

Plataforma gamificada que conecta escolas públicas e ONGs do Recife para incentivar a participação em atividades educativas e sociais. Projeto com interfaces em Figma e implementação web.

UX/UIDesenvolvimento WebGamificaçãoImpacto Social
Ver estudo de caso
Mobile · Saúde pública
Capa do MoniTube: logo, chamada Acompanhamento inteligente do tratamento e três celulares com as telas Confirme sua dose, Início e Teleconsulta, em fundo claro com detalhes em verde-azulado e vermelho Capa do MoniTube: logo e três celulares com as telas Início, Seu tratamento e Benefícios, em fundo verde-azulado escuro Comparação entre o wireframe em cinza e a tela final Confirme sua dose do MoniTube, com uma seta vermelha entre os dois celulares
Em andamento App mobile · UX/UI Design

MoniTube: cuidar é continuar

Aplicativo para acompanhar o tratamento da tuberculose, com lembretes, registro das doses e um sistema de pontos que pode virar benefício social. Do wireframe ao protótipo de alta fidelidade no Figma.

UX/UISaúde públicaGamificaçãoDesign System
Ver estudo de caso
Web · Logística
Capa do SEALog: logo, a chamada Plataforma de gestão logística, notebook com o painel Pedidos de hoje, tablet com o portal da transportadora e caixas com a foca, sobre um mapa com rota em azul Capa do SEALog: logo, a chamada Gestão logística para operação terceirizada, notebook com o painel de pedidos e dois cartões flutuantes com o detalhe da entrega e o portal da transportadora Capa do SEALog: logo da foca, notebook com o painel de pedidos do dia e celular com a página de acompanhamento da entrega, em fundo azul-marinho Capa do SEALog: logo em azul-marinho, notebook com o portal da transportadora e celular com a conversa de WhatsApp, em fundo claro Comparação entre o wireframe em cinza do painel, da proposta com motoristas próprios, e a tela final do painel, da proposta com transportadoras, ligados por uma seta azul
Projeto acadêmico · protótipo UX/UI Design · Engenharia de Software · Logística

SEALog: cada entrega mais visível

Plataforma de gestão logística que centraliza pedidos, automatiza a distribuição entre transportadoras e facilita o acompanhamento das entregas. Solução projetada e prototipada no desafio da SEAL, do CIn-UFPE.

UX/UIEngenharia de SoftwareLogísticaDesign System
Ver estudo de caso

Extensão e voluntariado

Atuação além do desenvolvimento e do UX/UI

Processo

Como eu trabalho · bastidores reais

Cada projeto passa por quatro fases. Antes das telas finais, vem o papel, o quadro e muita pergunta. Aqui estão os bastidores reais: o quadro da fase 01 é do projeto Regulariza Brasil; os esboços das fases 02 a 04 são do Aprende+.

01 · Descobrir

Entender antes de desenhar

Investigo o contexto, observo dificuldades e procuro entender as necessidades reais antes de pensar na solução.

  • Problema
  • Público
  • Necessidades do usuário
  • Primeiro fluxo
Registro do projeto Regulariza Brasil · regularização de veículos
problema → público → necessidades → solução
02 · Definir

Dar forma ao que importa

Organizo informações, estruturo fluxos e transformo necessidades em uma base clara para o projeto.

  • Autenticação: login, cadastro e senha
  • Onboarding em três perguntas
03 · Idear

Começar no papel

Exploro possibilidades com wireframes, fluxos e esboços antes de avançar para decisões visuais mais refinadas.

  • Videoaula → conclusão → quiz → resumo
  • Setas desenhando o fluxo entre telas
04 · Entregar

Do rascunho ao protótipo

Transformo os esboços em interfaces refinadas, protótipos navegáveis e materiais organizados para desenvolvimento.

Clique nas imagens para ampliar

Sobre

Tecnologia, criatividade e pessoas
Foto de Ágata Giovanna, de cabelos cacheados longos e crachá do CIn no pescoço, em frente a uma porta de vidro
UX/UI CIn · UFPE Dev Front-end Design Gráfico

Meu interesse por UX/UI e desenvolvimento começou antes de eu saber o que essas letras queriam dizer. Quando eu era criança, pensava por que o caixa eletrônico precisava de tantos botões para algo tão simples. Hoje sigo fazendo esse tipo de pergunta, mas agora crio experiências em que ninguém precise se perguntar onde clicar.

Oii, meu nome é Ágata Giovanna! Tenho 20 anos, estou no 5º período de Sistemas de Informação no CIn da UFPE e passei pelo IFPE, onde o design entrou de vez na minha vida.

Eu desenho a experiência e gosto de colocar a mão no código para ela sair do papel, sempre buscando produtos acessíveis e que façam sentido para quem usa.

Design UX/UI

FigmaComponentesAuto LayoutGridsProtótiposFluxos de navegaçãoArquitetura de informaçãoHierarquia visualDesign SystemsGOV.BR

Design gráfico

IllustratorPhotoshopCanvaLogotiposÍconesRedes sociaisEdição de imagens

Desenvolvimento

PythonC++TypeScriptNext.jsReactTailwind CSSNode.jsExpressPostgreSQLPrismaPOOAPIs REST

Ferramentas

GitGitHubDockerClaude Code
Contato

Vamos criar
juntos?

agatagio68@gmail.com

Aprende+

Aprendizagem interativa, acessível e conectada ao cotidiano.

  • UX/UI Design
  • EdTech
  • Inteligência Artificial
  • Mobile-first
Banner do Aprende+: logo da plataforma, coruja mascote do Tutor IA estudando no notebook, card de progresso de 75%, chat com o Tutor IA e trilhas sobre uso de água, saúde mental e alimentação escolar
01 / Sobre o projeto

Aprender pode ser mais simples.

O Aprende+ é uma plataforma educacional digital voltada a estudantes do ensino fundamental II e médio da rede pública. A proposta transforma temas do cotidiano, como alimentação escolar, uso de água e sustentabilidade, em experiências de aprendizagem curtas, visuais e interativas.

Com uma abordagem mobile-first, a plataforma combina conteúdos educativos, atividades de verificação, acompanhamento de progresso e o apoio complementar de um Tutor IA, aproximando o conhecimento da realidade dos estudantes.

Público
Estudantes da rede pública
Abordagem
Mobile-first
Foco
Aprendizagem interativa
02 / O desafio

Tornar o aprendizado mais próximo da realidade.

Como transformar informações educacionais em experiências acessíveis, envolventes e fáceis de compreender? O desafio do Aprende+ foi aproximar os conteúdos escolares de situações reais, facilitar a interpretação de informações visuais e manter o estudante engajado sem gerar sobrecarga durante a aprendizagem.

  1. 01

    Conexão com o cotidiano

    Relacionar conteúdos escolares a situações reais, tornando o aprendizado mais significativo.

  2. 02

    Clareza visual

    Facilitar a compreensão de gráficos, comparações e informações visuais sem perder a profundidade do conteúdo.

  3. 03

    Engajamento

    Manter o interesse dos estudantes com atividades curtas, progresso visível e uma experiência sem sobrecarga.

03 / Público-alvo

Uma experiência pensada para diferentes estudantes.

O Aprende+ foi desenvolvido pensando em estudantes do ensino fundamental II e médio da rede pública, considerando diferentes realidades socioculturais, níveis de familiaridade com a tecnologia e o acesso predominante por smartphones.

Para atender a esse público, a experiência prioriza linguagem simples, navegação previsível, conteúdos organizados em etapas curtas e interfaces intuitivas, que não exigem experiência prévia com plataformas educacionais complexas.

  • Ensino fundamental II e médio
  • Diferentes níveis de familiaridade digital
  • Acesso prioritário por smartphones
Tela Explorar do Aprende+, com busca por tema e cards de Uso de água, Descarte de resíduos, Mobilidade urbana e Qualidade do ar
Tela Home do Aprende+: saudação Olá, Seu nome, busca, card Continue aprendendo Alimentação escolar com 40% de progresso e botão Continuar, temas recomendados e navegação inferior com Início, Explorar, Tutor IA e Perfil
04 / Jornada do usuário

Uma jornada construída para evoluir.

A experiência do Aprende+ foi estruturada para acompanhar o estudante desde o primeiro acesso até a consolidação do aprendizado. Cada etapa foi planejada para oferecer clareza, personalização e continuidade.

Splash · Login · Criar conta · Recuperar senha · clique para ampliar
Interesses · Nível · Objetivo · clique para ampliar
Home · Explorar · Videoaula · clique para ampliar
Quiz · Feedback · Resumo · clique para ampliar
06 / A solução em telas

Da descoberta ao conhecimento.

Telas Home, Explorar e Perfil do Aprende+, com temas recomendados, busca por tema e progresso geral
Explorar e descobrir

Home, Explorar e Perfil

Recomendações de temas logo na tela inicial, navegação inferior sempre visível e um perfil que mostra o progresso do estudante.

Telas de aula do Aprende+, com videoaula de alimentação escolar, texto da aula e botão Concluir aula
Aprender no próprio ritmo

Módulos, conteúdos e videoaulas

Cada tema é dividido em etapas curtas: uma videoaula, um texto objetivo e o conteúdo da aula organizado em blocos.

Três telas do quiz do Aprende+: resposta correta com explicação, resposta incorreta com explicação e resumo da atividade com 4 de 5 acertos
Praticar e evoluir

Quiz, feedback e resumo

Feedback imediato em cada resposta, com a explicação do porquê, e um resumo no fim do tema com o que o estudante aprendeu.

07 / Tutor IA e acessibilidade

Tecnologia como apoio à aprendizagem.

Coruja do Tutor IA
Destaque

Tutor IA

O Tutor IA foi concebido como um recurso complementar à aprendizagem, oferecendo suporte para esclarecer dúvidas, reformular explicações e propor questões reflexivas. A inteligência artificial atua como mediadora do conhecimento, sem substituir os conteúdos e atividades da plataforma.

  • Esclarecer dúvidassobre os conteúdos.
  • Simplificar explicaçõesconforme a necessidade do estudante.
  • Propor reflexõesque aprofundem o aprendizado.
Tela de conversa com o Tutor IA: a IA oferece ajuda, atalhos Quero um desafio, Explicar de forma simples e Me dê um exemplo, o estudante pede uma explicação simples sobre alimentos ultraprocessados e a IA responde
Tutor IA · Conversa
Acessibilidade

Experiência para diferentes estudantes

A acessibilidade foi considerada desde a estrutura da interface, priorizando legibilidade, linguagem simples, navegação previsível e feedbacks que não dependem exclusivamente de cores.

Exemplo da Home: título Olá, Seu nome! em Poppins e texto de apoio em tamanho menor

01Legibilidade

Tipografia Poppins e hierarquia clara.

Barra de navegação inferior com Início ativo, Explorar, Tutor IA e Perfil, cada um com ícone e texto

02Navegação previsível

Componentes e ações consistentes.

Feedback de respostas: incorreta com ícone de X e borda vermelha, correta com ícone de check e borda verde-azulada

03Feedback acessível

Combinação de ícones, textos e cores para indicar acertos, erros e estados do sistema.

Instrução simples do onboarding: Quais temas você quer aprender? Selecione os conteúdos que você quer explorar na escola e no dia a dia

04Linguagem objetiva

Instruções simples e conteúdos organizados em etapas curtas.

08 / Considerações finais

Aprender também é evoluir.

O Aprende+ reúne design de interface, organização pedagógica e apoio de Inteligência Artificial em uma proposta centrada no estudante. O projeto demonstra como decisões de UX/UI podem contribuir para tornar a aprendizagem mais clara, contínua, acessível e conectada ao cotidiano.

Regulariza BR

Menos burocracia, mais clareza na regularização veicular.

  • UX/UI Design
  • GovTech
  • Mobile-first
  • Serviços Públicos
Banner do Regulariza Brasil: logo, chamada Sua vida em dia com o governo e seis celulares com a jornada de notificação, pendência, detalhes dos débitos, Pix, pagamento confirmado e acompanhamento
01 / Sobre o projeto

Simplificar também é transformar.

O Regulariza BR é uma proposta de aplicativo mobile voltada à regularização de pendências veiculares. A solução foi desenvolvida para facilitar a compreensão de débitos, orientar motoristas sobre as etapas necessárias e oferecer uma jornada mais clara, centralizada e acessível.

O projeto explora como o UX/UI Design pode simplificar processos públicos complexos, transformando informações burocráticas em uma experiência digital organizada, intuitiva e orientada às necessidades do cidadão.

Público
Motoristas com pendências veiculares
Abordagem
Mobile-first
Foco
Clareza, orientação e regularização

Projeto conceitual de UX/UI. Não é um serviço oficial do governo; usa o Padrão Digital GOV.BR apenas como referência.

02 / O desafio

Quando a burocracia vira uma barreira.

Receber uma notificação de irregularidade veicular pode gerar dúvidas sobre o motivo da pendência, os valores envolvidos, os prazos e os procedimentos necessários para resolver a situação. O desafio foi organizar essas informações em uma jornada simples e compreensível, reduzindo a dificuldade de encontrar respostas e entender o próximo passo.

  1. 01

    Clareza das informações

    Explicar pendências, débitos e procedimentos com linguagem objetiva e acessível.

  2. 02

    Orientação durante o processo

    Permitir que o motorista compreenda o que precisa fazer, quais opções estão disponíveis e como acompanhar a regularização.

  3. 03

    Redução da complexidade

    Organizar etapas e informações burocráticas em um fluxo digital intuitivo, evitando dúvidas e sobrecarga.

03 / Público-alvo

Uma experiência centrada no cidadão.

O projeto foi pensado para motoristas que recebem notificações relacionadas a irregularidades veiculares e precisam compreender sua situação e os caminhos disponíveis para regularização.

O aplicativo prioriza a apresentação de informações essenciais, uma navegação previsível e orientações claras para que diferentes perfis de usuários consigam compreender o processo.

  • Motoristas notificados sobre pendências
  • Necessidade de informações objetivas
  • Acesso simplificado aos procedimentos
Tela inicial com aviso Você tem uma pendência veicular identificada e o veículo ABC1D23
Tela Situação do veículo: alerta de pendência identificada, cartão do veículo e resumo das pendências
04 / Jornada do usuário

Da notificação à regularização.

A jornada acompanha o motorista desde o alerta recebido até o acompanhamento da regularização, com caminhos alternativos documentados no protótipo.

Notificação · Acesso · Início · clique para ampliar
Situação · Débitos · Dados cadastrais · clique para ampliar
Forma de pagamento · Pix · Confirmação · clique para ampliar
Acompanhamento · Notificações · Sem pendências · clique para ampliar
Casos de exceção

Quando algo sai do caminho principal

Estados documentados no protótipo para orientar o motorista em situações de fronteira.

Bastidores do processo

Do quadro branco ao fluxo.

Antes das telas, o problema foi organizado no quadro: problema, público, necessidades do usuário, solução, telas e casos de erro. Depois virou o fluxo completo no Figma, com decisões e casos de fronteira.

"o que aconteceu?" "quanto eu devo?" "como pago?"
No quadro"1. Situação do veículo — detalhe da pendência, qual a pendência, forma de pagamento"
07 / Interfaces finais

Uma experiência clara em cada etapa.

01

Consulta e identificação

Abertura, acesso com gov.br e consulta de outro veículo, para identificar a pendência sem novo cadastro.

02

Débitos e regularização

Situação do veículo, detalhes de cada débito e atualização cadastral quando os dados estão desatualizados.

03

Pagamento e acompanhamento

Escolha entre Pix, cartão e boleto, pagamento com Pix e acompanhamento das etapas da regularização.

04

Conclusão e confirmação

Confirmação de pagamento, dados atualizados e contestação enviada. O acesso ao documento (CRLV) aparece no quadro de planejamento, mas ainda não tem tela no protótipo.

08 / Acessibilidade e experiência

Informação pública precisa ser compreensível.

Em uma experiência que envolve informações e procedimentos de regularização veicular, clareza e previsibilidade são fundamentais. O projeto prioriza linguagem objetiva, organização visual e orientações que ajudem o usuário a compreender sua situação e as ações disponíveis.

Mensagem de pagamento não aprovado explicando o motivo e o que fazer

01Linguagem clara

Orientações diretas sobre o que aconteceu e o que fazer em seguida.

Débitos listados e total a pagar em destaque

02Hierarquia

Informações importantes, como débitos e total, em destaque.

Navegação inferior com ícone e texto

03Navegação consistente

Mesma estrutura de cabeçalho, retorno e navegação em todas as telas.

Alertas de aviso, informação e erro com ícone e texto

04Feedback de estados

Avisos, erros e sucesso com ícone, fundo e texto, não só cor.

Área de toque mínima de 44 × 44px e contraste mínimo de texto de 4,5:1 foram definidos como diretrizes no Design System. Não foram realizados testes formais de acessibilidade.

09 / Considerações finais

Tornar simples o que parece complicado.

O Regulariza BR explora como o design pode tornar processos burocráticos mais compreensíveis e acessíveis. Ao organizar informações, orientar decisões e estruturar uma jornada centrada no usuário, o projeto demonstra o papel do UX/UI na aproximação entre tecnologia e serviços públicos.

CINOVA

Gestão de manutenção predial mais simples, segura e conectada.

  • Full Stack
  • Mobile Development
  • React Native
  • Node.js
  • TypeScript
Banner do CINOVA: logo, chamada Gestão condominial prática e centralizada e seis celulares com tutorial, login, início, reservas, prestadores e comunicações
01 / Sobre o projeto

Tecnologia para uma gestão mais eficiente.

React NativeTypeScriptNode.jsExpressPrismaPostgreSQL

O CINOVA é uma plataforma digital desenvolvida para substituir métodos manuais e informais de gestão de manutenção predial. A solução centraliza o gerenciamento de ordens de serviço, facilitando a organização das solicitações e a comunicação entre moradores, técnicos e síndicos.

Com uma aplicação mobile integrada a uma API e banco de dados, o projeto busca oferecer maior transparência, controle e rastreabilidade das atividades de manutenção, permitindo que diferentes usuários acompanhem informações e processos diretamente pelo smartphone.

Área
Gestão de manutenção predial
Plataforma
Aplicativo mobile
Desenvolvimento
Front-end e back-end
Contexto
Projeto acadêmico em equipe

No código, o projeto aparece com o nome de trabalho SGMP; CINOVA é a identidade visual do app.

02 / O problema

Quando a manutenção depende de processos informais.

A gestão de manutenção predial pode envolver solicitações dispersas, comunicação fragmentada e dificuldade para acompanhar o andamento dos serviços. Sem uma estrutura centralizada, torna-se mais difícil organizar informações, consultar históricos e manter a transparência entre os envolvidos.

  1. 01

    Informações descentralizadas

    Organizar solicitações e registros de manutenção em um único ambiente digital.

  2. 02

    Comunicação entre diferentes usuários

    Facilitar a troca de informações entre moradores, técnicos e administradores.

  3. 03

    Controle e rastreabilidade

    Permitir que as ordens de serviço sejam registradas, consultadas e acompanhadas de maneira estruturada.

03 / Usuários e necessidades

Diferentes usuários, uma gestão conectada.

CINOVAAPI + banco de dados
MORADOR

Moradores

Precisam de um canal organizado para registrar e acompanhar solicitações relacionadas à manutenção predial.

FUNCIONARIO

Técnicos

Necessitam de informações claras sobre as ordens de serviço e as atividades de manutenção.

SINDICO

Síndicos e administradores

Precisam de maior visibilidade sobre solicitações, registros e andamento das demandas.

Os três perfis existem no código como o enum Papel (MORADOR, FUNCIONARIO, SINDICO). Após o login, a API retorna o papel do usuário e o app abre a área correspondente.

04 / Jornada no aplicativo

Da entrada à gestão do dia a dia.

Quatro momentos do protótipo de interface do CINOVA, do primeiro acesso às áreas de serviços, reservas e financeiro.

Tutorial · Login · Erro · clique para ampliar
Início · Comunicados · Detalhe · clique para ampliar
Prestadores · Cadastro · Reserva · clique para ampliar
Cobranças · Detalhe · Pagamento · clique para ampliar

As telas acima são do protótipo de interface (Figma). No código, o app mobile implementa áreas por papel: criação de ordem de serviço pelo morador, aprovação e acompanhamento pelo síndico e execução pelo técnico.

05 / Arquitetura do sistema

O que acontece por trás da interface.

Front-end mobile

Interfaces e navegação

Responsável pelas interfaces, navegação e interação dos usuários com as funcionalidades de manutenção predial.

  • src/screens telas por papel: morador, síndico e técnico
  • src/services chamadas à API com Axios
  • src/contexto contexto de autenticação
  • src/hooks hooks como useCriacaoOS
  • Testes com Jest em __tests__
Back-end

API REST em camadas

Responsável pela disponibilização das funcionalidades da API e pelo processamento das requisições do aplicativo.

  • routes definem os endpoints
  • controllers tratam requisição e resposta
  • repositories concentram o acesso aos dados
  • 6 grupos de rotas: auth, usuários, moradores, funcionários, síndicos e ordens de serviço
Prisma ORM

Modelo e migrações

Utilizado na interação da aplicação com os dados persistidos no banco.

  • Esquema em prisma/schema.prisma
  • Migrações versionadas em prisma/migrations
  • Dados iniciais com prisma/seed.ts
PostgreSQL

Dados relacionais

Banco de dados relacional utilizado para armazenar as informações do sistema.

  • Imagem postgres:16 via docker-compose
  • 5 tabelas: Usuario, Morador, Funcionario, Sindico e OrdemServico
  • Rota GET /db-test verifica a conexão
07 / Interfaces do aplicativo

Uma experiência mobile para o dia a dia.

Seal BrownRaw UmberScarletCarrot OrangeDutch WhiteLexend Deca · DM Sans
01

Comunicação

Comunicados da gestão aparecem na tela inicial e têm uma área própria, com detalhe de cada aviso.

02

Serviços

Prestadores com cadastro, edição e exclusão, incluindo período e horário de acesso ao condomínio.

03

Reservas

Reserva de áreas comuns com calendário, horário e número de pessoas, e confirmação antes de excluir.

04

Financeiro e perfil

Cobranças por situação (pendente, paga, em atraso), pagamento por QR Code e edição do perfil.

08 / Requisitos e decisões técnicas

Projetado para ser confiável e escalável.

Requisitos não funcionais definidos no planejamento do projeto. São metas, não medições de desempenho.

Meta5.000usuários simultâneos
Meta< 2 stempo de resposta
Meta≥ 99,5%disponibilidade mensal
Segurança e rastreabilidadeOrganização das ordens de serviçoManutenibilidade em camadasEscalabilidade para futuras integrações

Esses requisitos orientaram as decisões do projeto, mas não houve testes de carga, segurança ou disponibilidade que os comprovem.

09 / Processo de desenvolvimento

Da organização ao código.

  1. 01 · IniciaçãoLevantamento de requisitos
  2. 02 · PlanejamentoDefinição de arquitetura e backlog
  3. 03 · ExecuçãoDesenvolvimento das sprints
  4. 04 · EncerramentoTestes finais e documentação

Datas são marcos do cronograma planejado.

Gestão de riscos

Entre os riscos identificados estava o atraso na entrega, com previsão de acompanhamento contínuo do backlog e reuniões semanais como medida de mitigação.

10 / Resultados e aprendizados

Muito além de um aplicativo.

O CINOVA reúne desenvolvimento mobile, construção de API e persistência de dados em uma proposta integrada de gestão predial. O projeto representa uma experiência prática de desenvolvimento colaborativo, organização técnica e construção de soluções voltadas a necessidades reais.

Seu desenvolvimento envolve decisões relacionadas à estruturação de funcionalidades, comunicação entre camadas e organização de informações, demonstrando como diferentes tecnologias podem trabalhar juntas para formar uma aplicação completa.

Critérios de sucesso planejados · não medidos
  • Entrega dentro do prazo e orçamento
  • Satisfação nos testes acima de 90%
  • Redução de 50% no tempo de registro de ordens de serviço

Relatórios mensais em PDF: funcionalidade em análise, não implementada.

11 / Equipe e contribuição

Desenvolvimento em equipe.

AGÁgata GiovannaUX/UI Designer e Desenvolvedora
BRBruno Ramos
LCLucas Cabral
FVFlávia Vitória
GCGryghor Camonni
DRDiogo Rodrigues

Projeto acadêmico desenvolvido em equipe. Ágata atuou no design de interface do CINOVA e como desenvolvedora integrante do time.

12 / Encerramento

Explore o projeto por dentro.

O código do aplicativo e da API está aberto nos repositórios da equipe.

Capa do CIntegre+: logo à esquerda e três janelas de navegador em perspectiva sobre fundo azul, com o painel da ONG, os detalhes de uma ação e o formulário de criação de ação

CIntegre+

Design e desenvolvimento para aproximar escolas e iniciativas sociais.

  • UX/UI
  • Desenvolvimento Web
  • Gamificação
  • Impacto Social

Desenvolvido na disciplina de Desenvolvimento de Software da UFPE, em conjunto com a Prefeitura do Recife, o CIntegre+ propõe uma forma mais lúdica de conectar escolas públicas às atividades de ONGs. O projeto combina interfaces web, recursos de gamificação e uma implementação com front-end, back-end e banco de dados.

Contexto
Desenvolvimento de Software · UFPE
Parceria
Prefeitura do Recife
Plataforma
Web, pensada para desktop
Camadas
Front-end, back-end e banco de dados
01 / Problema e proposta

Fazer a ajuda chegar até a escola.

ONGs propõem atividades, mas nem sempre é simples para uma escola da rede pública descobrir essas oportunidades, entender o que cada uma pede e se organizar para participar. O CIntegre+ reúne essas ações em um só lugar e usa elementos de jogo para tornar a participação mais leve.

  • Facilitar a descoberta de atividadesPedidos das ONGs listados em cards, com tema, data e resumo.
  • Organizar informações sobre ações e participaçãoCada ação tem descrição, cronograma, local, vagas e dados da ONG.
  • Apoiar a comunicação entre escolas e ONGsContatos da ONG visíveis e uma etapa de validação da participação.
  • Incentivar o engajamento com gamificaçãoPontos para as escolas e um ranking das que mais contribuem.

Estes são os objetivos da solução. O projeto não mediu efeitos sobre a participação das escolas.

Página inicial: a escolha entre Sou Escola e Sou ONG já separa os dois públicos.

02 / Dois públicos e seus fluxos

Um caminho para cada lado da parceria.

Os fluxos seguem a navegação do protótipo. As etiquetas mostram o que está no Figma e o que foi confirmado no código do repositório.

  1. 01

    Explorar pedidos

    Em Pedidos Disponíveis, a escola vê as ações abertas das ONGs em cards.

    ProtótipoCódigo
  2. 02

    Consultar detalhes

    A página da ação reúne descrição, cronograma, local, vagas e contatos da ONG.

    ProtótipoCódigo
  3. 03
    Botões Participar da Atividade e Compartilhar Atividade

    Participar

    Participar da Atividade registra a escola na ação pela API.

    ProtótipoCódigo
  4. 04

    Acompanhar pontos e ranking

    A pontuação aparece no cabeçalho e no ranking. A aba Meus Pedidos existe apenas no protótipo.

    ProtótipoCódigoSó no protótipo

Na validação, o componente de avaliação com estrelas foi criado no código, mas ainda não está ligado a nenhuma página nem à API.

03 / Interfaces em destaque

As telas principais, de perto.

Clique em qualquer tela para ver a página inteira. Nomes, datas, imagens e números são conteúdo ilustrativo do protótipo, não dados reais de uso.

01

Painel da escola

Uma saudação com o nome da escola e os pedidos mais recentes das ONGs logo abaixo. No cabeçalho, a pontuação fica sempre à vista.

02

Listagem de pedidos

Cards com imagem, ONG, data, tag de tema e um botão Apoiar! direto.

03

Detalhes de uma ação

Conteúdo à esquerda e decisão à direita: detalhes, dados da ONG e o botão de participar.

04

Painel da ONG

A mesma estrutura do painel da escola, com uma ação principal em destaque: Criar uma nova ação.

05

Criação de uma ação

Formulário em duas colunas, com tags removíveis e envio de até quatro fotos.

06

Validação e avaliação

A ONG confirma a participação, avalia de uma a cinco estrelas e decide se finaliza ou continua a ação.

04 / Gamificação

Participar também é subir no ranking.

Os recursos de jogo foram pensados para incentivar a participação das escolas e deixar a experiência mais lúdica. Nada de medalhas ou conquistas: o projeto usa pontos e ranking.

  • Pontos no cabeçalhoA escola vê sua pontuação em todas as páginas.Código
  • Ranking com pódioEscolas ordenadas por pontos, com as três primeiras em destaque.Código
  • Escolas mais contribuintesUm resumo do ranking já na página inicial.Código
  • Avaliação com estrelasNota da ONG sobre a participação da escola.Protótipo
Regra implementada no back-end

Quando a ONG fecha uma atividade, cada escola participante recebe 100 pontos se a ação for de doação ou 200 pontos se for de voluntariado.

// server/src/activity/activityService.ts
if (data.status === "closed") {
  const points = updatedAction.category === "volunteer" ? 200 : 100;
  // soma os pontos ao score de cada escola participante
}
Cabeçalho com Nome da Escola, avatar e 1000 Pts Pódio do ranking com 1000, 800 e 600 pontos e lista das posições 4 a 10 Tabela Escolas Mais Contribuintes com posição, escola, pontos e atividades

Recortes reais do protótipo. Nomes e pontuações são ilustrativos.

06 / Do Figma ao código

Do protótipo à implementação

As telas do Figma viraram uma aplicação web com API e banco de dados. Esta é a estrutura, conforme o repositório.

Next.jsFront-end

Páginas e navegação: início, pedidos, detalhes da ação, criação de ação, ranking e perfil. As chamadas à API ficam em server actions.

ExpressBack-end

API organizada por recurso (rotas, controller e service): usuários, escolas, ONGs, endereços, atividades e participações, com login por JWT.

PrismaDados

Modela User, School, Ong, Address, Activity e SchoolActivity, com migrações versionadas.

PostgreSQLBanco

Banco relacional definido no schema do Prisma e executado em container.

DockerAmbiente

O docker-compose sobe banco, servidor e cliente em uma rede compartilhada.

O repositório também tem registros de decisões de arquitetura (ADRs), testes com Jest e um workflow de CI que faz o build do client e do server. Não há endereço público da plataforma; o GitHub contém o código, não uma demonstração online.

07 / Equipe

Um projeto feito a muitas mãos.

LTLucas Torres
ITIsabelle Tenório
EREduarda Rodrigues
DMDaniel Mendonça
AGÁgata Giovanna
FMFelipe Milk
MHMatheus Henrique

Equipe listada no README do repositório. No histórico de commits, as contribuições de Ágata incluem a tela de cadastro, a home da escola, a home da ONG e a página de configurações.

08 / Encerramento

Do protótipo ao código, em equipe.

O CIntegre+ juntou, em um projeto acadêmico ligado a uma demanda da Prefeitura do Recife, o desenho das interfaces e a construção de uma aplicação com API e banco de dados. Pontos e ranking só funcionam com regras e dados por trás, e foi isso que o projeto buscou ligar: o que a escola vê na tela e o que o sistema registra.

Estudo de caso · UX/UI DesignEm andamento

MoniTube

Tecnologia que acompanha, cuidado que transforma.

Aplicativo mobile para acompanhar o tratamento da tuberculose: lembretes, registro das doses, progresso e um sistema de pontos que pode virar benefício social.

  • UX/UI Design
  • Saúde pública
  • Mobile
  • Gamificação
Área
Saúde pública · tuberculose
Plataforma
Aplicativo mobile · protótipo no Figma
Foco inicial
Recife, Pernambuco
Status
Em andamento

O MoniTube é uma proposta de solução. As telas deste estudo vêm do protótipo no Figma, e as parcerias para os benefícios são previstas, ainda não formalizadas.

01 / O desafio

Um tratamento que pede constância.

O tratamento da tuberculose exige continuidade e disciplina. Mas dificuldades financeiras, o esquecimento dos medicamentos e a falta de acompanhamento podem comprometer a adesão. O MoniTube propõe apoiar o paciente nesse processo, unindo acompanhamento digital e incentivos sociais.

  1. Esquecimento

    Doses perdidas no meio da rotina.

    No applembretes nos horários prescritos
  2. Dificuldades financeiras

    Custos do dia a dia que pesam na continuidade.

    No apppontos que podem virar benefícios
  3. Falta de acompanhamento

    Pouca visibilidade do próprio progresso.

    No appprogresso visível e teleconsulta com a equipe
02 / A solução

Três pilares que se alimentam.

Cada dose registrada alimenta o progresso, gera pontos e aproxima o paciente de um benefício, num ciclo pensado para incentivar a continuidade do cuidado.

  1. 01

    Acompanhamento

    Organização dos medicamentos, registro das doses e visualização do progresso.

  2. 02

    Motivação

    Sistema de pontos que reconhece a adesão e incentiva a continuidade do tratamento.

  3. 03

    Recompensas

    Troca de pontos por benefícios sociais, como créditos de transporte, desconto na conta de energia e cestas de alimentos.

Os benefícios dependem de parcerias com instituições públicas e privadas, previstas na proposta e ainda não formalizadas.

03 / Principais funcionalidades

Cada funcionalidade, na tela real.

Registro de medicamentos

Na etapa 1, o paciente confere o medicamento, a quantidade e o horário antes de registrar. Até lá, a dose aparece como Pendente.

Funcionalidades do protótipo navegável no Figma. Nomes, datas e saldos nas telas são ilustrativos.

04 / Processo de design

Do wireframe à tela final.

As telas começaram em baixa fidelidade, em tons de cinza, para resolver a organização das informações, a navegação e os fluxos antes de qualquer decisão visual. Depois, ganharam a identidade do MoniTube e passaram por uma revisão de coerência e linguagem.

Escolha uma tela

Início

“Doses realizadas” virou “doses registradas”, porque o app não confirma clinicamente a tomada. O progresso ganha um card em turquesa e a barra inferior passa a ter 5 abas.

Wireframe em tons de cinza da tela Início Tela final Início, com a identidade do MoniTube

O que a revisão corrigiu

  • Navegação unificada

    A barra inferior tem as mesmas 5 abas em todas as telas do paciente: Início, Tratamento, Consultas, Benefícios e Perfil.

  • Linha do tempo coerente

    Lembrete, registro, confirmação e Início contam a mesma história. Antes, a dose das 08:00 aparecia registrada e pendente ao mesmo tempo.

  • Nomenclatura

    “MoniTube” com a grafia da marca, “doses registradas” no lugar de “realizadas”, “gov.br” e “profissional de saúde”.

  • Registro em 3 etapas

    Conferir, fotografar e confirmar. Os pontos só são somados depois da validação.

  • Linguagem sem culpa

    Os alertas lembram que ausência de registro não significa dose não tomada.

  • Acessibilidade

    Botões de 56px, contraste AA, rótulos sempre visíveis nos campos e status com cor, ícone e texto.

Resumo das notas de revisão registradas no próprio arquivo do Figma.

Identidade visual e componentes

Logo
Logo vertical do MoniTube: pulmões vermelhos com uma linha de batimento e um termômetro em verde, acima do nome MoniTube e do slogan Cuidar é continuarVersão negativa do logo, em branco sobre verde-azulado
AcolhimentoConfiançaSimplicidadeIncentivo
Cores
Turquesa#38A3A5Marca
Verde-menta#80CEB9Sucesso
Vermelho#EA1938Destaques e alertas
Preto-esverdeado#05100BTexto
Branco#FFFFFFFundos

Texto sobre turquesa usa um tom mais escuro (#237577, contraste de 5,4:1 com o branco) para cumprir o WCAG AA. O turquesa original fica para ícones, gráficos e destaques.

Tipografia
AaNunitoTítulos · ExtraBold e BoldCada registro conta no seu cuidado
AaFigtreeTextos e rótulos · Regular a BoldCada registro conta no seu cuidado
05 / Galeria de interfaces

O fluxo do paciente, tela a tela.

Do login à teleconsulta. Toque em uma tela para ampliar e navegar pelas demais.

  1. 01 · Login
  2. 02 · Início
  3. 03 · Tratamento
  4. 04 · Lembrete
  5. 05 · Registrar · 1/3
  6. 06 · Foto · 2/3
  7. 07 · Registrada · 3/3
  8. 08 · Benefícios
  9. 09 · Consultas
  10. 10 · Teleconsulta
Do outro lado

O profissional de saúde

O protótipo também tem um fluxo para quem acompanha o tratamento: a lista de pacientes, um alerta quando alguém fica dias sem registrar dose e a teleconsulta. O alerta lembra que ausência de registro não confirma dose não tomada, e as ações sugeridas começam por uma conversa.

Há ainda uma tela de sugestão por IA, apresentada como hipótese para revisão médica, não como diagnóstico.

Nomes, CPFs, datas e saldos são dados ilustrativos do protótipo.

06 / Impacto e propósito

Cuidar é continuar.

O MoniTube foi pensado para aproximar tecnologia e saúde pública, tornando o acompanhamento do tratamento da tuberculose mais acessível e incentivando a continuidade do cuidado por meio de uma experiência digital simples e acolhedora.

Estudo de caso · UX/UI e Engenharia de Software

SEALog

Uma operação conectada. Cada entrega mais visível.

Plataforma de gestão logística que centraliza pedidos, automatiza a distribuição entre transportadoras e facilita o acompanhamento das entregas. Projetada e prototipada em equipe, no desafio prático da SEAL, do CIn-UFPE.

  • UX/UI Design
  • Engenharia de Software
  • Logística
  • Prototipação

Vídeo pitch · 1:45 · narração em português. Dados ilustrativos.

Contexto
Desafio prático SEAL 2026.2 · CIn-UFPE
Empresa
SEALog, logística regional fictícia
Entrega
Solução projetada e prototipada
Formato
Projeto em equipe

A SEALog é uma solução projetada e prototipada, não um sistema comercial implantado. Não há resultados de uso, métricas de impacto nem testes com usuários. Nomes, pedidos, datas e números nas telas são ilustrativos.

01 / Sobre o projeto

Um desafio de Engenharia de Software.

A SEALog é uma empresa fictícia de logística regional, criada para o desafio prático do processo seletivo da Liga Acadêmica de Engenharia de Software (SEAL). Ela faz entregas para pequenos negócios, como lojas de roupas, farmácias, floriculturas e papelarias.

O objetivo foi propor uma solução viável para os problemas operacionais da empresa. O desafio valoriza a documentação, o levantamento de requisitos, a modelagem de processos, a colaboração e a justificativa das decisões. Por isso este estudo de caso mostra o caminho inteiro, e não só as telas finais.

02 / O problema

Pedidos que se perdem pelo caminho.

A operação dependia de mensagens e planilhas. O levantamento do processo atual, feito em BPMN, apontou dores que se repetiam em várias etapas.

  1. Pedidos pelo WhatsApp

    Chegam em texto, áudio ou planilhas próprias, sem padrão.

  2. Informações incompletas

    Cerca de 1 em cada 5 pedidos chegava incompleto.

  3. Planilhas paralelas

    Uma por dia e por analista, com cópias divergentes.

  4. Atualizações atrasadas

    Status enviados em lote, no almoço ou no fim do dia.

  5. Pouca visibilidade

    Responder “cadê minha entrega?” levava de 20 minutos a mais de 2 horas.

Fonte: planejamento do grupo e processo atual (AS-IS) em BPMN.

03 / O desafio e a mudança de requisitos

No meio do caminho, a proposta mudou.

A primeira solução previa uma SEALog com motoristas próprios. Durante o desafio, o cliente comunicou que a empresa deixaria de executar entregas com frota própria e passaria a operar com duas transportadoras terceirizadas: a Refactor Express e a Fretes do Seu Zé.

Antes: a SEALog com motoristas próprios. Agora: a SEALog conectada às transportadoras Refactor Express e Fretes do Seu Zé
  • Motoristas própriosTransportadoras parceiras
  • Coordenação atribui o motoristaAtribuição automática por região e capacidade
  • App mobile do motoristaPortal da transportadora e registro assistido
  • Status vindo do campoStatus por transportadora, com origem e responsável

O que a mudança alterou

  • Requisitos

    Entraram regiões atendidas e capacidade diária das parceiras, o portal da transportadora, o registro assistido e a conferência financeira. A SEALog paga as empresas, não os motoristas.

  • Arquitetura

    O desenho original previa um app mobile para o motorista. Na nova proposta não há aplicativo nativo obrigatório, e os diagramas precisam refletir as transportadoras.

  • Experiência

    Três perfis passaram a ter telas próprias: a equipe SEALog, a transportadora e o cliente. A implantação é gradual: WhatsApp, telefone e planilhas continuam funcionando.

04 / Nossa solução

O MVP, tela a tela.

O WhatsApp continua sendo o canal de entrada. A plataforma centraliza o cadastro, distribui os pedidos e dá a cada perfil uma visão do que importa. Selecione uma funcionalidade e toque na tela para ampliar.

Solicitação pelo WhatsApp

A loja continua pedindo pela conversa que já usa. O atendimento confere os dados obrigatórios, pede o que faltar e, depois do registro, envia o código do pedido e um link seguro de acompanhamento.

Canal mantidoSem bot nativo no MVP
05 / Processo de design

Do wireframe à tela final.

O processo começou em baixa fidelidade, em tons de cinza, para resolver estrutura, navegação e fluxos antes de qualquer decisão visual. Esses wireframes foram feitos para o modelo original, com motoristas próprios.

Baixa fidelidade

Antes e depois da mudança

Arraste para comparar
  • Motorista → transportadoraA coluna “Motorista” virou “Transportadora”, e cada linha mostra se a atribuição foi automática.
  • Atribuir → atribuição automáticaO botão “Atribuir” saiu da linha. Só o pedido sem transportadora elegível pede análise da Coordenação, com um alerta no topo.
  • Indicadores e filtros novosEntram região, transportadora e período, e os indicadores passam a falar de entregas atribuídas automaticamente.
  • Status com cor, ícone e textoO mesmo princípio dos wireframes, agora com a identidade da SEALog e oito estados.
Wireframe em tons de cinza do painel Entregas, com coluna Motorista e botão Atribuir Tela final do painel Pedidos de hoje, com coluna Transportadora, atribuição automática e indicadores do dia

Alta fidelidade

As telas finais foram desenhadas no Figma, a partir de um design system próprio. Role o trilho e toque numa tela para ampliar.

  1. 01 · Painel da equipe
  2. 02 · Detalhe da entrega
  3. 03 · Transportadoras
  4. 04 · Portal da transportadora
  5. 05 · Atualizar status
  6. 06 · Atualização registrada
  7. 07 · Registro assistido
  8. 08 · Comprovantes
  9. 09 · Desempenho
  10. 10 · Financeiro

Telas exportadas do arquivo do projeto no Figma. A página de acompanhamento do cliente (celular) aparece na seção anterior.

Identidade visual e design system

Logo
Logo da SEALog: foca com linhas de velocidade e pino de localização, acima do nome SEALog, em azul-marinhoVersão da logo em branco sobre azul-marinho
ConfiançaClarezaAgilidade
Cores
Azul-marinho#0B1F3AMarca
Marinho 800#12315CMenu e fundos
Azul 600#2563EBAção primária
Azul 100#DBEAFEAtribuída
Âmbar#F59E0BDestaque logístico
Sucesso#15803DEntregue
Erro#B91C1COcorrência
WhatsApp#128C4ACanal

Todas as cores são variáveis no Figma. O texto sobre os pares de status mantém contraste mínimo de 4,5:1.

Tipografia
AaPlus Jakarta SansTítulos e números · Bold e ExtraBold
AaInterTextos e rótulos · Regular a Bold

Escala de espaçamento de 4 px. Alvos de toque de 40 px no painel e 56 px no celular.

Decisões de usabilidade

  • Estado nunca só por cor

    Cada status tem cor, ícone e texto. Itens que pedem ação sobem para o topo, com borda e destaque.

  • Prevenção de erros

    Rótulos sempre visíveis, mensagem de erro junto ao campo e resumo no topo do formulário. O pedido não é cadastrado com dados essenciais faltando.

  • Uma ação principal por tela

    Hierarquia clara: título, indicadores e tabela. Detalhes completos abrem sem sair da lista.

  • Honestidade nos dados

    Datas sempre com hora e origem da última atualização. Nada de localização em tempo real que o MVP não tem como sustentar.

  • Linguagem simples para o cliente

    A página de acompanhamento mostra só o andamento do pedido, sem dados pessoais de terceiros.

  • Interface mais simples para a parceira

    O portal da transportadora tem menos opções que o painel da SEALog e botões grandes para as ações do dia.

06 / Engenharia de Software

Os artefatos por trás das telas.

O desafio avaliava o processo tanto quanto o produto. Aqui estão os artefatos que existem no repositório do projeto e os que ainda precisam ser atualizados para a nova proposta.

Modelagem de processos · BPMN

AS-IS · processo atual. Arquivo docs/processos/sealog-processo-as-is.bpmn do repositório, redesenhado aqui a partir do próprio arquivo. Mostra as raias, as dores e as regras de negócio.
A produzirBPMN TO-BE · processo proposto

O processo futuro, com as transportadoras parceiras, ainda não foi modelado. Este espaço fica reservado até o diagrama existir.

Regras de negócio

As regras abaixo foram registradas no BPMN do processo atual. As marcadas em âmbar falam de motorista e de planilha, e precisam ser revistas depois da mudança de requisitos.

  • RN01Prazo padrão: dia útil seguinte à solicitação; o cliente pode agendar uma data específica.
  • RN02Dados obrigatórios por entrega: destinatário, endereço completo, volume aproximado e data desejada.
  • RN03O pedido só é encaminhado à Operação com os dados completos.
  • RN04Coleta no estabelecimento entre 14h e 18h; volumes levados pelo cliente ao galpão até 17h.
  • RN05Operação de segunda a sábado, 7h–19h. Atendimento de segunda a sexta, 8h–18h, e sábado, 8h–12h.
  • RN06Cada analista é responsável por um grupo de clientes.
  • RN07A cada entrega, o motorista envia o status e a foto do comprovante.
  • RN08Os motoristas retornam ao galpão entre 17h e 18h com os volumes não entregues.
  • RN09Às 19h a planilha do dia é considerada fechada.
  • RN10O Financeiro calcula a cobrança dos clientes com base nos registros da planilha.

Arquitetura · C4

Em atualizaçãoC4 · Contexto do sistema

O diagrama existente foi feito para o modelo anterior, com motorista e app mobile. A versão atualizada, com as transportadoras e sem app nativo obrigatório, ainda será produzida.

Em atualizaçãoC4 · Contêineres

Mesma situação: o desenho precisa refletir o portal da transportadora, o registro assistido e a página de acompanhamento. Nenhuma arquitetura foi confirmada pelo grupo até aqui.

Requisitos, priorização e backlog

A priorização abaixo é a proposta do grupo, ainda em validação, derivada do planejamento e do escopo do MVP.

Must · MVP

  • Cadastro de pedidos com validação
  • Atribuição automática
  • Atualização de status e comprovantes
  • Consulta do pedido pelo cliente

Should

  • Registro assistido pela SEALog
  • Indicadores por transportadora
  • Conferência financeira simplificada

Fora do MVP

  • Roteirização otimizada
  • GPS em tempo real
  • Bot nativo no WhatsApp
  • Cobrança automatizada
A adicionarBacklog e quadro de tarefas (Jira)

Os prints do backlog e do quadro do grupo ainda não foram incluídos. O espaço fica reservado para quando o material estiver disponível.

07 / Minha contribuição

O que eu fiz, dentro de um time.

  1. UX/UI Design das interfaces
  2. Wireframes e prototipação no Figma
  3. Refinamento das telas, do design system e dos estados
  4. Discussão dos fluxos e dos requisitos com o grupo
  5. Adaptação da solução ao cenário das transportadoras
  6. Colaboração nas decisões do projeto
Um projeto em equipe

A SEALog foi realizada em grupo, e as etapas de engenharia, como a modelagem de processos, os requisitos, o planejamento e a organização das tarefas, foram trabalhadas coletivamente. Aqui destaco a parte de design, que é onde atuei com mais profundidade.

08 / Aprendizados

Entender antes de desenhar.

  1. 01

    O problema vem antes da tela

    Mapear o processo atual e as dores mostrou onde a interface realmente precisava ajudar. As telas só ficaram claras depois que o fluxo estava claro.

  2. 02

    Requisitos mudam, e tudo bem

    Trocar motoristas próprios por transportadoras alterou perfis, fluxos, telas e arquitetura. Documentar as decisões ajudou a adaptar a solução sem recomeçar do zero.

  3. 03

    Design é decisão de equipe

    Cada escolha de interface dependia de uma regra de negócio ou de uma restrição técnica. Discutir com o grupo evitou telas bonitas que não se sustentavam.

Encerramento

Cada entrega mais visível.

A SEALog mostra como um problema operacional vira uma solução desenhada: do levantamento do processo à mudança de requisitos, passando por wireframes, design system e protótipo. É uma proposta, e este estudo de caso registra o raciocínio por trás dela.

Voluntariado · Projeto de extensão · UFPE

EnvelheSERDigital

Tecnologia que acolhe, no ritmo de cada pessoa.

O EnvelheSER Digital é um projeto de extensão da UFPE voltado ao letramento digital de pessoas idosas. Participo como voluntária, e este é o meu segundo período no projeto.

Já atuei nas turmas de computador e de celular, apoiando as atividades práticas, e também contribuo com materiais de divulgação e conteúdo audiovisual. É uma experiência que une tecnologia, comunicação, acessibilidade e inclusão digital.

Atuação
Voluntária
Participação
Segundo período no projeto
Turmas
Computador e celular
Frentes
Apoio nas aulas, divulgação e audiovisual

Vídeo sobre a minha experiência no projeto · 1:27 · com áudio

01 / Registros

Alguns momentos do projeto.

Registros das aulas e de momentos com participantes do projeto. Toque ou clique em uma foto para ampliar.

02 / Contribuições e aprendizados

O que faço e o que levo.

O que faço

Nas turmas, auxilio os participantes nas atividades práticas, esclareço dúvidas e respeito o ritmo de aprendizagem de cada pessoa. Já atuei nas turmas de computador e de celular. Também contribuo com a criação de materiais de divulgação e de conteúdo audiovisual do projeto.

O que levo

A experiência me ajuda a compreender diferentes necessidades, adaptar explicações e perceber dificuldades de uso da tecnologia. É um aprendizado que também influencia o meu olhar para interfaces e para a acessibilidade.

  • Tecnologia

    Computador e celular, aprendidos na prática e com apoio.

  • Comunicação

    Explicações adaptadas a cada pessoa, além de materiais de divulgação e conteúdo audiovisual.

  • Acessibilidade

    Perceber onde o uso da tecnologia trava e do que cada pessoa precisa para seguir.

  • Inclusão digital

    Letramento digital de pessoas idosas, no ritmo de cada uma.

Encerramento

Parte da minha trajetória.

Aprender e ensinar tecnologia com pessoas idosas me lembra por que design e código precisam ser pensados para quem usa. Essa experiência como voluntária faz parte da minha trajetória, ao lado dos projetos de desenvolvimento e UX/UI.