- 1. Preâmbulo
- 2. Apresentação do projeto
- 3. Objetivos
- 4. Definição do produto
- 5. Funcionalidades da interface
- 6. Etapas de produção
Segundo a Forbes 90% dos dados que existem hoje foram gerados durante os últimos dois anos. A cada dia geramos 2.5 milhões de terabytes de dados, uma cifra sem precedentes.
Apesar disso, os dados por si só são de pouca utilidade. Para que essas grandes quantidades de dados se convertam em informação compreensível para os usuários, precisamos entender e processar estes dados. Uma forma simples de fazer isso é criando interfaces e visualizações.
Na imagem seguinte, você pode ver como os dados que estão na parte esquerda podem ser usados para construir a interface amigável e compreensível que está na parte direita.
O o projeto consistiu na criação de uma página web, na qual a pessoa usuária pode visualizar dados, filtrá-los e ordená-los. A construção da aplicação foi feita a partir de um boilerplate disponibilizado pela Laboratória, contendo uma estrutura de arquivos como ponto de partida, assim como toda a configuração de dependências e testes. O projeto foi elaborado em dupla, utilizando somente HTML, CSS e Javascript como ferramentas.
O objetivo principal deste projeto foi desenhar e construir uma interface web onde se possa visualizar e manipular dados, entendendo o que o usuário necessita.
O tema escolhido para o projeto foi Pokémon, uma franquia de desenhos e jogos mundialmente famosa. A página foi criada utilizando um conjunto de dados com informações sobre 251 Pokémons, contendo seus nomes, tipos, ataques, etc. As informações foram dispostas no formato de um card, sendo familiar aos fãs de franquia. As etapas de produção do projeto foram elaboradas a partir de 5 Histórias de usuário, que serão relatadas a seguir.
História de usuário 1: Eu como fã de Pokémon, gostaria de acessar um site/aplicativo e visualizar cards com informações sobre os Pokémons.
História de usuário 2: Eu como fã de Pokémon gostaria de acessar um site/aplicativo e visualizar cards com informações sobre os Pokémons. Além disso, gostaria de filtrar os cards por região e por tipo.
História de usuário 3: Eu como fã de Pokémon, gostaria de acessar um site/aplicativo, visualizar cards com informações sobre os Pokémons, com filtros (por região e tipo), e possibilidade de ordenação (por CP e HP)
História de usuário 4: Eu como usuária gostaria de acessar um site/aplicativo, visualizar cards com informações sobre os Pokémons comm filtros (por região e tipo), e possibilidade de ordenação (por CP, HP e candy cost). Gostaria de encontrar um campo de busca para encontrar um Pokémon específico, e também gostaria de visualizar estatísticas da quantidade de pokémon de cada tipo.
História de usuário 5: Eu como usuária gostaria de acessar um site/aplicativo, visualizar cards com informações sobre os Pokémons com filtros (por região e tipo), e possibilidade de ordenação (por CP e HP). Além disso, gostaria de ver um campo de busca para encontrar um pokémon específico.
Foram feitos dois protótipos, para desktop e mobile, no Figma.
A interface permite ao usuário:
- Visualizar todos os cards com informações sobre os 251 Pokémon, clicando no botão World.
- Filtrar cards escolhendo sua região clicando nos botões Kanto ou Johto.
- Ao visualizar os cards, a interface permite filtrar por tipo e ordenar por (CP e HP).
- Visualizar estatísticas da quantidade de pokémon de cada tipo.
- Localizar informações de um pokémon específico, buscando pelo seu nome.
O projeto foi desenvolvido ao longo de 5 sprints de trabalho, totalizando aproximadamente 5 semanas.
Primeiro definimos qual seria o objetivo da aplicação web nos baseando nas histórias de usuários, depois definimos um protótipo de baixa fidelidade, e definimos nosso planejamento baseado em baby steps, quebrando nossos objetivos em pequenas metas diárias, dividindo e adquirindo o máximo de conhecimento em dupla.
Usamos as ferramentas: notion para definição da planning e Figma para definição do protótipo de baixa a alta fidelidade.