PokeInfos
Página web de visualização de dados sobre Pokémon criada por Julia Terin e Sara Viana durante o Bootcamp Laboratória - SAP005.
Índice
- 1. Introdução
- 2. Planejamento e Organização
- 3. Processo criativo
- 4. Desenvolvimento
- 5. Funcionamento
1. Introdução
Segundo projeto da quinta geração do bootcamp de front-end da Laboratória. O projeto consiste na criação de uma página web para visualização de um conjunto (set) de dados que se adeque às necessidades do usuário. Os dados escolhidos foram sobre Pokémon e o projeto foi desenvolvido em dupla por Julia Terin e Sara Viana, durante três sprints na metodologia Agile.
2. Planejamento e Organização
O planejamento e organização do projeto foi feito com método Kaban, utilizando o Trello como ferramenta. Foram desenvolvidos passos advindos de histórias de usuários que foram criadas a partir de pesquisas. Veja nosso quadro aqui!
Pesquisas
A pesquisa foi realizada em duas etapas, a primeira com a criação de um formulário, com o uso do Google Forms, para que tivéssemos maiores informações sobre o público da franquia Pokémon, e a segunda com entrevista com usuários do jogo Pokémon GO.
O formulário foi desenvolvido com perguntas que possibilitassem uma análise das necessidades de potenciais usuários, ou seja de pessoas que já consomem o comteúdo da franquia Pokémon. de persona e das necessidades destes usuários.
Também houve uma conversa/entrevista com duas pessoas, usuárias do jogo Pokémon Go, a mais de três anos. Usamos a oportunidade para confirmar dados que já havíamos observado através da pesquisa de formulário, para assim então, entendermos se nossas premissas seriam validadas para a criação de uma persona.
Personas e História de Usuário
A análise dos dados da pesquisa nos permitiram criar uma persona, para nos guiar nas histórias de usuários. Utilizamos o Hubspot como ferramenta para visualizar melhor nossa persona.
Após criarmos Ana, partimos para as histórias de usuários. Geramos três histórias, cada uma contemplando necessidades conhecidas através das pesquisas, e assim, gerando etapas de trabalho com definições de pronto claras.
Percebemos com a pesquisa que a maior procura de informações sobre Pokémon é diretamente ligada a consulta de dúvidas sobre os detalhes dos mesmos, o que influência no jogo ou na nostalgia de rever algo apreciado principalmente na infância.
Você pode acessar nossas histórias de usuario 1, 2 e 3 nos links com os critérios de aceitação e definições de pronto.
3. Processo criativo
O design do projeto começou com um protótipo de baixa fidelidade desenvolvido em papel:
Ele foi base para as mudanças futuras de adequação do site durante o processo de desenvolvimento.
Em seguida fizemos uma breve pesquisa de cores e referências, também estabelecendo imagens possíveis para integrar o layout do projeto. Referência no estudo de cores:
Escolhemos cores mais leves para trabalhar no layout, pois além da pesquisa demonstrar que nossa persona é feminina, nas pesquisas de produtos oficiais e lojas da franquia a base sempre é branco.
4. Desenvolvimento
A montagem do layout planejado começou a ser executada na primeira sprint. Antes de inserir as funcionalidades foi feito um teste de navegação com um dos usuários entrevistados na fase de pesquisa do projeto. Houveram mudanças no correr do desenvolvimento, iriamos exibir os cards dos Pokémon em um carrossel de imagens, porém, mudarmos para exibição em grade, o que facilitava a execução das buscas e filtros. O carrossel foi utilizado para links, e informações, adicionais. As demais sprints foram focadas no desenvolvimento das lógicas da manipulação dos dados do banco, buscas, filtros, exibição de informações e informações de porcentagem. A responsividade do site foi feita em conjunto com a execução do layout da página. Algumas funcionalidades desejadas não foram implantadas ainda ao site até momento da entrega. Porém é um próximo paço trazer mais informações dos Pokémon através de um flip no card, ou link no card para outra página com informações mais detalhadas.
Tecnológias
Neste projeto foram usados:
- CSS
- HTML
- Vanilla JavaScript
- Visual Studio Code com extenção Node-js
5. Funcionamento
O site permite que o usuário acesse informações sobre Pokémons das duas primeiras gerações, ou seja, Kanto e Jotoh. Ele apresenta uma barra de menu fixa, onde fica o logo do site, feito a partir do mesmo modelo de fonte do logo oficial da franquia, e que possibilita a navegação pela página ao clicar nas opções do menu. O background contém uma fan art nas cores principais do site, trazendo originalidade e maior harmonia ao layout. Há um carrossel de imagens com links adicionais sobre o universo Pokémon, logo a baixo o campo de pesquisa por nome, o campo de filtragem por "tipo de Pokémon" e a ordenação alfabética crescente e decrescente. já que é uma das informações mais requisitada por usuários durante a pesquisa. Eles estão ordenados naturalmente por ordem de evolução.