IOASYS CAMP — 3ª EDIÇÃO

Mundo Diverso — Abordando diversidade com crianças

Como desenvolvemos uma solução em ensino de diversidade para crianças de 6 a 10 anos durante a Ioasys Camp 2021.

Maria Teixeira
10 min readJun 5, 2021
Apresentação ilustrada da aplicação Mundo DIverso em fundo roxo, com a representação do aplicativo em um Iphone e com a representação da versão web em um Mac.

O problema

O nosso desafio

Nessa 3ª edição da Ioasys Camp, o tema proposto para a segunda fase do programa foi diversidade. Divididos em 10 equipes multidisciplinares tínhamos que dentro desse assunto delimitar um nicho para entender, descobrir problemas, ouvir usuários e oferecer soluções inovadoras e viáveis tanto tecnicamente quanto a nível de mercado em um prazo de 3 semanas.

No mesmo dia em que foi dada a largada para essa fase, a nossa Equipe 007 começou a pesquisar possíveis oportunidades e mercados que poderiam ser explorados. Já com as mentes mais alinhadas, realizamos uma atividade de brainstorming e votação no Miro.

A equipe optou por seguir pelo desafio de ajudar adultos na conversa sobre temas de diversidade com crianças por ser um tópico com grandes possibilidades e problemas para solucionar.

“Como ajudar educadores e responsáveis na educação de crianças sobre temas de diversidade?”

O Product Discovery

Matriz CSD

A partir da nossa pesquisa inicial, construímos uma matriz CSD para nortear as nossas hipóteses sobre o problema. Ela também auxiliou na criação das protopersonas que queríamos investigar e validar durante as pesquisas quantitativas e qualitativas.

Quadro explicativo da nossa matriz de certezas, suposições e dúvidas, com divisão em três colunas: azul para certezas, roxa para suposições e cinza para dúvidas. O quadro acompanha uma ilustração de dois personagens criados no Mundo Diverso. O primeiro, um personagem de pele preta, cabelo afro e cadeirante. O segundo, um personagem branco, cego, portando um óculos e bengala e uma blusa com a representação da bandeira LGBT.
Nossa matriz CSD

Pesquisa quantitativa

Divulgamos um formulário online para recolher respostas direcionadas para responsáveis e profissionais da educação infantil sobre as dúvidas e suposições que foram levantadas pela equipe.

Obtivemos um total de 44 respostas, entre elas 13 respostas de responsáveis e 14 de educadores.

Descobrimos que a grande maioria dos responsáveis e a totalidade desses educadores já abordam o temas sobre diversidade com as suas crianças e que elas se mostram interessadas e fazem mais perguntas sobre o assunto.

Já a maioria dos responsáveis que não falam sobre diversidade com as crianças dizem não achar que elas têm idade suficiente para entender certas questões. O resto afirma que até gostaria de falar mas não sabem como.

Quadro explicativo sobre a pesquisa quantitativa realizada no projeto. Do lado esquerdo, estão os dados referentes as respostas dadas pelos 13 responsáveis participantes, representado pela cor roxa com a imagem de uma mãe e sua filha abaixo e as porcentagens das respostas acima. Do lado direito, estão os dados referentes as respostas dadas pelos 14 educadores, representado pela cor azul com a imagem de uma professora abaixo e as porcentagens das respostas acima.
Resultados da pesquisa quantitativa

Pesquisa qualitativa

Nós também pudemos entrevistar 2 profissionais da área de educação e aprofundar nas dúvidas que foram geradas na Matriz CSD.

Descobrimos pelo relato dos entrevistados que as crianças são naturalmente curiosas, ainda mais quando estimuladas a pensar sobre um assunto através de histórias e músicas e que estando em um ambiente com muitas pessoas diferentes delas, como por exemplo na escola, elas se sentem mais abertas a perguntar e entender sobre essas diferenças.

Quadro explicativo com as falas retiradas das duas entrevistas realizadas com educadoras infantis sobre diversidade com crianças. O quadro também conta com uma imagem ilustrativa de quatro crianças escutando atentamente à professora em aula.
Resultados da pesquisa qualitativa

Os nossos usuários

Com as descobertas feitas e analisadas, decidimos focar nossa solução para os responsáveis e suas crianças.

A Carla e o João representam então as nossas personas, as pessoas para as quais nós queremos entregar valor. A Carla quer que o João aprenda sempre a respeitar as individualidades das pessoas e o João queria poder se enxergar mais nos seus filmes e desenhos preferidos.

Quadro explicativo que mostra as nossas personas Carla e João, estando a Carla do lado esquerdo do quadro e o João do lado direito do quadro. As informações referentes a Carla são representadas pela cor roxa e as referentes ao João pela cor azul.
Personas Carla (à esquerda) e João (à direita).

A ideação

Todos os membros da equipe trabalharam juntos no Miro na etapa de ideação do projeto, trazendo sempre cada um a sua visão e as suas ideias para enriquecer o debate. Utilizamos diversas ferramentas de ideação para definir a nossa solução para a Carla e o João.

Usuários, necessidades e insights

Pensando em nossas personas e no perfil geral do público que queríamos alcançar, imaginamos situações as quais elas podem estar expostas, suas dores, tarefas e necessidades e pensamos como poderíamos ajudá-las.

Quadro retirado da plataforma Miro, com anotações da discussão entre os membros da equipe durante a etapa de ideação. O quadro contém post-its amarelos, laranjas, azuis, roxos e vermelhos e eles estão organizados em grupos referentes as ideias que foram sendo geradas.

Crazy 8s e Rabiscoframes

Usamos a técnica do Crazy 8s e cada um pensou em 8 soluções diferentes em 8 minutos para as dores e tarefas que estávamos analisando. Nesse momento, o nosso foco estava em gerar ideias sem ainda a preocupação da viabilidade, tanto técnica quanto de mercado.

Conjunto de fotos dos rascunhos feitos pelos membros da equipe durante a etapa de ideação. Esses rascunhos contém desenhos de telas feitos em sua maioria à mão com papel e caneta.

Galeria de ideias e votação

Passamos um tempo categorizando, discutindo e aprimorando as propostas de cada um e terminamos com a organização de uma galeria de diversas soluções. Após cada um apresentar, argumentar e tirar dúvidas sobre as suas ideias nós votamos naquelas que mais havíamos gostado.

As categorias Conteúdo e Jogos/Atividades receberam mais votos e dentro delas, o box de assinaturas e criação de personagens foram as com mais destaque. Por fim, definimos que a criação de personagens seria o nosso foco principal e que o box de assinaturas poderia ser uma oportunidade futura após o MVP.

Quadro retirado do Miro, referente a etapa de votação dos rascunhos e ideias discutidos anteriormente na etapa de ideação. No topo do quadro, estão as imagens dos rascunhos agrupados por tipos de ideia e na parte inferior do quadro estão os resumos escritos em tópicos das ideias já pré-selecionadas dos rascunhos mais votados.

Wireframes e fluxo de usuário

Ainda no Miro, montamos alguns fluxos e wireframes bem simples apenas para termos uma organização visual mais clara de como poderia ser o layout e estrutura das aplicações mobile e web.

Quadro retirado do Miro, com a parte superior composta pelos rascunhos dos fluxos entre telas para versões mobile e web, representados por post-its amarelos. Abaixo, encontram-se wireframes de baixa qualidade feitos dentro do próprio Miro, apenas para alinhar melhor todos os membros da equipe.

Média fidelidade

Com a solução e os fluxos de interação iniciais definidos, o processo de construir visualmente as interfaces no Figma começou.

Montamos um protótipo navegável para a versão mobile e para versão web, além de um teste de usabilidade no Useberry para que pudéssemos avaliar o conceito e o fluxo com alguns usuários antes de iniciar a construção do guia de estilos da marca, da alta fidelidade e eventualmente do desenvolvimento do iOS, front-end e back-end.

Imagem ilustrativa do protótipo de média fidelidade feito no Figma. Apresentam-se oito telas da versão mobile, sendo elas da esquerda para a direita: splash screen com fundo roxo e logo do Mundo Diverso; tela para entrar na conta com campos para e-mail, senha e botões; tela inicial com alguns artigos e menu de navegação; tela de criar amigo com partes do corpo; tela de mundo; tela de galeria; tela de conteúdo em vídeo e tela de configuração da conta.
Protótipo em média fidelidade da versão mobile
Imagem ilustrativa do protótipo de média fidelidade feito no Figma. Apresentam-se sete telas da versão web, sendo elas da esquerda para a direita: página inicial com artigos, menu e botão CTA; página para entrar na conta ou cadastrar-se; página de cadastro; página de configuração de conta; página para criar novo amigo; página de mundo e página de galeria.
Protótipo em média fidelidade da versão web

Tivemos a preocupação de querer testar o protótipo tanto com responsáveis quanto com crianças, mas infelizmente os contatos que conseguimos durante a pesquisa quantitativa não nos deram retorno dentro do prazo que tínhamos e tivemos que seguir com a construção da interface sem realizar esses testes.

A solução

Proposta de valor

A nossa proposta é levar conteúdos sobre diversidade que estimulem a curiosidade do João e seu senso de representatividade e que ajudem a Carla a abordar assuntos variados com seu filho de forma lúdica e divertida.

Entregando valor para a Carla

No Mundo Diverso, a Carla tem acesso a uma curadoria de artigos sobre diversidade para entender mais sobre vários temas que ela pode querer explicar para o João.

Imagem ilustrativa dos protótipos de alta fidelidade em versões web e mobile aplicados em mockups de um notebook e um smartphone. O notebook está do lado esquerdo apresentando a página inicial da versão web e o smartphone do lado direito apresentado a tela inicial da versão mobile.
Artigos sobre diversidade no Mundo Diverso web (à esquerda) e mobile (à direita).

Entregando valor para o João

Já o nosso João pode montar vários amigos, cada um podendo ter diferentes cores de pele, tipos de cabelos ou acessórios de cabeça com significados especiais. Também podem ter várias camisas que apresentam características do novo amigo, assim como várias partes inferiores. Quando o João estiver satisfeito ele pode finalizar a montagem.

O seu novo amigo vai aparecer no seu Mundo Diverso onde vários outros personagens também vão estar. Dependendo das partes escolhidas na montagem, o João pode clicar em um amigo e descobrir conteúdos em vídeo específicos sobre o personagem que ele criou.

Imagem em gif animado apresentando o fluxo de criação de um novo amigo na versão mobile do Mundo Diverso.
Montando um amigo e descobrindo conteúdo em vídeo

A curiosidade do João o levou a montar seu amigo daquele jeito e o Mundo Diverso oferece uma forma divertida para que ele entenda mais sobre as características que ele escolheu na montagem.

Três telas representativas do protótipo em versão mobile aplicadas em smartphones com mockups de visão frontal. À esquerda está a tela de criar novo amigo, ao centro à tela de mundo e à direita a tela de conteúdo em vídeo.
Montando um amigo (à esquerda), Mundo (ao centro) e conteúdo em vídeo (à direita) na versão mobile.
Três telas representativas do protótipo em versão web aplicadas em notebooks com mockups de visão frontal. À esquerda está a página de criar novo amigo, ao centro à página de mundo e à direita a página com o pop-up de conteúdo em vídeo.
Montando um amigo (à esquerda), Mundo (ao centro) e conteúdo em vídeo (à direita) na versão web.

A marca

O Mundo Diverso tem como proposta visual elementos, cores e tipografia que se adequem ao universo infantil. Queremos chamar a atenção da criança tanto para o jogo quanto para os conteúdos que estão sendo oferecidos.

Queremos que o Mundo Diverso seja o mundo do João, da Ana, do Luís, da Camila… O Mundo Diverso é para todo mundo e com todas as suas diferenças!

Aplicação do logo do Mundo Diverso em um fundo roxo. O logo é composto de uma ilustração de um globo terrestre com três carinhas de crianças. A criança à esquerda tem pele branca com cabelo loiro, a criança ao centro tem pele preta clara e cabelos castanhos e a criança à direita tem pele preta retinta e cabelos pretos. Abaixo da ilustração encontra-se o nome Mundo Diverso.
Logo e identidade da marca Mundo Diverso

Guia de estilos

Para que fosse possível construir tanto os protótipos quanto o código da aplicação, todos os assets, botões, formulários, cores, textos e componentes em geral foram projetados e organizados em um guia de estilos no Figma.

Todas as decisões de design foram baseadas em boas práticas para produtos digitais voltadas para o público infantil, além da preocupação em garantir uma boa acessibilidade das cores, ícones e a fácil legibilidade dos textos para pessoas com baixa visão.

Conjunto organizado do guia de estilos feito no Figma. Na imagem estão as variações dos elementos de input, botões, navegadores, cards, cores, tipografia, iconografia e aplicação do logo.
Guia de estilos para a aplicação Mundo Diverso

Montando um amigo

A nossa entrega de maior valor nesse projeto é a funcionalidade de montar um amigo.

É a partir dela que a própria criança dá abertura para que o seu responsável possa identificar as características que ela escolheu na montagem e conversar sobre os temas que são apresentados com esse amigo.

Foram desenhados para o MVP cinco tons de pele, três tipos de cabelo com quatro opções de cor, além da opção do hijab ou de deixar o personagem sem cabelo algum, três camisas e três partes inferiores.

Com esses assets foi possível abordar temas relacionados à questões racias, culturais, sociais, religiosas, deficiências motoras, deficiências mentais, câncer infantil e LGBTQIA+.

Conjunto das ilustrações criadas no Figma. São apresentados acima cada asset necessário para a construção do personagem e suas variações, sendo elas de pele, cabelo, parte superior do corpo e parte inferior do corpo. Abaixo estão os cenários criados para a tela de mundo e a aplicação de alguns personagens.
Componentização dos assets usados para a montagem de um amigo

Tecnologias de desenvolvimento

Para desenvolver o Mundo Diverso, no iOS nós escolhemos o Swift, o X-Code e o Cocoapods por serem utilizados no desenvolvimento nativo dos apps para esse sistema.

No front-end e no back-end nós escolhemos tecnologias que fossem flexíveis no uso de vários pacotes de software ganhando assim produtividade e a possibilidade da utilização de ambientes escaláveis, que era o que nós precisávamos para desenvolver o projeto de forma eficiente em um período curto de tempo.

Ilustração representando as tecnologias de Front-end , iOS e Back-end usadas no desenvolvimento das aplicações do Mundo Diverso. À esquerda estão representadas as tecnologias de front-end, ao centro as de iOS e à direita as de back-end. Cada tecnologia é representada pelo seu logo.
Tecnologias de Front-end (à esquerda), iOS (ao centro) e Back-end (à direita) usadas no desenvolvimento.

O negócio

O modelo de negócio

Pensamos o modelo de negócio do Mundo Diverso também de maneira escalável, onde no momento atual estamos no MVP com o oferecimento gratuito do jogo e da curadoria de conteúdos terceirizados.

Queremos eventualmente rentabilizar o negócio com a lógica de jogo freemium e pagamento por skins extras e no futuro a criação de um conteúdo próprio da plataforma disponibilizada por assinatura, inicialmente apenas de forma online, até a criação de conteúdo físico como livros e mais jogos que podem ser enviados mensalmente para a casa do assinante.

E com o tempo pensar em como levar o Mundo Diverso para dentro das escolas.

Gráfico que ilustra o plano de negócio do Mundo Diverso com eixos de investimento e tempo. O gráfico é dividido em cinco estágios. Cada estágio é representado por um tom de azul a roxo e acompanhado da evolução do logo do Mundo Diverso. O primeiro estágio é azul claro e apresenta apenas o globo terrestre da logo, até chegar ao quinto estágio, sendo ele roxo escuro com o logo completo.
Modelo de negócio planejado para o Mundo Diverso

Mercado concorrente

Nossos maiores concorrentes nacionais no momento são a Leiturinha, o Clube Dentro da História e o PKXD. Os dois primeiros oferecem planos de assinatura para os responsáveis que querem receber em casa livros infantis sobre temas variados e o último é um jogo da Playkids onde as crianças podem montar personagens mega customizáveis.

Ilustração com três imagens e logos de empresas concorrentes ao Mundo Diverso. À esquerda encontra-se a imagem do kit de livros fornecido pela empresa Leiturinha, ao centro o box de conteúdo fornecido pela empresa Clube Dentro da História e à direita uma ilustração dos personagens do jogo PKXD da empresa Playkids.
Concorrentes diretos do Mundo Diverso, Leiturinha (à esquerda), Clube Dentro da História (ao centro) e PKXD (à direita).

Nosso diferencial

Mesmo com concorrentes tão fortes, nós apresentamos um super diferencial: o foco total em diversidade!

O Mundo Diverso quer entregar conteúdos que ajudem os responsáveis a entender e tratar temas que eles julgam serem mais delicados e mostrar para as crianças todas as diferenças que existem entre as pessoas, inclusive nelas mesmas.

Vencemos a Ioasys Camp!

Depois de 3 semanas intensas de muito trabalho desenvolvendo o Mundo Diverso, a nossa equipe ficou muito feliz quando foi anunciado que o Mundo Diverso foi a solução vencedora dessa 3ª Edição da Ioasys Camp!

Imagem comemorativa de anúncio da equipe vencedora fornecida pela Ioasys. A imagem conta com fundo preto, as fotos de rosto de cada participante da equipe, assim como seus nomes, o nome da equipe e o nome da aplicação. Acima fica uma estrela com o título Projeto Vencedor ao lado.

Agradecimentos

Como equipe aprendemos muito sobre a área de conhecimento de cada um e tomamos consciência da importância de todos na entrega de um produto que realmente se propõe a resolver um problema baseado em pesquisas, análise e colaboração.

Muito obrigada a

por nos proporcionar a chance de construir o Mundo Diverso e por ter escolhido a nossa solução como a vencedora desse Camp e também por todo o suporte dado pela nossa mentora Fernanda Lanza!

Próximos passos

O Mundo Diverso ainda precisa passar por muitos ajustes, mas o MVP já cumpre o seu objetivo: levar conteúdo sobre diversidade para responsáveis e crianças.

Queremos colocar esse MVP na mão de usuários reais para testar as nossas interfaces e continuar aperfeiçoando a solução, desde o design e desenvolvimento até as estratégias de negócio.

Caso deseje entrar em contato com algum dos integrantes da Equipe 007: Permissão para codar, aqui seguem nossas redes sociais:

--

--