Acesse o site: EducaLab.
-
O Projeto
-
Objetivo
-
Tema e mercado
-
Definição do usuário e Personas
-
Protótipos
-
Definição do produto
-
Implementação
Projeto desenvolvido no bootcamp da Laboratória - Brasil. O projeto consiste em desenvolver uma aplicação de uma rede social que seja web responsiva e onde pode-se ler e gravar dados.
-
Entender e resolver as necessidades dos usuários de forma criativa e assertiva.
-
Trabalhar em grupo e promover feedbacks constantes.
-
Definir como criar sua própria estrutura de dados e de que forma serão exibidos no produto.
-
A lógica do projeto foi implementada totalmente em JavaScript (ES6+), HTML e CSS.
-
Foi utilizada a biblioteca jQuery para manipulação de DOM.
-
Foi utilizado o framework Bootstrap v4 para elementos de layout e responsividade.
-
Código escrito seguindo o guia de estilos da Laboratória.
-
Esse ReadMe completo
-
Criação de conta (sign up)
-
Início de sessão (sign in)
-
Timeline - Publicações (criar, apagar, editar, filtrar público/privado)
-
Timeline - Likes (curtir e visualizar quantidade de curtidas)
-
Hacker Edition | Perfil (editar e ver)
-
Hacker Edition | Amigos (adicionar e deletar)
-
Hacker Edition | Publicações (compartilhar e comentar)
O tema foi escolhido a partir do entendimento que o contexto educacional pode se beneficiar de uma plataforma que contribua para a otimização das relações entre professor e alunos na busca por um aprendizado mais dinâmico e condizente com o nível de exigência tecnológica dos alunos e da sociedade.
Foram levantadas as iniciativas já existentes, de forma a descobrir demandas ainda não atendidas. Alguns dos sites (brasileiros e estrangeiros) encontrados cujo foco é o da educação foram: Edmodo, Schoology, Teamie e Passei Direto.
Algumas dessas opções estabelecem relações com as escolas e oferecem ferramentas de gestão de salas de aula, comunicação entre professor e aluno a qualquer momento e funcionalidades para avaliação dos alunos. Outras, focam no compartilhamento de conteúdos entre estudantes de quaisquer níveis e instituições e as dúvidas e discussões são organizadas por áreas de conhecimento.
A partir do estudo das soluções mapeadas percebeu-se que a organização, a responsabilização e o autoaprendizado, dimensões importantes para estudantes que logo entrarão no mercado de trabalho, não são estimuladas nos alunos.
Dessa forma, a escolha do grupo foi a de trabalhar o desenvolvimento da aplicação de forma a atender esse contexto ainda negligenciado pelas redes sociais existentes.
O perfil de usuário escolhido foi o de alunos e professores do ensino médio, principalmente de escolas de centros urbanos e escolas particulares.
A escolha foi feita considerando a idade mínima necessária para que os alunos possam se responsabilizar pelo próprio estudo e também que todos os alunos precisariam acessar a internet facilmente no computador ou celular.
A partir do usuários foram definidas duas personas - uma de um professor e outro de um aluno.
- Persona 1
- Persona 2
Protótipo com a primeira versão e a versão revisada: https://marvelapp.com/4h25586
O primeiro protótipo foi testado com potenciais usuários (professores e alunos do ensino médio ou de níveis próximos) a partir do roteiro abaixo:
Você é um aluno(a) de ensino médio e não pôde ir na aula no dia anterior, porém entrou em contato um amigo(a) de sala que lhe informou que o professor irá utilizar uma rede social para ajudar nos estudos.
Como não estava presente tentará sozinho(a) realizar algumas tarefas através do link que seu amigo(a) enviou.
Como professor tem o hábito de ler sites de educação. Nessas leituras conheceu um site que pode ajudar seus alunos a estudar. Será seu primeiro contato com o site e você precisará efetuar algumas tarefas.
-
Como esta é a sua primeira vez no site, por favor realize seu cadastro;
-
Uma vez cadastrado, realize seu login no site;
-
Faça uma postagem em modo privado (apenas amigos);
-
Encontre suas notificações e avisos.
Foi solicitado que os usuários respondessem sobre o nível de facilidade de realizar o protótipo e considerações sobre o layout. Também foram fornecidas informações sobre o produto para que fosse averiguada a sua relevância.
Informações fornecidas: O site será uma rede social com foco em promover a comunicação entre alunos e professores do ensino médio. Entre as funcionalidades que serão disponibilizadas, estão: postagem de tarefas, trabalhos e testes a serem realizados ou enviados pela própria rede; compartilhamento de fotos, vídeos e arquivos com conteúdos pertinentes às aulas; um calendário compartilhado e outro individual para organização de prazos e a possibilidade de colocar avisos para manter os prazos em dia; tanto alunos quanto professores poderão criar fóruns de discussão; os professores serão mediadores e poderão criar grupos específicos para cada sala.
Foram entrevistados potenciais alunos e uma professora.
Feedbacks:
-
Cadastro: dúvida se teria a opção de se cadastrar como professor ou aluno, considerou que essa opção era relevante para moderação das publicações;
-
Timeline: gostariam de visualizar a postagem em feeds de notícia (não ficou claro como a timeline foi apresentada - a professora achou mais relevante deixar os posts e interações restritos ao grupo da sala. Também gostariam de saber em qual sala/turma estão;
-
Post: o cadeado para optar pela privacidade do post não foi identificado por praticamente nenhum usuário;
-
Notificações: gostaram que quando clica-se em notificações elas permaneceram na mesma tela e sugeriram uma funcionalidade para horário das notificações;
-
Relevância do produto: todos consideraram relevante. A professora atribuiu essa relevância à possibilidade de whatsapp que a sobrecarrega com muitos grupos (um de cada turma) que a notifica fora do horário comercial.
Sobre o cadastro, foi informado que a opção de cadastro por professor ou aluno seria desenvolvida em uma próxima versão. Desta forma, a reorganização do protótipo ficou restrita à restruturação da timeline.
Mudanças do protótipo 1 para o 2:
- Post: opção de privacidade
- Timeline: feed de notícias
Após as alterações os usuários conseguiram identificar o select para alterar a privacidade e compreenderam a estrutura da timeline.
A interface é a apresentada nos protótipos (imagem abaixo), considerando as limitações de cada versão e pequenas melhoras possibilitadas com CSS.
A rede social EducaLab foi idealizada pensando em alunos e professores de ensino médio de escolas particulares dos centros urbanos. Além das funcionalidades básicas de uma rede social como postagem, adicionar amigos e visualizar timeline, a EducaLab também propõe funcionalidades específicas para o contexto educacional. São elas: criação de um ambiente específico para cada sala/turma, moderação do professor, possibilidade de realizar testes e demandar tarefas e organização de agenda e notificações.
Com essas funcionalidades pretende-se incentivar a responsabilidade e senso de organização nos alunos e facilitar a gestão da turma pelos professores, além de garantir uma dinâmica mais atraente e atual/tecnológica de aprendizagem.
Versões propostas - status atual: versão 0.0.2
0.0.1 - Permite criação de conta (sign up), início de sessão (sign in), visualizar a interagir a/com timeline a nível de publicações (criar, apagar, editar, filtrar público/privado).
0.02 - Permite interagir na timeline com likes (curtir e visualizar quantidade de curtidas) e no perfil (editar suas informações e buscar e visualizar perfil de outros).
0.0.3 - Permite adicionar e deletar amigos, compartilhar e comentar publicações (suas e de outras) e incluir mais informações no perfil
0.0.4 - Permite navegação em ambiente específico para cada sala/turma e moderação do professor.
0.0.5 - Possibilidade de realizar testes/avaliações e demandar tarefas na aplicação. Organização de agenda (da sala e de cada aluno) e habilitar notificações.
As histórias dos usuários foram desenvolvidas a partir das cinco épicas iniciais descritas abaixo, lembrando que nem todas as histórias foram abordadas na versão atual da aplicação.
ÉPICA I - “Como aluno(a) gostaria de me cadastrar ou logar na plataforma para acessar as funcionalidades.”
ÉPICA II - “Como aluno(a) gostaria de me cadastrar na plataforma para utilizar funcionalidades.”
ÉPICA III - “Como professor(a), quero criar um ambiente online onde os alunos interajam em formato de fórum deixando registradas suas opiniões, quero moderar este debate de forma saudável”
ÉPICA IV - "Como aluno(a) gostaria de ter um perfil completo com as minhas informações e foto"
ÉPICA V - "Como aluno(a) gostaria de me conectar com outros colegas e interagir com suas publicações."
Os testes HTML foram feitos quando finalizada a versão 0.0.1 já com elementos de estilo implementados.
Os usuários conseguiram acessar a rede social (cadastro e login) e utilizar as ferramentas disponíveis sem dificuldade (postar, curtir, editar e deletar posts). Tentaram acessar o menu da timeline para buscar outras funcionalidades e como esse não estava habilitado, gerou frustração. Da mesma forma que procuraram botão de logout e não encontraram.
Na versão 0.0.2 o menu foi habilitado, com opção de voltar para a timeline ou realizar o logout. Nas próximas versões a intenção é adicionar funcionalidades ao menu principal.
- HTML
Os arquivos HTML foram criados de acordo com cada uma das páginas (index/home, signup, signin, timeline, profile, search, otherprofile). Em todos foi utilizado HTML semântico de acordo com o conteúdo, sendo adicionados elementos não semânticos apenas quando necessário para aplicação de estilo.
- CSS
A aplicação de estilo foi feita majoritariamente utilizando biblioteca Bootstrap (versão 4.3.1) com pequenas customizações via arquivo CSS. A rede social foi desenvolvida a partir do protótipo, considerando mobile first e posterior aplicação de media queries para adaptações pontuais em dispositivos maiores como desktop.
- JavaScript
Foi desenvolvido manipulando o DOM com JQuery (versão 3.3.1) no arquivo main.js e direcionando valores e eventos capturados para cada arquivo correspondente à página ou funcionalidade (config, auth, timeline. profile, search, otherprofile).
- Firebase
Utilizado para autenticação dos usuários, ler e gravar dados (database) e hosting da aplicação.