- 1.Resumo do projeto
- 2. Definições do projeto
- 3. Protótipo de alta fidelidade
- 4. Paleta de cores
- 5. Histórias de usuário
- 6. Testes Unitários
- 7. Testes de Usabilidade
- 8. Desenvolvedoras
O objetivo deste projeto é desenvolver uma página web onde o usuário consiga visualizar um conjunto de dados referente aos personagens da série Rick and Morty, que atendam suas necessidades e que possibilitem seu acesso a informações relevantes sobre os personagens onde poderá filtrar, ordenar e buscar. Exibindo em cards essas informações e também visualizar informações relevantes através de cálculos agregados.
Rick and Morty é uma série de animação adulta norte-americana de comédia e ficção científica, a série se originou de uma paródia animada em curta-metragem do filme De Volta Para o Futuro criada por Roiland para o festival de cinema Channel 101. A Adult Swim abordou Harmon a respeito de ideias para um programa de televisão, então ele e Roiland desenvolveram o programa com base no curta, substituindo os personagens de Doc com Rick e Marty com Morty. A série estreou em 2 de dezembro de 2013 e acompanha as perigosas aventuras do cientista alcoólatra Rick e seu neto Morty, que divide seu tempo entre a vida familiar e viagens interdimensionais.
Este projeto foi idealizado para atender a necessidade do público fã da série Rick and Morty em ter acesso a informações descritivas e filtradas de seus personagens favoritos de maneira ágil e clara. Permitindo assim que o usuário possa acessar informações através de cards podendo filtrar por informações específicas como: espécie, gênero ou status de vivo ou morto, assim sanando suas curiosidades.
Desenhamos uma Interface de Usuário e para isso, utilizamos o Figma e apresentamos o que seria o esperado para nosso projeto.
Tela Principal versão Mobile
Tela Principal versão Desktop
Paleta de cores do projeto é baseada nas cores da série.
Ao elaborar as histórias de usuário, pensamos em qual seria o interesse do usuário ao acessar a página, quais informações ele gostaria de consultar e em como seria a interação com a página e suas funcionalidades.
1."O usuário gostaria de ver os personagens da série exibidos na tela em cards, para que consiga visualizar e conhecer cada um deles."
Critérios de aceitação: Apresentar na interface cards com a imagem dos personagens.
2."O usuário gostaria de ter informações mais completas sobre os personagens como: espécie, gênero e status, para conhecer detalhes sobre seus personagens favoritos."
Critérios de aceitação: O usuário consegue filtrar informações por espécie, gênero e status.
3."O usuário está em busca de agilidade gostaria de realizar busca pelo nome do personagem para visualizar somente os cards que tem mais interesse."
Critérios de aceitação: Mostrar na tela os cards referentes ao nome buscado, mostrando todos os cards que incluem o termo da busca.
4."Buscando mais agilidade o usuário gostaria de exibir na tela os personagens em ordem alfabética crescente e decrescente e também exibir na tela a porcentagem de personagens femininos."
Critérios de aceitação: O usuário consegue ver os cards em ordem alfabética na tela. O usuário consegue exibir na tela em forma de alert a porcentagem referente aos personagens femininos.
Utilizamos dois arrays mock ( newArray e names) simulando um array para a criação dos testes.
Foi realizado o teste de usabilidade com dois usuários onde estão descritos abaixo os problemas detectados e como foram solucionados.
Primeiro usuário: Ao iniciar a navegação pela página o usuário sentiu dificuldades na visualização, pois o card apresentava dimensões muito grandes e desproporcionais a tela. Buscando uma melhor visualização redimensionamos o card de maneira que a visualização estivesse confortável e clara para o usuário.
Segundo usuário: Ao realizar a navegação pela página mobile o usuário identificou que a disposição dos botões estavam gerando dificuldade na hora de clicar, pois estavam muito próximos e pequenos. Para um melhor uso alteramos a disposição dos botões em duas colunas e o campo de busca centralizado abaixo.
"Projeto desenvolvido por Gabriela Araujo da Silva Linkedin | Github & Letícia Faria de Souza Github"