- 1. Resumo do projeto
- 2. Definição de produto
- 3. Pesquisas de usuário
- 4. Histórias de usuário
- 5. Desenho da Interface de Usuário
- 6. Testes manuais e de usabilidade
- 7. Considerações Técnicas
- 8. Sobre as Desenvolvedoras
O projeto Social Network foi o terceiro projeto desenvolvido no bootcamp da Laboratoria. O seu principal objetivo era construir uma rede social que permitisse à qualquer usuário criar uma conta de acesso, logar-se com ela, criar, editar, deletar e dar likes em publicações. Além disso, a aplicação deveria ser construída com múltiplas telas em Vanilla JavaScript.
A partir disso, construiu-se a PicsFem: uma rede social desenvolvida para mulheres amantes de fotografia. O seu objetivo principal é construir uma comunidade segura para que mulheres que amam fotografia possam: compartilhar conhecimentos e dicas; se apoiar; aperfeiçoar técnicas; além de debater e sanar dúvidas técnicas e não técnicas sobre o tema.
Neste projeto, desenvolvemos habilidades sobre autenticação com Firebase Auth, persistência de dados com Firestore e encaminhamento (rotas) de páginas ou componentes, e fomos apresentadas ao conceito de SPA (Single Page Application).
PicsFem é uma rede social desenvolvida para mulheres amantes de fotografia. O seu objetivo principal é construir uma comunidade segura para que essas mulheres possam compartilhar conhecimento e ideias sobre o tema, além de poderem alavancar suas carreiras no mercado de fotografia, que ainda é marjoritariamente masculino.
Denominamos as usuárias de "picfemers" com o objetivo de torná-las mais conectadas com a comunidade e para que se sintam, ainda mais, pertecentes à rede.
De acordo com pesquisas realizadas durante o desenvolvimento do projeto, relatou-se que mulheres fotógrafas possuem um grande desafio para adentrar no mercado de fotografia, pois este ainda é marjoritariamente masculino. Diante disso, uma das futuras funcionalidades da rede social será a possibilidade de clientes poderem contratar mulheres fotógrafas para trabalhos freelancers através da PicsFem.
Um dos objetivos de aprendizagem do projeto foi realizar entrevistas com os possíveis usuários. Para isso, utilizamos um form do google docs como ferramenta e neste criamos um formulário para compreender o perfil dos nossos possíveis usuários e analisar suas necessidades.
A priori, precisávamos conhecer o nosso público. Logo, iniciamos o questionário com perguntas como: nome, idade e como o usuário se identifica como pessoa. Dessa forma, foi identificado que nosso público seria majoritariamente feminino e em idades diversas.
Após a primeira identificação de nosso usuário, buscamos entender o seu perfil em relação ao propósito do site e a sua configuração pessoal, já que a aplicação web construída é voltada para o público amante de fotografia. Portanto, analisou-se as características vigentes e os possíveis interesses em utilizar o produto. Além disso, coletou-se: temas de interesse, relatos visando uma melhor usabilidade do produto e sugestões de possíveis implementações futuras.
A pesquisa de usuário foi muito importante para o direcionamento do desenvolvimento do projeto, além de nos dar uma melhor visão para implementações futuras na rede social, mediante possíveis investimentos.
Após compreender melhor as necessidades de nossas usuárias, determinamos as Histórias de Usuário, que representam o que elas precisam na Rede Social.
"Como usuária, eu gostaria de fazer o login utilizando a minha conta do google, com o objetivo de otimizar o meu tempo."
-
Critérios de aceitação:
- página de login
- página de cadastro
-
Definição de pronto:
- A história implementada foi testada com, pelo menos, 3 usuários e foram incorporados os melhoramentos necessários identificados nos testes de usabilidade
- Finalizou-se a SPA (Single Page Application)
- A página de login estava responsiva para todas as telas
- Construiu-se o teste da função de logar com o google
- Recebeu-se o code review de pelo menos uma parceira de equipe
- Realizou-se o deploy utilizando o git tag.
"Eu, como entusiasta de fotografias, gostaria de publicar dicas sobre edição de fotos com o objetivo de compartilhar meus conhecimentos com a comunidade. Além disso, gostaria de editar ou removê-las depois, para melhorar a qualidade das publicações."
-
Critérios de aceitação:
- página de feed
- fazer uma publicação no feed
- editar uma publicação no feed
- excluir uma publicação no feed
-
Definição de pronto:
- A história implementada foi testada com, pelo menos, 3 usuários e foram incorporados os melhoramentos necessários identificados nos testes de usabilidade
- Finalizou-se a SPA (Single Page Application)
- A página de feed estava responsiva para todas as telas
- Construiu-se o teste das funções de publicar, editar e excluir post
- Recebeu-se o code review de pelo menos uma parceira de equipe
- Realizou-se o deploy utilizando o git tag.
"Como PicsFemer, eu gostaria de interagir com as minhas outras colegas de comunidade através de likes, com o objetivo de me conectar melhor com elas."
-
Critérios de aceitação:
- conseguir dar like e deslike na publicação do feed
-
Definição de pronto:
- Construiu-se o teste da função de dar like
- Recebeu-se o code review de pelo menos uma parceira de equipe
- Realizou-se o deploy utilizando o git tag.
"Como usuária de redes sociais, gostaria de poder sair da minha conta da PicsFem, com o objetivo de não deixar tantas contas de redes sociais abertas ao mesmo tempo."
-
Critérios de aceitação:
- conseguir sair da conta
-
Definição de pronto:
- Construiu-se o teste da função de sair da conta
- Recebeu-se o code review de pelo menos uma parceira de equipe
- Realizou-se o deploy utilizando o git tag.
-
Os protótipos de alta fidelidade foram desenvolvidos no Figma. Você pode conferír:
-
Ou você pode conferí-los nas imagens a seguir:
-
Paleta de cores escolhida:
Após fazermos os testes manuais e de usabilidade, incorporamos os feedbacks dados pelos usuários, e fizemos as seguintes mudanças:
6.1. Tiramos a fotografia do layout da página de login da versão para tablets, pois o usuário relatou que o formulário não ficava tão legível, já que a imagem achatava o seu design.
6.2. Colocamos o botão de voltar no formulário de criar conta, pois o usuário relatou que sentiu dificuldade em retornar para a página anterior, além de não ter ficado claro para ele como retornava.
6.4. Inicialmente, as mensagens de erro estavam na cor vermelha e a usuária relatou que sentia dificuldade para visualizá-las. Por conta disso, colocamos o fundo das mensagens na cor amarela (cor complementar ao violeta), causando um efeito visual mais confortável para o(a) leitor(a).
O projeto foi desenvolvido somente em JavaScript (ES6), HTML e CSS. Ademais, não foi permitido o uso de bibliotecas e frameworks, apenas vanilla JavaScript, com exceção da biblioteca Firebase para gestão de usuário e base de dados.
Nosso boilerplate foi organizado da seguinte forma:
Confira aqui todo o nosso planejamento, que foi realizado utilizando a ferramenta Trello e as Metodologias Ágeis.
- Figma;
- Trello;
- Metroretro;
- Git;
- GitHub;
- Visual Studio Code;
- HTML5;
- CSS3;
- JavaScript;
- Node.js;
- Responsividade (construção em mobile first);
- Jest;
- Firebase;
- SPA (Single Page Application);
- Web APIs;
- User-centricity;
- Product Design
- Research
- Metodologias Ágeis
- Uso de HTML semântico
- Uso de seletores de CSS;
- Empregar o modelo de caixa (box model): borda, margem, preenchimento;
- Uso de flexbox em CSS
- Uso de seletores de DOM
- Manipulação de eventos de DOM (Objeto Event: EventTarget.addEventListener(), EventTarget.removeEventListener() )
- Manipulação dinâmica de DOM (Node.appendChild(), Document.createElement(), Node.textContent, Element.innerHTML)
- Routing (History API, evento hashchange, window.location)
- Diferenciar entre tipos de dados primitivos e não primitivos
- Manipular arrays (filter, map, sort, reduce)
- Manipular objects (key | value)
- Variáveis (declaração, atribuição, escopo)
- Uso de condicionais (if-else, switch, operador ternário, lógica booleana)
- Uso de laços (for, for..of)
- Uso de funções (parâmetros, argumentos, valor de retorno)
- Testes unitários (Introdução ao Jest)
- Testes assíncronos
- Uso de mocks e espiões
- Módulos de ECMAScript (ES modules: import, export)
- Uso de linter (ESLINT)
- Uso de identificadores descritivos (Nomenclatura | Semântica)
- Diferença entre expression e statements
- Callbacks
- Promessas
- Git: Instalação e configuração
- Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
- Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
- GitHub: Criação de contas e repositórios, configuração de chave SSH
- GitHub: Implantação com GitHub Pages
- GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
- GitHub: Organização pelo Github (projects | issues | labels | milestones | releases)
- Desenhar a aplicação pensando e entendendo a usuária
- Criar protótipos para obter feedback e iterar
- Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
- Firebase Auth
- Firestore
Projeto desenvolvido em equipe por: