Capa do projeto: logotipo em 3D da Turma do Jackinho com os personagens Jackinho e Jackeline
UX/UI20267 min de leitura

Turma do Jackinho

Hub digital de jogos e conteúdos para crianças e adolescentes em tratamento oncológico na ala pediátrica de um hospital.

Categoria

UX/UI

Duração

4 meses

Meu papel

Líder da equipe de design

Ferramentas

Figma, Figjam, Adobe, Google Meet

01 · Contexto do Projeto

Um espaço digital para quem precisa de distração educativa

O projeto consiste no desenvolvimento de um hub digital para a ala oncológica pediátrica do Hospital HELP, uma experiência acolhedora, intuitiva e adaptada para crianças e adolescentes de 2 a 15 anos, que trouxesse leveza, alívio emocional e apoio durante a jornada hospitalar. O hub foi desenvolvido em parceria com o curso de Jogos Digitais, responsável pelo jogo que vive dentro dele.

Liderei a equipe de design, coordenando o time e definindo como o trabalho seria conduzido. Nos dividimos em duas frentes: uma para crianças de 2 a 7 anos e outra para o público de 8 a 15, garantindo que o produto não fosse nem inacessível para os menores, nem infantil para os adolescentes.

02 · Processo de Criação

10 etapas guiadas pelo Design Thinking e Heurísticas de Nielsen

O processo foi construído a partir de duas referências metodológicas complementares. O Design Thinking guiou a estrutura geral, garantindo que cada decisão de design partisse de uma compreensão profunda do usuário.
As Heurísticas de Nielsen foram aplicadas na fase de avaliação, assegurando que a interface respeitasse princípios consolidados de usabilidade.

Design Thinking

Metodologia centrada no ser humano que estrutura o processo criativo em fases: empatia, definição, ideação, prototipagem e teste. Ideal para problemas complexos que envolvem pessoas em contextos sensíveis.

EmpatiaDefiniçãoIdeaçãoTestePrototipagem

Heurísticas de Nielsen

10 princípios de usabilidade usados para avaliar e refinar interfaces. Aplicados na Etapa 8 do processo, garantiram que o hub fosse visível, controlável, consistente e acessível para crianças de diferentes faixas etárias.

Visibilidade do estado do sistemaControle do usuárioConsistência
03 · Organização do trabalho

Cronograma do processo

Para organizar o trabalho, definimos 3 pilares desenvolvidos ao longo do projeto: descoberta, design e entrega.

UX de EstratégiaUX de PesquisaUI Design

Descoberta

Alinhamento sobre o HUBEtapa 1
Definição dos usuáriosEtapa 2
Necessidades do usuárioEtapa 3

Design

Módulos do HUBEtapa 4
Fluxo PrincipalEtapa 5
WireframeEtapa 6

Entrega

UI Visual + PrototipagemEtapa 7
Checklist de UXEtapa 8
Validação InternaEtapa 9
Teste exploratórioEtapa 10
04 · Desafio

Como oferecer distração real para crianças que passam meses dentro de um hospital?

Antes de projetar qualquer solução, precisávamos entender a dimensão real do problema. Os dados do câncer infantil no Brasil revelam um cenário que vai muito além da doença em si, um problema de qualidade de vida durante o tratamento.

7.930

novos casos de câncer infantojuvenil por ano no Brasil

Fonte: INCA 2023–2025

6m - 2a

duração média do tratamento oncológico pediátrico

Fonte: INCA / Agência Brasil

64%

taxa média de cura no Brasil — bem abaixo dos 80–85% dos países de alta renda

Fonte: INCA

156 mil

internações de crianças e adolescentes com câncer no SUS em três anos.

Fonte: Observatório de Oncologia

”Meses de internação significam meses de ócio. Enquanto o tratamento cuida do corpo, o tempo parado pesa sobre o emocional, e é aí que o hub atua.“

  • O câncer é a primeira causa de morte por doença em crianças, o que aumenta a ansiedade de toda a família durante o tratamento.
  • A fase mais intensa do tratamento dura de 6 meses a 1 ano, com internações frequentes e total ruptura da rotina da criança.
  • Durante a internação, crianças ficam privadas da escola, dos amigos e das atividades, o que afeta não só o humor, mas o desenvolvimento cognitivo e emocional.
05 · Pesquisa com usuários

Personas

Para garantir que o hub fizesse sentido para o público real, desenvolvemos três personas representativas das faixas etárias atendidas, cada uma com contexto, dores e necessidades distintas dentro do ambiente hospitalar.

Persona Luna Andrade, 7 anos, criança pequena internada para tratamento oncológico, com suas tarefas, dores e necessidades no hubPersona Pedro Lucena, 11 anos, criança maior em tratamento, com suas tarefas, dores e necessidades no hubPersona Mariana Silva, 14 anos, adolescente em tratamento, com suas tarefas, dores e necessidades no hub

Funcionalidades priorizadas

Com base nas dores e necessidades das personas, estas são as funcionalidades priorizadas para o hub.

1Jogos simples e coloridosResolve: tédio intenso
2Vídeos com personagensResolve: dificuldade de se distrair
3Avatar próprioResolve: solidão e saudade de casa
4Navegação por íconesResolve: falta de leitura
5Jogos com desafios e níveisResolve: tédio prolongado
6Badges e mapa de progressoResolve: falta de sensação de avanço
7Avatar e perfil personalizáveisResolve: perda de controle e autonomia
8Conteúdos sobre saúde em linguagem leveResolve: ansiedade antes de procedimentos
06 · Arquitetura e fluxo de navegação

Arquitetura e fluxo de navegação do app Turma do Jackinho

Antes de desenhar qualquer tela, mapeamos toda a estrutura do app. O fluxo foi organizado em 9 seções principais: Onboarding, Hub, Perfil, Jogos, Vídeos, Dicionário, Músicas, Favoritos e Configurações, garantindo que a criança pudesse navegar com autonomia, sem depender de leitura fluente ou de um adulto por perto. Cada seção foi pensada de forma independente, respeitando o ritmo e a energia da criança durante o tratamento.

Diagrama do fluxo de navegação do app, da animação inicial e do login até o mapa e as seções de perfil, jogos, vídeos, dicionário, música, favoritos e configurações
07 · Wire-frames

Esboços para a Turma do Jackinho

Os wireframes foram o primeiro passo para dar forma às ideias. Antes de qualquer decisão visual, esboçamos em papel a estrutura das telas principais, definindo posicionamento de botões, hierarquia de conteúdo e fluxo de interação. Cada botão do hub foi pensado para carregar um símbolo visual da atividade, permitindo que a criança identificasse e acessas se os módulos de forma intuitiva, mesmo antes de ler com fluência.

Esboço a lápis da tela do hub com quatro módulos e ícones de controle, play, estrela e músicaEsboço a lápis do mapa de navegação com caminho sinuoso, personagens e barra de ícones
Esboços a lápis de oito variações de cartões dos módulos com símbolos de jogos, vídeos, favoritos e músicas

Símbolo visual da atividade e prévia do que a atividade oferece.

08 · 09 Style Guide

Identidade visual do hub

O style guide reúne as decisões visuais que dão unidade ao hub: tipografia, cores e componentes. Cada escolha partiu do mesmo princípio, ser lúdico o bastante para acolher a criança e claro o bastante para ela navegar sozinha. A paleta roxa, azul e amarela vem dos próprios personagens, Jackinho e Jackeline, para que a interface e a turma pareçam parte do mesmo universo.

Style guide do hub com as fontes Poppins, Cookie e Purple Smile e suas escalas tipográficasPaleta principal do hub e paletas completas dos personagens Jackinho e JackelineEspecificação dos botões de ação, botões de ícone, botões de confirmação e especificações técnicas do sistema
10 · Interface

Telas de alta fidelidade

Com o style guide definido, evoluímos os esboços para telas de alta fidelidade, onde cores, tipografia, personagens e componentes se unem pela primeira vez em uma experiência completa. As telas cobrem o fluxo principal do app: splash de abertura com os personagens, cadastro, boas-vindas personalizadas com o nome da criança, mapa interativo de fases e configurações. Cada detalhe foi pensado para que a criança se sinta acolhida desde o primeiro acesso.

Montagem com várias telas do app: mapa, jogos, escolha de personagem, perfil e boas-vindas
Tela de abertura com os personagens, o logotipo e a frase Aprender é uma aventura!Tela de login com campos de e-mail ou telefone, senha, botão Fazer Login e entrada com o GoogleTela de cadastro de usuário com campos do responsável, da criança, e-mail, telefone e senhaTela de boas-vindas com os personagens e a mensagem Seja bem-vinda a turma do Jackinho, Maria Julia!Tela de perfil com avatar, progresso, jornada do Jackinho, conquistas desbloqueadas e próximos desafiosTela Meus Favoritos com as listas de jogos, vídeos e músicas favoritas
Criança sentada no chão segurando um tablet com a tela de jogos do app aberta
11 · Resultados e impacto

O que o hub entrega

Com o hub em uso, o impacto esperado é tornar o tempo de tratamento mais leve: oferecer distração, aprendizado e um espaço de autonomia para crianças que passam longos períodos internadas. Para medir isso, acompanharíamos o tempo de uso e os módulos mais acessados, além de ouvir a equipe de enfermagem e as famílias sobre o efeito no humor e no bem-estar das crianças durante a internação.

Conclusões e agradecimentos

A Turma do Jackinho foi um dos projetos mais desafiadores e significativos que já conduzi. Projetar para crianças em tratamento oncológico exigiu olhar além da interface: cada decisão precisava trazer leveza para um momento difícil, sem abrir mão da clareza e da autonomia de quem usa.

Antes da entrega, realizamos um teste exploratório com crianças da faixa etária, fora do contexto hospitalar, já que o acesso à ala pediátrica exigiria uma aprovação ética que o prazo do projeto não comportava. O teste foi informal e serviu para observar a navegação e a reação das crianças às telas. Como próximos passos, o projeto pede testes de usabilidade estruturados, uma avaliação heurística completa com base nos princípios de Nielsen e a validação do hub com a equipe do hospital e com as famílias.

Agradeço à equipe de design, que construiu este projeto comigo com dedicação e sensibilidade, e ao curso de Jogos Digitais, responsável pelo jogo que dá vida ao hub. Este case é resultado do trabalho de todos.

Equipe de design

Hellen Benning — Líder de equipe

Nicoly Arcanjo — UI Design da seção Dicionário, customização de avatar e prototipagem

Eduarda Silvino — UI Design da seção Vídeos e sistema de botões

Luana Morais — UI Design da seção Músicas e style guide

Virgínia Oliveira — UI Design da tela principal do hub

Jefferson Daniel — UI Design das seções Perfil, configurações e fluxos de navegação

Luciano Alcântara — UI Design da seção Jogos, mockups

Desenvolvimento do jogo: curso de Jogos Digitais - UNIFACISA

Vamos conversar?benninghellen@gmail.com

Respondo em até 48h — projetos, colaborações e cafés.

WhatsApp: +55 83 9 9860-6905
© 2026 Hellen BenningPortfólio · Edição 01