/almanaque-olimpico

Projeto Almanaque Olímpico - Desenvolvido para o evento Demo Day - Laboratória.

Primary LanguageJavaScript

Jogos Olímpicos Rio 2016

Design Thinking Week


BannerOlimpiadas

Índice

Descrição

O projeto Almanaque Olímpico, foi escolhido por nós por ser um tema muito interessante. Nele, refatoramos uma aplicação web baseada no banco de dados, onde continham os dados de cada atleta participante dos jogos Olímpicos do Rio 2016, como idade, sexo, país, entre outros.

Durante a Design Thinking Week, buscamos todas as informações sobre o tema, e sobre perfis de usuarios para que soubessemos como agregar melhorias na usabilidade de nossa aplicação.

Nossa aplicação tem três vertentes para que o usuário possa navegar, sendo elas, a página "Home", onde o usuário poderá ler sobre curiosidades e informações sobre as olímpiadas do Rio 2016, a página "Atletas", onde o usuário tem a possibilidade de pesquisar os atletas pelo nome, ordenar de A-Z e Z-A, filtrar pela medalha ganha nos jogos e também filtrar pelo esporte que cada atleta pratica, e por fim a página "Países", nela há a possibilidade de filtrar cada país por ordem alfabética crescente e decrescente, os cards apresentados nesta tela contém também, a quantidade de atletas de acordo com cada país.

Enxergamos grande potencial nesta aplicação que em futuras implementações, poderia facilmente ser um almanaque de eventos esportivos empresariais, por exemplo, o leque de possibilidades é muito grande e empolgante para nossa equipe que pensou em cada detalhe das melhorias a seguir.

Personas

Definimos duas personas como usuários para adequar uma aplicação que se baseasse em suas necessidades.

  • Beatriz, 37 anos - Educadora.
  • Serena, 29 anos - Fã das olimpiadas e esportes.

Protótipo de baixa fidelidade

Desenho de baixa fidelidade

Fluxograma

Desenho de fluxograma

Protótipo de alta fidelidade

Por se tratar de um projeto responsivo criamos o protótipo de alta fidelidade para os dispositivos mais utilizados: smartphone, notebook/desktop e tablet. Todos os protótipos de alta fidelidade foram desenvolvidos através da ferramenta Figma

Tecnologias Utilizadas

  • HTML5
  • CSS3
  • JavaScrip
  • Node.js
  • Git
  • Figma
  • Jest

Desenvolvido por

amanda

Amanda Gusmão

aline

Aline Rosa Cruz

layssa

Layssa Aragão

larissa

Larissa Santos