Desafio

Durante o Hackathon do Programa de Formação do Grupo FCamara, os candidatos aprovados para a última etapa do processo seletivo foram dividos em times (squads) e convidados a participar de um desafio com uma problemática e uma proposta específica.

O time foi formado pelos seguintes membros:

  • Allan Ponce (UX Designer)
  • Moema Baião (UX Designer)
  • Jeorge Atanazio (Desenvolvedor)
  • Vasco Monteiro Neto (Desenvolvedor)
  • Wesley Victor (Desenvolvedor)

A problemática do desafio foi a seguinte: “Nós sabemos o quanto é complicado para os pais poderem comprar material escolar para seus filhos. Os preços aumentam de semestre para semestre. Principalmente quando falamos de educação pública, onde a dificuldade é ainda maior e vem por diversos fatores…”

A proposta para solucionar a problemática do desafio foi a criação de uma aplicação onde os pais irão cadastrar seus filhos que estudam em escolas estaduais e municipais, e também a lista de material escolar que precisam e não tem condições de comprar. Além disso, usuários avulsos e anônimos podem acessar, buscar a escola com base em alguns critérios de busca, visualizar a necessidade dos alunos carentes e fazer a doação dos itens que um determinado aluno esteja precisando.

Foram exigidos os seguintes itens para a entrega do projeto:

  • Uma aplicação web responsiva ou um aplicativo;
  • Mínimo de 3 telas do projeto, sendo protótipo e desenvolvimento;
  • Liberdade de uso de tecnologia que possuímos mais afinidade;
  • Criatividade e pensamento fora da caixa para trazer a melhor solução.

Design Thinking

Para iniciar a resolução do desafio, utilizamos o Design Thinking, que é uma metodologia para solução de problemas, a qual envolve processos para entender e definir o negócio, os problemas, as necessidades, as oportunidades e as propostas de solução.

Existem vários modelos de Design Thinking, entre eles o Diamante Duplo do Design Council (que envolve os processos de Descoberta, Definição, Desenvolvimento e Entrega) e o Design Thinking da Stanford Design School (que envolve os processos de Empatia, Definição, Ideação, Prototipação e Teste).

Ambos os modelos possuem diversas características em comum:

  • Centralidade no usuário, foco em empatia;
  • Afirmação dos problemas é feita pelos usuários;
  • Ideação;
  • Prototipação e iteração;
  • Entrega do design.

A partir desses modelos, podemos estabelecer as etapas para o desenvolvimento da solução.

Modelo de Negócios

Um Modelo de Negócios descreve a lógica de criação, entrega e captura de valor por parte de uma organização. Essa é a definição que consta no livro Business Model Generation de Alexander Osterwalder e Yves Pigneur (com a ajuda de mais de 470 praticantes em 45 países).

Esse livro é referência quando se trata da elaboração de um Modelo de Negócios, e, como eu possuo o livro e já tive atividades anteriores em que precisei elaborar alguns Modelos de Negócios, resolvi agilizar e criar um Quadro do Modelo de Negócios antes do desafio iniciar oficialmente.

O Quadro de Modelo de Negócios, desenvolvido por Alexander Osterwalder, divide o negócio em 9 componentes:

  1. Segmentos de Clientes (define os diferentes grupos de pessoas ou organizações que uma empresa busca alcançar e servir);
  2. Proposta de Valor (descreve o pacote de produtos e serviços que criam valor para um Segmento de Clientes específico);
  3. Canais (descreve como uma empresa se comunica e alcança seus Segmentos de Clientes para entregar uma Proposta de Valor);
  4. Relacionamento com Clientes (descreve os tipos de relação que uma empresa estabelece com Segmentos de Clientes específicos);
  5. Fontes de Receita (representa o dinheiro que uma empresa gera a partir de cada Segmento de Clientes);
  6. Recursos Principais (descreve os recursos mais importantes exigidos para fazer um Modelo de Negócios funcionar);
  7. Atividades-chave (descreve as ações mais importantes que uma empresa deve realizar para fazer seu Modelo de Negócios funcionar);
  8. Parcerias Principais (descreve a rede de fornecedores e os parceiros que põem o Modelo de Negócios para funcionar);
  9. Estrutura de Custo (descreve todos os custos envolvidos na operação de um Modelo de Negócios).

O Quadro de Modelo de Negócios criado para esse desafio foi o seguinte:

A partir disso, podemos entender e definir o negócio de forma ampla e estratégica, priorizando a viabilidade real de implementação da nossa solução para o negócio.

Pesquisa de Público-alvo e Usuário

Afinal, quem seriam os usuários da nossa plataforma? Já tínhamos uma noção, porém genérica: seriam os responsáveis pelos alunos, os próprios alunos e pessoas interessadas em doação, anônimas ou não.

No entanto, essas informações não eram suficientes para responder todos os nossos questionamentos, então decidimos elaborar uma pesquisa.

A pesquisa foi respondida por 24 usuários potenciais da plataforma, divididos em prováveis doadores e alunos que receberiam a doação.

Você pode acessar a pesquisa completa aqui.

Canvas de Ganhos, Dores e Tarefas

Através do resultado da pesquisa quantitativa fizemos um mapeamento sobre ganhos, dores e tarefas de pessoas relacionadas ao que nossa plataforma propõe entregar.

Mapa de Proposta de Valor

A proposta de valor nos ajuda a entender como os nossos serviços ajudariam o usuário a sanar as dificuldades no que diz respeito à doação de materiais.

Personas e Histórias de Usuários

Persona é um personagem fictício que representa características, dores e objetivos de um grupo de pessoas semelhantes. Ela é fundamental para que possamos entender melhor os usuários e criar soluções focadas nesses usuários, assim como nas suas dores, nos seus objetivos e nas suas histórias.

História de Usuário é uma frase fictícia que conta uma história do ponto de vista do usuário para inspirar e informar decisões de design. O modelo para criar essa frase é a seguinte: “Como (tipo de usuário), eu quero (ação) para (benefícios)”. Esse modelo nos ajuda a entender três aspectos: quem, o que e porquê.

Com base nas pesquisas, eu criei 4 personas diferentes: 2 personas representando os pais dos alunos e 2 personas representando os doadores. Essa divisão entre doadores e pais de alunos é fundamental, pois são grupos de pessoas com demandas diferentes entre si.

José e Sebastião representam os pais dos alunos, enquanto Carolina e Roberto representam os doadores. Cada um com características, dores, objetivos e histórias particulares.

A partir da definição das personas, podemos mapear as jornadas de usuários, que foi a próxima etapa desenvolvida.

Jornadas de Usuários

A jornada do usuário é uma série de experiências que o usuário tem quando interage com um produto. Ela é importante para entendermos as ações, as tarefas, os sentimentos e as oportunidades de melhoria na experiência dos usuários.

A partir da definição do Modelo de Negócios e das Personas, ficou claro que existem duas jornadas de usuários: a jornada do usuário para o pai do aluno e a jornada do usuário para o doador.

Com essa percepção, foram criadas as seguintes jornadas de usuários:

Análise Competitiva

Definidas as jornadas de usuários, foi debatido entre o grupo a necessidade de realizar uma análise competitiva para descobrir e entender o que outros possíveis competidores já estavam fazendo.

Fiz uma pesquisa por sites e aplicativos que oferecem uma plataforma de doação de materiais escolares, porém não encontrei. Minhas pesquisas resultaram em plataformas de doação em geral, nada específico sobre materiais escolares. No entanto, analisei as plataformas e duas delas me chamaram atenção: a Ribon e a Joyz.

A Ribon me atraiu devido a sua tela inicial, a qual apresenta um carrossel de imagens com histórias e um botão com chamada para ação em cada uma das imagens. Esse insight foi usado para criar a seção “Ajude quem mais precisa” da tela inicial da nossa plataforma.

Achei esse recurso importante, pois incentiva o doador a doar para escolas menos conhecidas, portanto menos procuradas, e que estão precisando mais de doações.

Além disso, achei interessante a barra de progressão das doações, a qual mostra a porcentagem concluída de cada história. Sugeri colocar isso no perfil de cada aluno, porém, isso será um provável recurso no futuro, fora do Produto Mínimo Viável, devido ao curto prazo que tínhamos para entregar o projeto.

Ainda analisando o Ribon, gostei da opção de compartilhar o aplicativo, porém, os membros do grupo me alertaram sobre isso ser uma característica de aplicativos e nós estávamos pensando em desenvolver um site responsivo, que não costuma ter essa funcionalidade. Então acabamos deixando isso como uma melhoria futura, fora do Produto Mínimo Viável.

Produto Mínimo Viável (Minimum Viable Product — MVP)

O grupo entrou em consenso que o Produto Mínimo Viável deveria atender os requisitos mínimos da proposta lançada no desafio do Hackathon. Tivemos brainstormings diários, às vezes mais de uma vez por dia, para tomar as decisões, promover sugestões e analisar a proposta elaborada pelo Grupo FCamara.

Com base nisso, o Produto Mínimo Viável deveria conter as seguintes funcionalidades:

  • Página inicial que permitisse o cadastro do aluno e o acesso do doador de maneira anônima/avulsa;
  • Página inicial que permitisse um rápido entendimento do funcionamento da plataforma;
  • Página inicial com lista de escolas pouco conhecidas e que estão com poucas doações;
  • Busca por escolas com possibilidade de escolher alguns filtros na busca;
  • Lista de alunos pertencentes a uma determinada escola;
  • Lista de materiais escolares requisitados por alunos, com a possibilidade de doar todos itens ou apenas alguns;
  • Entrega com opção de doador comprar e entregar por si mesmo ou através de uma loja parceira, incentivando aqueles doadores que não possuem tempo para fazer toda a logística;
  • Página de perfil do aluno com as informações inseridas no cadastro.

Definido os requisitos mínimos, partirmos para a criação de um protótipo de alta fidelidade.

Prototipação

Link para o arquivo no Figma — https://www.figma.com/file/FQN2INyOcoPp2GFsx3WeA2/Time-26

Link para o protótipo mobile no Figma — https://www.figma.com/proto/FQN2INyOcoPp2GFsx3WeA2/Time-26?node-id=254%3A0&scaling=min-zoom&page-id=254%3A0

Link para protótipo desktop no Figma — https://www.figma.com/proto/FQN2INyOcoPp2GFsx3WeA2/Time-26?node-id=254%3A145&scaling=min-zoom&page-id=254%3A145

Prototipação é a etapa de criação da interface em si. Optamos por criar um site com Design Responsivo (design que se adapta automaticamente à tela do dispositivo). Portanto, ficou definido que deveríamos criar uma interface para a versão mobile e outra para a versão desktop.

A partir disso, usamos a filosofia do Mobile First para nos orientar, ou seja, primeiro pensar nos dispositivos móveis para depois adaptar a interface aos dispositivos desktops.

Sugeri a utilização do Material Design, um Sistema de Design criado pelo Google e bastante difundido no design de interfaces, e acabamos utilizando-o como nosso guia.

A partir daí, eu e minha colega Moema (também UX Designer) fomos criando as telas, uma por uma, e apresentando aos desenvolvedores, para avaliação deles e sintonização do que eles realmente poderiam programar a tempo.

Eu fiquei responsável pelas telas da página inicial, do cadastro do aluno e das telas de busca de escolas e alunos, enquanto minha colega Moema ficou responsável pelas telas do perfil do aluno e da guia de estilo (style guide).

Enquanto desenvolvíamos a tela, lembrei de um conceito de que quanto maior o contraste de cores, maior a legibilidade dos elementos e, consequentemente, maior a acessibilidade para pessoas com problemas de visão.

Portanto, acabei mudando as cores do menu de navegação para um fundo branco com textos em preto e alguns elementos em roxo. Fiz um teste com um plugin do Figma para garantir que o contraste e a legibilidade estavam realmente melhores que a versão anterior e os resultados confirmaram isso, como pode ser visto nas imagens abaixo.

Guia de Estilo

O Guia de Estilo define padrões de elementos, tipografias e cores que são utilizados numa interface. Tínhamos em mente que deveria ser algo moderno, que representasse a busca por conhecimento e, simultaneamente, a conexão entre pessoas.

Esses valores condizem com um projeto que visa o engajamento social através da doação de materiais escolares. Com isso, a equipe concordou que a logo deveria simbolizar a solidariedade.

Você pode acessar a guia de estilo aqui

Conclusão

Finalizando o projeto, tivemos ideias de várias melhorias que gostaríamos de fazer no futuro, entre elas:

  • Anúncios de lojas parceiras;
  • Destaque para lojas que pagarem uma taxa;
  • Barra de progressão das doações;
  • Entrega feita diretamente pela loja parceira;
  • Cadastro de doadores;
  • Criação de Aplicativo.

Acreditamos que a plataforma possui um grande potencial, já que não encontramos outro negócio oferecendo doações de materiais escolares, apenas doações em geral.

Agradecemos a todos pela oportunidade. E se você gostou do projeto e tem alguma dúvida ou sugestão, sinta-se à vontade para compartilhar conosco!

UX Designer