Hackaton Demo Day Laboratoria 2021

Para acessar a aplicação, clique Aqui ✅.

📑 Índice

• 1. O produto
• 2. O Desafio
• 3. Nosso Objetivo
• 4. Experiência do Usuário
• 5. Paleta de Cores
• 6. Protótipos
• 7. Objetivos de aprendizagem
• 8. Melhorias Futuras
• 9. Autoras

🌍 1. O PRODUTO

O safe é uma plataforma para atender o publico da terceira idade na geração de senhas seguras e criptografadas.

🌍 2. O DESAFIO

Nosso DESAFIO foi repaginar o portal safe, deixando o mesmo com um visual mais agradável, mais funcional e intuitivo para que os USUÁRIOS possam ter uma experiência inspiradora e em diversos tamanhos de tela. Para o sucesso do nosso DESAFIO concentramos nosso foco em UX/UI Design e logica de programação!!

🌍 3. NOSSO OBJETIVO

Temos muitas ideias e trabalho, mas pouco tempo para desenvolvimento, como resolver isso?

Colher feedbacks dos USÚARIOS sobre sua experiência atual na plataforma, para visualizar as principais dores e sugestões. PESQUISA é a chave!

Promover uma melhor experiência para facilitar a vida do usuário no dia-a-dia. Para isso, oferecer um layout compatível com a nova marca do CSC Tornar as informações mais claras, visíveis e acessíveis em tela.

Criar protótipos e TESTAR as novas percepções!!

Para isso, priorizamos as tarefas e criamos um MVP focado nas funcionalidades da BARRA DE BUSCA, CHAMADOS e CHATBOT!

💺 4. EXPERIÊNCIA DO USUÁRIO

Utilizamos o FORMS para criar um formulário onde questionamos as principais funcionalidades que utilizam, se sente alguma dificuldade no portal se gostariam de acessar a plataforma por outros dispositivos.

Como resultado obtivemos os seguintes tópicos:

• Menu intuitivo;
• Uma área para poder gerar a senha;
• Botão copia e cola;
• Local com perguntas e respostas;
• mobile First.

🎨 5. Paleta de Cores

As cores do layout foram definifas através da pesquisa de úsuario.

🎯 6. Protótipos:

Os protótipos foram pensandos para facilitar a navegação e em trazer uma resposta rápida na busca por informações. Eles foram melhorados, testados e validados, sempre buscando a melhor USABILIDADE!

7. Objetivos de aprendizagem

Neste projeto construimos uma aplicação web (WebApp) que irá interagir com o usuário final através do navegador utilizando HTML, CSS e JavaScript como ferramentas.

HTML e CSS

• Uso de HTML semântico.
• Uso de seletores de CSS.

DOM

• Uso de seletores do DOM.
• Manipular eventos do DOM.
• Manipulação dinâmica do DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

• Manipulação de strings.
• Uso de condicionais (if-else | switch | operador ternário)
• Uso de laços (loops) (for | for..in | for..of | while)
• Uso de funções (parâmetros | argumentos | valor de retorno)
• Declaração correta de variáveis (const & let)

Testing

• Teste unitário.

Estrutura do código e guia de estilo

• Organizar e dividir o código em módulos (Modularização)
• Uso de identificadores descritivos (Nomenclatura | Semântica)
• Uso de linter (ESLINT)

Git e GitHub

• Uso de comandos de git (add | commit | pull | status | push)
• Gerenciamento de repositorios de GitHub (clone | fork | gh-pages)

UX

• Desenhar a aplicação pensando e entendendo o usuário.
• Criar protótipos para obter feedback e iterar.
• Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)

🚧 8. MELHORIAS FUTURAS:

• Implementação de hand talk;
• Implementação de busca por voz;
• Implementação de inteligencia artificial;
• Mobile;

👩‍💻 9. AUTORAS:

SQUAD ENIGMA.

https://github.com/bea-ferraz - https://github.com/Tauana-Pacheco - https://github.com/Julieteandrade - https://github.com/Paulinefreitas - https://github.com/yukaum - https://github.com/LethsOliveira - https://github.com/RafaelaCugini