Modo Batalha em Jogo Educacional
Criando uma experiência de quiz gamificada para promover o engajamento em batalhas educacionais.
Equipe
Rafael Moraes Hilario
Ano
2025
Este projeto foi desenvolvido como parte de um case prático para um processo seletivo. O desafio consistia em criar o protótipo do módulo "Modo Batalha" de um jogo educacional, no qual dois alunos competem em quizzes de forma síncrona ou assíncrona. O objetivo era desenvolver uma experiência gamificada, intuitiva e acessível. A solução apresentada deveria incluir: tela de início, seleção de perguntas, a tela da batalha, tela de resultados e histórico de batalhas.
Minha atuação
Fui responsável por todo o processo de design, desde a pesquisa até a criação das interfaces. Estruturei uma solução que garante uma experiência fluida e acessível para os alunos, aplicando princípios de gamificação, usabilidade e acessibilidade para maximizar o engajamento e a clareza nas interações durante as batalhas.
Pesquisa de usuário
Design de experiência do Usuário
Design de Interface
Pesquisa
Por se tratar de um projeto fictício para um case técnico, a pesquisa foi baseada em dados e diretrizes secundárias, fruto de pesquisas primárias executadas por outros pesquisadores e benchmarking de soluções existentes no mercado.
No que diz respeito a acessibilidade, optei por seguir as diretrizes da WCAG, que propõe uma série de orientações para o desenvolvimento de interfaces acessíveis, incluindo contraste mínimo de 4,5:1 e fonte mínima de 16px. Além disso, a acessibilidade também foi considerada para incluir questões relacionadas a neurodivergências. Nesse sentido, evitei utilizar contagem de tempo (que pode ter um efeito negativo nos usuários) e evitei o uso de elementos muito complexos ou dispersivos, que poderiam tirar o foco do usuário.
Considerando práticas de outros aplicativos educacionais, como o Duolingo, também optei por incluir mensagens e feedbacks cuidadosos para manter o interesse dos estudantes, incentivando-os mesmo no erro. Além disso, a visualização do "sucesso" em outras batalhas, a possibilidade do jogo em dupla e o acumulo de pontos contribuem para o engajamento do estudante na plataforma idealizada.
Rabiscoframe
Considerando que as telas que seriam criadas haviam sido definidas no escopo do case, optei por criar rabiscoframes de cada tela que deveria ser desenvolvida. Essa etapa foi essencial para explorar rapidamente soluções de layout e fluxo de navegação, antes de evoluir para wireframes mais refinados e a interface final.
Identidade Visual
Tipografia
Inter
A fonte Inter é uma sans-serif popular, amplamente utilizada em aplicativos e interfaces digitais devido à sua legibilidade, versatilidade e natureza open-source.
Paleta de Cores
#291433
#6A298A
#FAF0FF
#A350CC
#FFFFFF
Solução Final
Telas de início
Nessa tela estão centralizadas todas as informações relacionadas ao modo batalha. Ao acessá-la, o usuário encontra 2 botões em formato de Card. O primeiro leva a página de resultados obtidos de um modo geral, enquanto o botão seguinte encaminha o estudante para a tela de histórico de batalhas. Além disso, nessa tela o usuário “organiza” sua próxima batalha, podendo desafiar um colega para uma batalha ao vivo ou realizada em momentos separados. Após escolher o competidor que deseja desafiar, o estudante deve definir a disciplina que será o tema da batalha. Após essa etapa, ele retorna a página de organização da batalha, podendo ainda definir o tipo de batalha que será realizada e o tempo de duração da batalha.
Tela de Seleção de Perguntas
Essa tela foi dividida em duas etapas, com vistas a reduzir a carga cognitiva para o usuário. Considerando que a empresa possui como público-alvo estudantes de pré-vestibular e estudantes com dificuldade em determinada disciplina, é importante que o Quiz possa ser realizado de acordo com as disciplinas de escolha do aluno, seja porque é a disciplina que precisa melhorar o rendimento, ou porque possui maior peso para o curso que deseja cursar. Após selecionar a disciplina, o aluno pode selecionar assuntos específicos da disciplina. Por exemplo, suponhamos que ele teve aula de história durante a semana e o tema foi a Primeira Guerra Mundial. Essa funcionalidade seria útil para treinar os conhecimentos relacionados à disciplina estudada.
Tela de Batalha
Nesta tela é possível visualizar o próprio desempenho (com as perguntas que acertou ou errou ao longo da competição), acompanhar o desempenho do oponente, visualizar o quão perto a batalha está do fim (tanto pelo número da perguntas, quanto pela barra de progresso), além, é claro, de visualizar a pergunta e as opções referentes a questão. Após enviar a resposta, um modal se abre informando o resultado, seja ele positivo ou negativo. Na página a seguir, é possivel visualizar a tela de modo batalha com as diferentes variações de modal - para quando o aluno acerta/erra uma questão, ou quando vence/perde uma batalha.
Tela de Batalha - Variações de Modal
Tela de Resultados
Na tela de resultados, o usuário pode visualizar o desempenho de forma aprofundada. É possível ver os resultados do mês, ou de modo geral. O estudante é informado de quantas questões já respondeu (o volume de questões pode incentivar o estudante), quantos Quizzes já respondeu e quantas batalhas já venceu. É possível ainda, visualizar o desempenho geral nos Quizzes, uma vez que na página é informado o percentual de acertos de um modo geral. Além disso, é ainda possível visualizar os resultados por disciplina, com o percentual de acertos e a quantidade total de questões resolvidas.
Modo Batalha em Jogo Educacional
Criando uma experiência de quiz gamificada para promover o engajamento em batalhas educacionais.
Equipe
Rafael Moraes Hilario
Ano
2025
Este projeto foi desenvolvido como parte de um case prático para um processo seletivo. O desafio consistia em criar o protótipo do módulo "Modo Batalha" de um jogo educacional, no qual dois alunos competem em quizzes de forma síncrona ou assíncrona. O objetivo era desenvolver uma experiência gamificada, intuitiva e acessível. A solução apresentada deveria incluir: tela de início, seleção de perguntas, a tela da batalha, tela de resultados e histórico de batalhas.
Minha atuação
Fui responsável por todo o processo de design, desde a pesquisa até a criação das interfaces. Estruturei uma solução que garante uma experiência fluida e acessível para os alunos, aplicando princípios de gamificação, usabilidade e acessibilidade para maximizar o engajamento e a clareza nas interações durante as batalhas.
Pesquisa de usuário
Design de experiência de Usuário
Design de Interface
Pesquisa
Por se tratar de um projeto fictício para um case técnico, a pesquisa foi baseada em dados e diretrizes secundárias, fruto de pesquisas primárias executadas por outros pesquisadores e benchmarking de soluções existentes no mercado.
No que diz respeito a acessibilidade, optei por seguir as diretrizes da WCAG, que propõe uma série de orientações para o desenvolvimento de interfaces acessíveis, incluindo contraste mínimo de 4,5:1 e fonte mínima de 16px. Além disso, a acessibilidade também foi considerada para incluir questões relacionadas a neurodivergências. Nesse sentido, evitei utilizar contagem de tempo (que pode ter um efeito negativo nos usuários) e evitei o uso de elementos muito complexos ou dispersivos, que poderiam tirar o foco do usuário.
Considerando práticas de outros aplicativos educacionais, como o Duolingo, também optei por incluir mensagens e feedbacks cuidadosos para manter o interesse dos estudantes, incentivando-os mesmo no erro. Além disso, a visualização do "sucesso" em outras batalhas, a possibilidade do jogo em dupla e o acumulo de pontos contribuem para o engajamento do estudante na plataforma idealizada.
Rabiscoframe
Considerando que as telas que seriam criadas haviam sido definidas no escopo do case, optei por criar rabiscoframes de cada tela que deveria ser desenvolvida. Essa etapa foi essencial para explorar rapidamente soluções de layout e fluxo de navegação, antes de evoluir para wireframes mais refinados e a interface final.
Identidade visual
Tipografia
Inter
A fonte Inter é uma sans-serif popular, amplamente utilizada em aplicativos e interfaces digitais devido à sua legibilidade, versatilidade e natureza open-source.
Paleta de cores
#291433
#6A298A
#FAF0FF
#A350CC
#FFFFFF
Solução Final
Telas de início
Nessa tela estão centralizadas todas as informações relacionadas ao modo batalha. Ao acessá-la, o usuário encontra 2 botões em formato de Card. O primeiro leva a página de resultados obtidos de um modo geral, enquanto o botão seguinte encaminha o estudante para a tela de histórico de batalhas. Além disso, nessa tela o usuário “organiza” sua próxima batalha, podendo desafiar um colega para uma batalha ao vivo ou realizada em momentos separados. Após escolher o competidor que deseja desafiar, o estudante deve definir a disciplina que será o tema da batalha. Após essa etapa, ele retorna a página de organização da batalha, podendo ainda definir o tipo de batalha que será realizada e o tempo de duração da batalha.
Tela de Seleção de Perguntas
Essa tela foi dividida em duas etapas, com vistas a reduzir a carga cognitiva para o usuário. Considerando que a empresa possui como público-alvo estudantes de pré-vestibular e estudantes com dificuldade em determinada disciplina, é importante que o Quiz possa ser realizado de acordo com as disciplinas de escolha do aluno, seja porque é a disciplina que precisa melhorar o rendimento, ou porque possui maior peso para o curso que deseja cursar. Após selecionar a disciplina, o aluno pode selecionar assuntos específicos da disciplina. Por exemplo, suponhamos que ele teve aula de história durante a semana e o tema foi a Primeira Guerra Mundial. Essa funcionalidade seria útil para treinar os conhecimentos relacionados à disciplina estudada.
Tela de Batalha
Nesta tela é possível visualizar o próprio desempenho (com as perguntas que acertou ou errou ao longo da competição), acompanhar o desempenho do oponente, visualizar o quão perto a batalha está do fim (tanto pelo número da perguntas, quanto pela barra de progresso), além, é claro, de visualizar a pergunta e as opções referentes a questão. Após enviar a resposta, um modal se abre informando o resultado, seja ele positivo ou negativo. Na página a seguir, é possivel visualizar a tela de modo batalha com as diferentes variações de modal - para quando o aluno acerta/erra uma questão, ou quando vence/perde uma batalha.
Tela de Batalha - Variações de Modal
Tela de Resultados
Na tela de resultados, o usuário pode visualizar o desempenho de forma aprofundada. É possível ver os resultados do mês, ou de modo geral. O estudante é informado de quantas questões já respondeu (o volume de questões pode incentivar o estudante), quantos Quizzes já respondeu e quantas batalhas já venceu. É possível ainda, visualizar o desempenho geral nos Quizzes, uma vez que na página é informado o percentual de acertos de um modo geral. Além disso, é ainda possível visualizar os resultados por disciplina, com o percentual de acertos e a quantidade total de questões resolvidas.
Modo Batalha em Jogo Educacional
Criando uma experiência de quiz gamificada para promover o engajamento em batalhas educacionais.
Equipe
Rafael Moraes Hilario
Ano
2025
Este projeto foi desenvolvido como parte de um case prático para um processo seletivo. O desafio consistia em criar o protótipo do módulo "Modo Batalha" de um jogo educacional, no qual dois alunos competem em quizzes de forma síncrona ou assíncrona. O objetivo era desenvolver uma experiência gamificada, intuitiva e acessível. A solução apresentada deveria incluir: tela de início, seleção de perguntas, a tela da batalha, tela de resultados e histórico de batalhas.
Minha atuação
Fui responsável por todo o processo de design, desde a pesquisa até a criação das interfaces. Estruturei uma solução que garante uma experiência fluida e acessível para os alunos, aplicando princípios de gamificação, usabilidade e acessibilidade para maximizar o engajamento e a clareza nas interações durante as batalhas.
Pesquisa de
usuário
Design de experiência do Usuário
Design de Interface
Pesquisa
Por se tratar de um projeto fictício para um case técnico, a pesquisa foi baseada em dados e diretrizes secundárias, fruto de pesquisas primárias executadas por outros pesquisadores e benchmarking de soluções existentes no mercado.
No que diz respeito a acessibilidade, optei por seguir as diretrizes da WCAG, que propõe uma série de orientações para o desenvolvimento de interfaces acessíveis, incluindo contraste mínimo de 4,5:1 e fonte mínima de 16px. Além disso, a acessibilidade também foi considerada para incluir questões relacionadas a neurodivergências. Nesse sentido, evitei utilizar contagem de tempo (que pode ter um efeito negativo nos usuários) e evitei o uso de elementos muito complexos ou dispersivos, que poderiam tirar o foco do usuário.
Considerando práticas de outros aplicativos educacionais, como o Duolingo, também optei por incluir mensagens e feedbacks cuidadosos para manter o interesse dos estudantes, incentivando-os mesmo no erro. Além disso, a visualização do "sucesso" em outras batalhas, a possibilidade do jogo em dupla e o acumulo de pontos contribuem para o engajamento do estudante na plataforma idealizada.
Rabiscoframe
Considerando que as telas que seriam criadas haviam sido definidas no escopo do case, optei por criar rabiscoframes de cada tela que deveria ser desenvolvida. Essa etapa foi essencial para explorar rapidamente soluções de layout e fluxo de navegação, antes de evoluir para wireframes mais refinados e a interface final.
Identidade Visual
Tipografia
Inter
A fonte Inter é uma sans-serif popular, amplamente utilizada em aplicativos e interfaces digitais devido à sua legibilidade, versatilidade e natureza open-source.
Paleta de cores
#291433
#6A298A
#FAF0FF
#A350CC
#FFFFFF
Solução final
Telas de início
Nessa tela estão centralizadas todas as informações relacionadas ao modo batalha. Ao acessá-la, o usuário encontra 2 botões em formato de Card. O primeiro leva a página de resultados obtidos de um modo geral, enquanto o botão seguinte encaminha o estudante para a tela de histórico de batalhas. Além disso, nessa tela o usuário “organiza” sua próxima batalha, podendo desafiar um colega para uma batalha ao vivo ou realizada em momentos separados. Após escolher o competidor que deseja desafiar, o estudante deve definir a disciplina que será o tema da batalha. Após essa etapa, ele retorna a página de organização da batalha, podendo ainda definir o tipo de batalha que será realizada e o tempo de duração da batalha.
Tela de Seleção de Perguntas
Essa tela foi dividida em duas etapas, com vistas a reduzir a carga cognitiva para o usuário. Considerando que a empresa possui como público-alvo estudantes de pré-vestibular e estudantes com dificuldade em determinada disciplina, é importante que o Quiz possa ser realizado de acordo com as disciplinas de escolha do aluno, seja porque é a disciplina que precisa melhorar o rendimento, ou porque possui maior peso para o curso que deseja cursar. Após selecionar a disciplina, o aluno pode selecionar assuntos específicos da disciplina. Por exemplo, suponhamos que ele teve aula de história durante a semana e o tema foi a Primeira Guerra Mundial. Essa funcionalidade seria útil para treinar os conhecimentos relacionados à disciplina estudada.
Tela de Batalha
Nesta tela é possível visualizar o próprio desempenho (com as perguntas que acertou ou errou ao longo da competição), acompanhar o desempenho do oponente, visualizar o quão perto a batalha está do fim (tanto pelo número da perguntas, quanto pela barra de progresso), além, é claro, de visualizar a pergunta e as opções referentes a questão. Após enviar a resposta, um modal se abre informando o resultado, seja ele positivo ou negativo. Na página a seguir, é possivel visualizar a tela de modo batalha com as diferentes variações de modal - para quando o aluno acerta/erra uma questão, ou quando vence/perde uma batalha.
Tela de Batalha - Variações de Modal
Tela de Resultados
Na tela de resultados, o usuário pode visualizar o desempenho de forma aprofundada. É possível ver os resultados do mês, ou de modo geral. O estudante é informado de quantas questões já respondeu (o volume de questões pode incentivar o estudante), quantos Quizzes já respondeu e quantas batalhas já venceu. É possível ainda, visualizar o desempenho geral nos Quizzes, uma vez que na página é informado o percentual de acertos de um modo geral. Além disso, é ainda possível visualizar os resultados por disciplina, com o percentual de acertos e a quantidade total de questões resolvidas.
Rafael Moraes © 2025. Todos os direitos reservados.