Aplicação // Senai WorldSkills 2015

Em 2015, um evento de competições técnicas internacional (WorldSkills) teve sua edição no Brasil. Competidores do mundo todo se reuniram no Anhembi, em São Paulo, em busca das medalhas e de reconhecimento profissional internacional. A realização se deu pelo Senai/Sesi junto com a WorldSkills.

Objetivos

O principal objetivo para a aplicação do evento era manter informados os pais, amigos, familiares e professores sobre a atuação do participante no evento. Com isso, desenvolveu-se uma plataforma online com ações ao vivo durante todos os dias do evento.

Entre as principais funcionalidades estavam:

  1. Mapa 3D ilustrado de todos os espaços onde ocorreriam as competições;
  2. Informações gerais de todos as competições classificadas por área de conhecimento;
  3. O perfil de cada competidor inscrito;
  4. Durante a competição haveria repórteres com câmeras ao vivo acompanhando o evento, o percurso do repórter seria controlado por meio de votação online do que ele acompanhar;
  5. No final de cada dia, vídeos e timelapses de todos os campeonatos era postados;

O mapa como centralizados da informação

Minha decisão em relação a arquitetura da informação foi dar ao mapa ilustrado destaque no site onde toda a navegação partiria dele e da busca inteligente.

Wireframe documentado do funcionamento do mapa e da busca

Após a animação de abertura, o mapa seria exposto ao usuários. Os ícones informariam os pontos das competição. A busca aconteceria no mapa, depois nos detalhes de cada competição ou competidor.

Menu

O menu organizado a partir de cada "ocupação" auxiliaria o usuário caso quisesse ver de forma mais geral o conteúdo do site.

Detalhes da ocupação

Ao buscar ou selecionar uma ocupação no mapa, ele é arrastado para a esquerda e o conteúdo em detalhes aparece por baixo do mapa (como no exemplo acima). No início do projeto, o conteúdo era pouco e podia estar no próprio mapa próximo aos ícones. No entanto, com o crescente número de imagens, vídeos e textos, foi preferível criar uma tela especial para cada ocupação sem perder a ideia de que o mapa sempre estaria por perto para se localizar no evento.

A busca

A busca pelo mapa teriam dois dois modos de visualização de resultados. O primeiro no próprio mapa da localização da informação que foi buscada e outro de detalhes de da busca. Uma forma organizada e separada do que era ocupação, competidores e demais conteúdos do site.

Página de resultados da busca

Conteúdo: Agenda de eventos

Outro tipo de conteúdo foi a agenda de eventos especiais que aconteceriam durante o evento, como demonstrado na tela abaixo:

Agenda de eventos

Em tempo real

O conteúdo ao vivo seria algo separado do site, mas com conteúdo entrelaçado. Dessa forma, optei por criar um modal de tela inteira com todo o conteúdo ao vivo da aplicação: Concetrador de hashtags, Galeria de vídeos e as câmeras ao vivo espalhadas pelas ocupações.

Conteúdo ao vivo da aplicação

One more thing…

Também foi desenvolvido um aplicativo para os competidores se localizarem no Anhembi. Como a conexão no espaço era limitada, um dos fatores de funcionamento do aplicativo era ser offline. Por isso foram espalhados iBeacons por todo o evento e, à partir deles, foi possivel localizar todos os usuários do evento utilizando tecnlogia bluetooth.

Telas do aplicativo Senai WorldSkills 2015

O aplicativo também teria além do conteúdo de todoas as ocupações, um "Criador de roteiros", o usuário poderia colocar quanto tempo estaria conhecendo o evento, se haveria tempo para refeição e quais seus principais interesses. Com isso, o aplicativo sugeriria roteiros para pelo evento baseados em interesses, tempo e localização via iBeacon.

Para ver em funcionamento (e com ressalvas de desenvolvimento vs usabilidade) clique aqui.


PS.: É cabível a mim apenas as questões de usabilidade e arquitetura de informação e fluxo. Meus estregáveis principais no projeto foram os wireframes docuementados (feitos no illustrator). Idealização, layout e desenvolvimento não eram da minha competência.