- 1. Prefácio
- 2. Resumo do projeto
- 3. Sobre o tema e usuários
- 4. Protótipos
- 5. Testes de usabilidade
- 6. Interface do projeto e objetivos alcançados
- 7. Testes unitários
- 8. Ferramentas e tecnologias utilizadas
- 9. Melhorias futuras
- Créditos
- Autores
O projeto em questão é uma aplicação web mobile first criada como parte do Bootcamp da Laboratoria, com o principal objetivo de desenvolver uma rede social na qual o usuário possa se cadastrar e fazer login utilizando o e-mail e senha cadastrados, ou, se preferir, usando a conta do Google. Além disso, o usuário poderá publicar na timeline, editar ou excluir suas publicações, e também visualizar as publicações de outros usuários e interagir curtindo essas publicações.
Dentre várias possibilidades de temas, decidimos criar uma rede social para leitores do gênero de fantasia, permitindo que compartilhem indicações sobre leitura, livros e atualizações sobre os livros que estão lendo no momento, bem como suas impressões e tudo relacionado ao universo da leitura. A rede social Eldoria possibilita aos usuários compartilharem informações relevantes sobre o universo da leitura, além de interagir com outros usuários curtindo suas publicações.
Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.
Como leitor eu quero poder compartilhar dicas sobre leitura para beneficiar outros leitores.
Critérios de aceitação
- Quero ter uma página inicial para login;
- Quero que o site tenha uma caixa de texto para fazer as minhas publicações;
- Quero poder acessar facilmente de qualquer dispositivo.
"Como leitor eu quero poder compartilhar dicas sobre leitura para beneficiar outros leitores."
Critérios de aceitação
- Quero ter uma página inicial para login;
- Quero que o site tenha uma caixa de texto para fazer as minhas publicações;
- Quero poder acessar facilmente de qualquer dispositivo.
"Como leitor quero poder indicar livros para beneficiar novos leitores."
Critérios de aceitação
- Quero ter uma página inicial para login ou cadastro;
- Quero que o site tenha uma caixa de texto para fazer as minhas publicações;
- Quero poder visualizar outras publicações no meu feed;
- Quero poder acessar facilmente de qualquer dispositivo.
"Como leitor quero poder curtir os posts que me identifico para interagir com outros leitores."
Critérios de aceitação
- Quero ter uma página inicial para login;
- Quero poder curtir publicações de outros usuários;
- Quero poder acessar facilmente de qualquer dispositivo.
"Como usuário gostaria de poder fazer alterações nos meus posts para poder adicionar ou retirar informações."
Critérios de aceitação
- Quero ter uma página inicial para login;
- Quero que nos meus posts tenha as opções de editar e excluir a publicação e que caso eu desista dessas opções eu tenha a opção de cancelar a ação;
- Quero poder acessar facilmente de qualquer dispositivo.
"Como usuário eu quero poder ter um cadastro no site para manter minhas informações salvas."
Critérios de aceitação
- Quero ter a possibilidade de me cadastrar no site através do meu e-mail ou da minha conta Google;
- Quero poder acessar facilmente de qualquer dispositivo.
- Ser uma SPA.
- Ser responsiva.
- Receber code review de pelo menos uma parceira de outra equipe.
- Fazer testes unitários.
- Fazer testes manuais buscando erros e imperfeições simples.
- Fazer testes de usabilidade e incorporar o feedback dos usuários como melhorias.
- Fazer deploy do aplicativo e marcar a versão (git tag).
O protótipo foi desenvolvido levando em consideração as necessidades dos usuários, para que fosse uma rede social intuitiva e de fácil acesso. Pensando na usabilidade e conforto visual, optamos por adicionar um switch para que o usuário possa escolher usar a rede social no modo light ou dark.
Mobile
Desktop
Os testes de usabilidade foram realizados em média com 3 pessoas, para entendermos se a interface criada no protótipo estava intuitiva e de fácil compreensão para os usuários. Com isso, identificamos que alguns botões e a caixa de pesquisa precisariam de pequenos ajustes, na cor e alinhamento. Alguns usuários destacaram que para visualização da timeline seria melhor diminuir a quantidade de publicações que aparecem na timeline. Sendo assim, implementamos as alterações de acordo com os feedbacks recebidos durante os testes de usabilidade.
Para que pudéssemos ter um bom aproveitamento dos dados a serem manipulados, seguimos a seguinte forma:
- Elaboramos as narrativas dos usuários;
- Produzimos um protótipo de baixa fidelidade para testar rapidamente as primeiras ideias, e o protótipo de alta fidelidade foi criado para simular uma experiência mais realista;
- Conduzimos testes de usabilidade para avaliar a forma como os usuários interagem com o produto, identificando possíveis problemas de utilização e áreas de melhoria;
- O desenvolvimento foi guiado pelas fases anteriores, incorporando os feedbacks recebidos e efetuando adaptações conforme necessário.
[✔] Permite ao usuário interagir com a interface para obter as informações que necessita;
[✔] É responsiva, ou seja, pode ser visualizada sem problemas a partir de diversos tamanhos de tela: celulares, tablets, notebooks, etc;
[✔] A interface segue os fundamentos do design visual;
[✔] Testes unitários cobrem um mínimo de 70% de statements, functions, lines e branches.
'Inserir um GIF ou captura de tela da versão final aqui'
Foram realizados 4 testes unitários, cobrindo 100% do código.
- HTML5
- JavaScript
- CSS3
- Firebase
- Vite
- GitHub
- Git Bash
- Visual Studio Code
- Canva
- Figma
- Marvel App
- Trello
- Implementar outras formas de interação entre os usuários, como: comentários nas publicações;
- Criar uma seção dedicada ao perfil do usuário com suas informações para que o usuário possa alterar seus dados, como: nome, e-mail, nome de usuário e foto;
- Permitir que quando o usuário faça o login pelo Google, sua foto seja utilizada na rede social também.
O projeto foi desenvolvido por:
👩💻 Ádila Freitas - LinkedIn | GitHub