Desafio – SECTI

A SECTI (Secretaria de Ciência, Tecnologia e Inovação do Estado de Pernambuco) é responsável por criar e manter serviços de tecnologia eminente no estado e tem a competência de: formular, fomentar e executar as ações de política estadual de desenvolvimento científico, tecnológico e de inovação…

Objetivo

Criar uma solução onde fosse possível ver agenda, se inscrever em eventos e acompanhar notícias de forma fácil e objetiva para todos os públicos. Em linhas gerais é desenvolver uma plataforma que atenda o desafio proposto pela organização.

Desafio

O desafio proposto pela foi SECTI:

O circuito de Inovação é um road show que acontece todos os anos em Pernambuco. O evento busca divulgar os principais avanços científicos e tecnológicos do litoral ao sertão. Para ajudar na divulgação da caravana…

É desejável que seja desenvolvido:

• Ver a agenda de eventos;
• Se inscrever em eventos;
• Acompanhar notícias e vídeos;
• Ler artigos sobre avanços científicos divulgados na campanha;

OBS.: Prazo de 4 dias para resolução do problema.

Ferramentas utilizadas

• FIGMA
• Visual Studio Code
• Trello
• Whimsical
• Meet
• Quant-UX
• Github

Task Flow

Algumas das atividades que os usuários podem realizar ao acessar a solução proposta.

• Buscar por evento e notícia;
• Ler notícia e evento;
• Se inscrever em eventos;

Metodologia de Design

Para o desafio proposto utilizei recursos de Design Minimalista que é um dos movimentos de design mais importantes do século 20 e início do século 21. Este tipo de design tem como objetivo reduzir quantidade de informação e focar na real necessidade dos usuários (O que de fato eles vão utilizar).

Alguns fatores importantes para se construir uma solução web minimalista é você começar a desenvolver a solução do Mobile até a versão Desktop.

Press enter or click to view image in full size

Existe também um movimento antigo que já pensava a respeito do desenvolvimento a partir do mobile até a versão web que se chamava Mobile First.

O Mobile First, como a tradução mesmo sugere, é uma forma de começar pensando primeiro em desenvolvimento para dispositivos móveis, para somente depois evoluir para o desktop. Essa é uma forma de ter uma experiência de excelência no mobile e depois fazer uma adaptação para o desktop.
Fonte:https://gobacklog.com/blog/mobile-first/

Cronograma

Para planejar as etapas de criação e ver o andamento do projeto, estou propondo criar um Trello com as atividades que estou desempenhando, a visualização pode ser acessada clicando aqui!

Press enter or click to view image in full size

Persona

Para este projeto eu trabalhei com 2 tipos de persona, com experiência e sem experiência de uso que são:

• José Romeu: Um usuário com pouca experiência de uso e sem conhecimento em tecnologias;
• Maria Julieta: Uma usuário com experiência de uso, acostumada com tecnologias;

Sitemap

Para entender o que deve ser desenvolvido foi proposto a criação de um sitemap para elevar no nível de abstração com algumas das funcionalidades proposta pela SECTI.

Press enter or click to view image in full size

MoodBoard ( Catálogo de ideias )

Para elevar ainda mais o nível de abstração e entender algumas ideias que pode ser geradas eu visitei alguns sites e alguns deles me chamou atenção.

Press enter or click to view image in full size

Fiz um projeto em um domingo e aproveitei a ideia (Vídeo curto Speed Art feita por mim): https://www.instagram.com/tv/CFYCZ6hh2Ev/?utm_source=ig_web_copy_link

Esboço

A partir do SITEMAP criei um esboço para começar a entender o que devo criar na fase de wireframe.

Foi realizado um esboço mobile para seguir a metodologia proposta no início desse artigo. Construir uma solução onde seja clara e objetiva e minimalista, o desenvolvimento ocorreu do mobile até a versão desktop.

Wireframes

Com o esboço em mãos criei algumas telas para validar alguns requisitos e elevar o nível de abstração.

Guia de Estilos

Para paleta de cores foi utilizada como cor de ênfase as cores do estado da Prefeitura do Recife.

Press enter or click to view image in full size

Já as cores Black e White Smoke foram escolhida por passar no teste de contraste e não .

Press enter or click to view image in full size

A família de fonte escolhida foi a “Quicksand”, é um tipo de fonte sem serifa, possui um toque de modernidade e precisão em suas formas geométricas.

Press enter or click to view image in full size

Protótipo

Para criação do protótipo de alta fidelidade, seguindo os princípios de minimalismo e mobile first. Criei uma solução partindo dos princípios Mobile até a versão Desktop, pois podemos entregar ao usuário apenas o que de fato ele vai usar e o que não gere nenhuma frustração ou insegurança ao usar a solução proposta.

Front-end

Com o projeto em mãos pude iniciar a parte do desenvolvimento do que foi proposto por mim na fase de Descoberta, as tecnologias e linguagens utilizadas foram:

• HTML5
• CSS3
• Bootstrap 4.1
• Java Script
• OwlCarousel2
• Typeitjs

Para acessar o projeto basta acessar https://weltonlsantos.github.io/secti/ ou visitar o repositório https://github.com/WeltonLSantos/secti.

Teste com usuários

Para validar algumas hipóteses e dúvidas, convidei 3 pessoas para testar a aplicação disponível em https://github.com/WeltonLSantos/secti. Todos acharam site limpo e de fácil acesso as informações, dentre eles havia uma pessoa que tinha problema baixa audição e baixa visão.

Nesse cenário eu conseguir adicionar tradutor de libras no site, mas audiodescrição era pago e não pude colocar 🙁

Os testes acontecer utilizando a ferramenta Meet do Google, onde os usuários tiveram que usar versão web e mobile.

No cenário mobile aconteceu um problema onde foi corrigido e colocado pra teste novamente.

Em linhas gerais foram realizadas perguntas tais como:

• A interface gera algum tipo de desconforto ?
• Consegue localizar onde lista de publicação facilmente?
• Consegue utilizar libras no site?
• Você achou o site com poluição visual?
• Tente se inscrever em um evento (Link do teste QUANT-UX)
• etc…

Os resultados foram bastante satisfatórios.

Funcionalidades futuras a serem implementadas

• Audiodescrição;
• Sistema de contraste de tela;
• Aumento de escala de Fonte;
• Outros idiomas;

Solução

Ao concluir todas as etapas pude atingir a entrega de um projeto minimalista e algo diferencial no mercado, o que foi proposto, pode ser melhorado e incrementado a partir de pequenas validações com equipe e/ou para quem tá criando valor.

O projeto atende os requisitos de:

• Acessibilidade;
• Os 10 princípios de Jakob Nielsen;
• Design Minimalista;
• Mobile First;
• Responsivo;
• Legibilidade;
• etc…

Em linhas gerais atendemos nossas duas personas que são dois tipos de usuários bastantes encontrado que é o usuário com experiência de uso e outro com pouca ou sem experiência de uso.

• José Romeu: Um usuário com pouca experiência de uso;
• Maria Julieta: Com experiência de uso;

Métricas de Sucesso

Para continuar melhorando utilizando os recursos de melhoria contínua podemos aplicar métricas para sempre está inovando e mantendo a aplicação mais moderna e competitiva, com foco centrada nos usuários. Essas métricas podem ser feita em qualquer momento ou estágio para entender os usuários.

• Retorno de visitantes(Utilizaremos visitantes que retornam como métrica chave para o sucesso);
• Tempo de permanência no aplicativo;
• Taxa de rejeição;
• Testes A/B para definir a versão com melhor performance.
• ETC.

Recomendo fortemente utilizar a ferramenta QUANT-UX. Criar soluções baseadas na experiência do usuário tem sido cada mais importante pois, cada dia o consumidor final está cada vez mais exigente.

“A experiência do usuário é o conjunto de elementos e fatores relativos à interação do usuário com um determinado produto, sistema ou serviço cujo resultado esperado é uma percepção positiva, ou negativa.”

Entender esse público move diversos pesquisadores e profissionais da área, uma solução pouco conhecida chamada “QUANT UX” possibilita criar protótipos e entenda como o seu público interage com eles.

Quant UX é uma ferramenta gratuita de pesquisa, usabilidade e prototipagem/wireframe de interface do usuário para testar rapidamente o seu design e analisar protótipos interativos.

A ferramenta permite análise visual e facilita a localização e a correção rápida de pontos problemáticos no seu design. Utiliza diversas métricas e ferramentas tais como: clique heatmap, mause heatmap, jornada do usuário, visibilidade de rolagem, tempo de rolagem, tempo de espera, views, grava cada tela de cada usuário, utilização de web service entre outras coisas…

Bem é isso espero que gostem!