Projeto CEU: quatro unidades, um mês e muita coisa para organizar
Como uma frente de Design organizou, em três sprints e quatro semanas, uma experiência digital para quatro unidades dos CEUs de São Paulo.
Quatro CEUs, um mês e muita coisa para organizar
Phorte entrou em parceria com a Prefeitura de São Paulo para atuar em quatro CEUs: Silvio Santos, Rei Pelé, Padre Ticão e Papa Francisco.
Eu fui chamado para cuidar da frente de Design ponta a ponta. Do branding ao site, passando por identidade visual, UX/UI, componentes, acessibilidade e acompanhamento da experiência até ela chegar ao ambiente publicado.
Neste recorte, trabalhei em colaboração com Dorys, Gerente de Marketing, e Emerson, Líder de Projeto Educacional. Cada frente tinha suas próprias decisões, mas tudo precisava conversar no final.
Foi um desafio e tanto: três sprints em quatro semanas, totalizando um mês para organizar uma frente que normalmente levaria meses. No conjunto de projetos e pessoas envolvidos, passamos de 819 etapas de trabalho. Esse número mostra a escala do trabalho realizado; não é uma métrica de acesso, conversão, inscrições ou impacto.
O lançamento oficial do site está marcado para 27/07/2026. Enquanto o projeto entra nessa etapa, a experiência pode ser consultada em ceu.phorte.org.br.
Uma marca para quatro frentes e quatro unidades
Os materiais que recebemos traziam uma pesquisa rica sobre os CEUs, seus territórios e as pessoas que poderiam utilizar esses espaços. Os dados quantitativos não entram nesta publicação por serem informação interna, mas os aprendizados ajudaram a organizar as primeiras decisões de produto.
A decisão que guiou boa parte do trabalho foi separar a experiência em quatro frentes: Educação, Esporte, Lazer e Cultura. Isso não ficou apenas na apresentação da marca. As quatro categorias ajudaram a organizar atividades, filtros, cards, sinalização e os caminhos do site.
As quatro unidades também precisavam fazer parte do mesmo raciocínio. Cada uma tem seu território, suas imagens, seus contatos e sua programação, mas todas deveriam ser reconhecidas como parte de uma experiência comum.
As cores, portanto, não poderiam carregar toda a responsabilidade da informação. As categorias também aparecem com texto, ícones e hierarquia visual. A pessoa não deveria precisar distinguir uma cor da outra para entender o que estava vendo.
A identidade precisava funcionar no site, em cartazes, murais, camisetas, crachás, sinalizações, posts e telas menores. Ela precisava conviver com as marcas e os materiais dos parceiros sem perder a própria lógica. A decisão foi simples de explicar, mas importante de sustentar: a identidade precisava ser bonita, só que antes precisava ser útil.
Testar rápido sem deixar a IA decidir o projeto
Com o contexto mais organizado, produzi protótipos rápidos usando IA para testar possibilidades. Não era para a ferramenta decidir o projeto e também não era para usar uma imagem gerada como entrega final. A ideia era explorar caminhos, encontrar problemas cedo e aprender antes de investir mais tempo em uma direção.
Depois juntamos as ideias em um workshop. Cada pessoa trouxe o que imaginava para o CEU e colocamos essas possibilidades diante das regras de negócio, do prazo e do que seria possível sustentar na operação.
Separar o que era possível do que era apenas um desejo foi uma parte importante do trabalho. Em alguns momentos, chamamos certas ideias de delírios. Sim, com essas palavras. Foi útil porque nem toda boa ideia está pronta para virar requisito.
Esse processo ajudou a separar inspiração de decisão e a entender quais pontos precisavam seguir para a arquitetura, para o sistema visual e para a interface.
As imagens desta seção mostram parte dessa exploração: identidade, comunicação, sinalização e identificação. São protótipos e aplicações conceituais usados para abrir conversa e testar coerência entre os pontos de contato. Não são registros de materiais finais instalados ou publicados.
Da identidade para o site
Com a base do CEU definida, começamos a transformar as decisões em experiência. O site precisava reunir as quatro unidades e, ao mesmo tempo, ajudar cada pessoa a encontrar uma porta de entrada.
Ela poderia começar escolhendo um CEU, procurando uma atividade, olhando a agenda, entendendo o território, lendo uma notícia ou buscando um contato. Na home, a pessoa encontra uma visão geral do projeto e pode escolher a unidade que faz sentido para a sua rotina.
Também trabalhamos páginas de unidades, agenda, detalhes de atividades, notícias, Olhares do CEU, contato e informações institucionais. A arquitetura precisou criar uma linguagem comum entre esses caminhos sem apagar as particularidades de cada unidade.
A agenda foi uma parte importante porque é onde a presença digital deixa de ser apenas informativa e começa a ajudar na participação. Os filtros foram pensados para facilitar a busca por CEU, categoria, dia e faixa etária. Os estados da atividade também precisavam ser claros: inscrição aberta, lista de espera ou atividade encerrada.
O mapa cumpre uma função parecida. Não bastava listar quatro endereços; era necessário ajudar a pessoa a entender onde cada unidade está e qual delas faz mais sentido para a sua rotina.
O fluxo não termina quando a pessoa encontra a atividade
A agenda resolve uma parte do problema: ajuda a pessoa a descobrir o que existe e onde existe. Mas a experiência precisava levar essa descoberta até a participação.
O fluxo que guiou o trabalho era simples de falar e difícil de organizar: o que a pessoa quer fazer, onde quer fazer, como vai fazer, o que precisa para conseguir fazer e, então, ir fazer.
A área de inscrição e cadastro das atividades já estava sendo desenvolvida por outra equipe da Phorte. Ela não foi criada por mim e não deve ser apresentada como uma entrega exclusiva da frente de Design. O SIS entrou posteriormente na implementação do projeto, mas essa necessidade já estava prevista no escopo e no fluxo de usuário.
Na prática, o site funciona como a camada de descoberta e orientação. A pessoa escolhe uma atividade, entende em qual CEU ela acontece, consulta data, horário, faixa etária, categoria e condições de participação. Quando chega a hora de se inscrever ou cadastrar, a experiência encaminha esse próximo passo para o SIS da Phorte, que concentra o cadastro e a inscrição.
Isso muda bastante a forma de pensar a interface. Não basta colocar um botão “Inscrever-se”. É preciso deixar claro o que acontece depois do clique, que informações serão necessárias, se existe vaga, lista de espera ou outro estado, e como a pessoa continua sem perder o contexto.
Também foi importante reconhecer a divisão de responsabilidades entre equipes. O trabalho de Design não era substituir o SIS, e sim fazer com que a entrada no fluxo transacional fosse compreensível para quem vinha do site.
Quando o Figma encontra a experiência real
O Figma foi usado para organizar fundamentos, referências, wireframes, componentes e decisões de interface. Mas o trabalho não terminava no arquivo.
Quando a experiência começou a ser implementada, apareceram problemas que uma tela estática não mostra: importações com layout quebrado, tela branca, mapa com área de clique desalinhada, menu mobile sem espaço suficiente, diferenças entre desktop e mobile e ajustes de contraste em botões.
É nessa hora que o trabalho de Design Engineer fica mais evidente. Não basta a interface parecer correta no mockup. Ela precisa continuar fazendo sentido quando o conteúdo muda, quando a tela fica menor, quando a pessoa toca no mapa ou quando um estado diferente aparece.
Também foi preciso manter as informações centrais organizadas: unidades, categorias, atividades, contatos, imagens e estados de inscrição. No site final, o fluxo de inscrição está integrado ao SIS, em uma etapa desenvolvida com a área que já estava sendo construída por outra equipe da Phorte.
O desafio não era criar uma tela isolada de inscrição. Era organizar o caminho inteiro: descobrir uma possibilidade, escolher uma unidade, entender as condições, saber o que será necessário e avançar para a inscrição no ambiente correto.
Acessibilidade como critério, não como acabamento
A acessibilidade já fazia parte do escopo, mas foi ganhando cada vez mais força durante o projeto. Ela deixou de ser apenas um item para revisar no final e passou a influenciar componentes, conteúdo, contraste, foco, movimento e navegação.
Uma referência importante nessa etapa foi o A11yMD, do Felipe A. Carriço. A proposta de colocar acessibilidade nas regras de trabalho da IA, antes de começar a construir a interface, ajudou a trazer essa conversa para o início do processo.
Não tratei o A11yMD como uma certificação automática. Ele funcionou como uma referência de raciocínio para a exploração com IA e para as decisões de produto.
Entre as otimizações trabalhadas estão navegação por teclado, foco visível, link para pular ao conteúdo principal, ajuste de tamanho da fonte, alto contraste, redução de movimento, leitura por voz, seleção de área para leitura, integração com VLibras, textos alternativos, labels e estados que não dependem apenas de cor.
Não foi realizada uma auditoria especializada. Por isso, não afirmo conformidade formal com WCAG. O que posso dizer é que acessibilidade entrou na estrutura do projeto e não foi tratada como acabamento.
Conforme as ideias sobre acessibilidade cresciam, começamos também a estudar melhorias estruturais e físicas nos CEUs para atender melhor pessoas com dificuldade de movimentação e outros públicos que encontram barreiras no espaço. Essa frente ainda está em estudo e não é apresentada aqui como uma obra ou melhoria concluída.
Para mim, essa foi uma expansão importante de visão: a experiência digital pode facilitar o acesso à informação, mas a participação também depende de como o espaço físico recebe as pessoas.
A identidade precisava ser útil
O principal aprendizado foi entender que a identidade e o produto não eram duas entregas separadas. A identidade ajudou a organizar a informação, a pesquisa ajudou a definir os caminhos, a implementação mostrou os estados reais da experiência e a acessibilidade mudou decisões de interface e de conteúdo.
Quando essas partes começaram a conversar, o projeto deixou de ser apenas uma coleção de telas. Passou a ser um sistema para orientar uma pessoa até seu CEU, encontrar uma atividade e entender como participar.
Para mim, essa é a parte mais interessante do projeto: o Design não ficou preso à tela inicial. Ele precisou acompanhar a identidade, o território, a operação, os parceiros, os componentes e o caminho até a experiência publicada.
Eu não estou apresentando o SIS como uma entrega minha, mas como parte da jornada que o site precisava orientar. Cada equipe deve ser reconhecida pelo que realmente construiu, mas o produto precisa ser analisado pela experiência completa.
Um ecossistema com canais por unidade
As quatro unidades também mantêm canais próprios no Instagram. Eles ajudam a acompanhar a comunicação territorial do projeto e reforçam uma decisão importante da experiência: existe uma linguagem comum, mas cada CEU precisa continuar reconhecível para a sua comunidade.
Os perfis são canais públicos das unidades e podem mudar com o tempo. Eles entram aqui como referência externa do ecossistema, não como fonte de métricas ou de validação de impacto do projeto.
O que está sendo mostrado
Nesta publicação, mostro a identidade visual, a lógica das quatro frentes, previews das telas e componentes, a home, a agenda, o fluxo conceitual entre site e SIS, os recursos assistivos e um embed do arquivo Figma do produto.
Os materiais de processo são previews de trabalho interno e não devem ser considerados materiais finais de divulgação. Dados de pesquisa, protopersonas, métricas de acesso, conversão, inscrições e impacto não fazem parte desta publicação.
O site público pode ser consultado em ceu.phorte.org.br.
CTA
Em produtos de serviço, qual parte costuma revelar mais problemas depois do primeiro protótipo: arquitetura, responsividade, acessibilidade ou integração com a operação?
