Teatralizei
2025
Um projeto de UX/UI Design que conecta artistas e público por meio de uma experiência digital acessível e intuitiva.
Contexto
Meu papel
Atuei em todas as etapas do processo de design, desde a pesquisa até a entrega final em WordPress.
Além do desenvolvimento visual, fiz a definição e priorização de tarefas no Notion, acompanhamento das implementações e documentação do projeto, garantindo que o produto se mantivesse coerente com a visão e estratégia do Teatralizei.
Também realizei a tradução das expectativas do cliente em requisitos técnicos, colaborando para transformar as demandas criativas em soluções viáveis e sustentáveis.
Processo de design
Descobrir
Comecei o projeto fazendo um briefing detalhado com a liderança do Teatralizei. O objetivo era desenvolver um site em WordPress e que a equipe pudesse atualizar com notícias e espetáculos.
Realizei uma análise de concorrência (benchmark) com plataformas como Caixa Cultural, Sesc PE e Infoteatro, identificando problemas comuns como baixa responsividade e excesso de informação visual. Isso ajudou a definir oportunidades estratégicas para o Teatralizei: centralização de conteúdo, SEO local, design responsivo e a possibilidade de parcerias com artistas locais.
Com base em pesquisas sobre hábitos culturais em Recife e Salvador, e na análise de público do Instagram, identifiquei o público-alvo principal: adultos de 25 a 44 anos, com interesse em cultura local e acesso predominantemente pelo celular.
Para humanizar os dados, desenvolvi duas personas:
Essas personas guiaram as decisões de conteúdo, priorização de informações e tom de voz do site.
Definir
Com as descobertas da pesquisa organizadas no Notion, passei a transformar os dados em estrutura de produto.
Para garantir uma navegação clara e escalável entre as duas cidades, desenhei o sitemap no Octopus.do, estruturando o conteúdo em camadas de fácil compreensão.
O objetivo era que o usuário conseguisse localizar qualquer informação, desde um espetáculo específico até uma notícia recente, em poucos cliques.
O mapa também ajudou a equipe do Teatralizei a visualizar o escopo total do projeto e compreender como cada página se conecta à proposta de valor do site: aproximar público e artistas em um ambiente digital acessível e organizado.
A construção do conteúdo foi colaborativa: eu organizei a estrutura e hierarquia de informações de cada página, e a equipe do Teatralizei ficou responsável por preencher os textos e manter as futuras atualizações do site.
Em seguida, desenhei a jornada do usuário no Figma, mapeando as principais tarefas, como descobrir um espetáculo, encontrar informações sobre os ingressos e acessar o portfólio dos artistas.
Hipóteses
Soluções começam com boas perguntas e com hipóteses claras e testáveis.
A primeira hipótese foi: "Se eu organizar o conteúdo da home em blocos visuais distintos, então o usuário encontrará mais facilmente o que procura, porque o excesso de informação pode confundir a navegação."
Solução: Hierarquia visual clara entre agenda, notícias e artistas.
Resultado: Navegação mais fluida e propósito do site compreendido de imediato.
A segunda hipótese surgiu a partir da análise do público e do tráfego no Instagram: "Se o design for construído para mobile desde o início, então a experiência será mais acessível, porque a maioria do público acessa o site pelo celular."
Solução: Layout otimizado para toque, leitura e velocidade.
Resultado: Experiência coerente com o comportamento real do público.
As soluções foram testadas de forma iterativa por meio de protótipos e revisões com a equipe, validando se o fluxo atendia às metas de clareza e facilidade de uso.
Cada hipótese testada reforçou a importância de decisões guiadas por evidências e colaboração. O processo se tornou desenhar, testar, aprender e evoluir.
Desenvolver
Passei então para a etapa visual, iniciando o desenvolvimento dos wireframes, alguns deles criados com o apoio de IA’s como o Uizard, utilizada para gerar esboços rápidos.
Busquei referências de animações no Awwwards, filtrando os sites feitos com WordPress para compreender boas práticas e explorar interações viáveis dentro da plataforma.
Wireframe (alta fidelidade)
Criei uma biblioteca de padrões no Figma, reunindo tipografia, ícones, cores (com tokens semânticos), grids e espaçamentos baseados em múltiplos de 4 para garantir consistência e escalabilidade.
Conjunto de logos e cores organizadas em Semantic tokens
O protótipo de alta fidelidade simulou toda a navegação e foi validado em reuniões com o time do Teatralizei. A partir do feedback, realizei ajustes como:
Reordenação das informações na Home,
Inclusão da foto do autor das notícias,
Mudanças no campo de escolha da cidade (para futura expansão),
e exibição de onde os ingressos estão disponíveis.
Entregar
A etapa final envolveu transformar o protótipo em um site funcional em WordPress.
Pesquisei opções de hospedagem seguras e implementei boas práticas de performance e proteção (como certificado SSL, backups automáticos e plugins de segurança).
Implementei melhorias focadas em tornar o site mais acessível e confortável para diferentes públicos. Para isso, adicionei o plugin Elementor Ally, que oferece um painel de ferramentas de acessibilidade com recursos como:
Aumentar ou diminuir o tamanho do texto;
Ativar escala de cinza;
Ajustar contraste;
Sublinhado de links;
Alternar legibilidade da fonte.
Essas opções garantem que mais pessoas possam navegar no site de forma personalizada e sem barreiras visuais.
Além disso, todas as imagens receberam descrições alternativas (alt text), permitindo que leitores de tela interpretem o conteúdo corretamente.
Essas decisões tornam o Teatralizei mais inclusivo e alinhado às boas práticas de acessibilidade digital, reforçando que um bom design é aquele que funciona para todos.
Por fim, entreguei um manual de atualização para que a equipe do Teatralizei consiga gerenciar agenda e notícias sem depender de suporte técnico.
Design que conecta arte e público.
Lições aprendidas
O Teatralizei foi um divisor de águas no meu aprendizado como designer.
No início, senti o peso da inexperiência ao tentar equilibrar pesquisa, design e implementação, mas isso me ensinou o valor de traduzir ideias em entregas reais, mesmo com recursos limitados.
Aprendi a:
Priorizar o que realmente impacta o usuário final,
Procurar referências para um projeto,
Testar e validar hipóteses com o cliente ao invés de buscar perfeição isolada,
Pensar em acessibilidade e manutenção desde o início, não como um complemento.
Olhar para o design também como produto, entendendo a importância de traduzir necessidades em requisitos claros, documentar decisões e acompanhar implementações de forma estruturada.
O projeto me mostrou que um bom design vai além da estética. Ele precisa funcionar, se sustentar e evoluir junto com quem o utiliza.
O Teatralizei representou um projeto completo de UX/UI, desde a imersão na cultura local até a entrega de um produto funcional.
Mais do que um site, o projeto se tornou uma ferramenta de valorização do teatro independente, conectando artistas, espectadores e a cena cultural das duas capitais.
Próximos passos
Com o site no ar, o foco será acompanhar o impacto real do Teatralizei. Métricas como alcance, engajamento e desempenho técnico vão ajudar a entender quem acessa o site, como navega pelo conteúdo e o que mais desperta interesse.
Além de medir resultados, essas análises vão orientar as próximas melhorias: ajustes no layout, novos recursos e estratégias de SEO para fortalecer o alcance regional. Ferramentas como Google Analytics 4, Search Console e Hotjar garantirão um acompanhamento contínuo e embasado em dados.
O Teatralizei é um projeto vivo, e o design continua acompanhando o palco onde a cultura local se reinventa.