- Projeto
- Definição de produto
- Layout
- História de usuário
- Testes de usabilidade
- Objetivos de aprendizagem
A adoção de pets teve um crescimento durante a pandemia, conforme pesquisas, o que nos levou a escolher o tema para o nosso projeto. Criamos Plush, nome escolhido, pensando na fofura dos pets.
Plush é uma rede voltada aos amantes e tutores de animais, para que os usuários possam compartilhar dicas, histórias, adoções, memes de pets e ajuda em casos de emergências, um lugar de apoio e trocas de experiências.
Plush permite ao usuário criar uma conta de acesso e logar-se com ela, se preferir é possivel entrar com a conta do Google. Permite também criar, editar, deletar e dar likes nas publicações.
Acesse nosso projeto clicando aqui
Pensando em um layout intuitivo, o usário é direcionado a página de login, e, é possível ser um novo membro apenas com seus dados de email e senha cadastrados na rede, ou de maneira mais prática, existe a possibilidade do usuário entrar com sua conta do Google.
A página inicial, foi criada para que fique as publicações dos usuários já membros da rede, podendo interagir com likes e, com a opção de editar ou excluir a própria publicação.
Antes de iniciar o desenvolvimento da aplicação realizamos uma pesquisa de usuário e constatamos que:
- A maior parte dos entrevistados caracteriza a faixa dos jovens adultos (18 a 25 anos).
- Quase 80% dos entrevistados têm pets.
- Entre os usuários entrevistados que possuem animais de estimação, os cachorros e os gatos são os pets mais populares. Além disso, alguns possuem outros pets como papagaios, calopsitas e coelhos.
- Ao utilizar as redes sociais para buscar a respeito de pets, a maior parte dos usuários opta por consumir mídias de animais como fotos, vídeos e memes, além de buscar conteúdos informativos como dicas para o cuidado de pets, ONGs que resgatam animais e doação de pets nas proximidades.
- Nossa paleta de cores foi selecionada por meio da votação dos usuários nesta pesquisa.
- Entre as sugestões dadas pelos usuários, prevalecem temas como adestramento, dicas de alimentação saudável para pets, cuidados com a saúde, adoção, divulgação de ONGs, anúncios de locais que vendem produtos mais baratos, locais próximos de doação de animais, além da implementação de funcionalidades como perfis para os pets e a busca de postagens de animais por tags.
Ao implementar as funcionalidades iniciais de login e cadastro na plataforma fizemos um primeiro teste de usabilidade para garantir que tais funcionalidades foram implementadas corretamente de acordo com o fluxo do usuário definido no protótipo de baixa fidelidade no Figma. Constatamos que:
- A maioria dos usuários conseguiu acessar outras páginas do fluxo e foram direcionados para as páginas corretamente.
- A interface ficou simples e minimalista para a maioria dos usuários.
Ao implementar o feed de posts e estilizar toda a aplicação, realizamos mais um teste de usabilidade para reunir informações a respeito do resultado geral.
- A maior parte optou por acessar a versão da aplicação em desktop utilizando o login com a conta Google.
- No geral, os botões ficaram adequados na interface, porém, o botão de Logout poderia ser maior.
- Os avisos de erro durante o login/cadastro da conta deveriam ser mais evidentes.
- A interface é intuitiva e as cores da paleta foram bem aplicadas na interface.
- Entre as sugestões dadas pelos usuários estão: implementar a funcionalidade de postar imagens, incluir um aviso de que o cadastro foi feito com sucesso, incluir tema claro/escuro alternando as cores da aplicação, melhorar o posicionamento do botão de postar e implementar a personalização do perfil.
HTML e CSS
- HTML5 semântico
- CSS3 flexbox
DOM e Web APIs
- Manipulação do DOM
- History API
- localStorage
Javascript
- Uso de callbacks
- Consumo de Promises
- Uso de ES modules (import | export)
Firebase
- Firestore
- Firebase Auth
- Firebase security rules
- Uso de onSnapshot | onAuthStateChanged
Testing
- Jest
- Teste unitários
- Testes assíncronos
- Mocking
Boas práticas de programação
- Modularização
- Nomenclatura / Semântica
- Linting
