Survis

Sobre o projeto

SurVision é uma proposta de interface para um WebApp de vigilância que utiliza reconhecimento facial e medição de temperatura para identificar pessoas e reportar quem estiver com temperatura acima do normal. A interface foi criado em 2021 durante a pandemia de covid-19.

Ferramentas

Wireframe, Stylesheet e Protótipo Navegável em Figma

Time

1 Designer, 1 Product Owner, 1 Developer

Minha Função

UI Designer

Desafios

"Criar um web app de vigilância com reconhecimento facial"

1. Produtos similares

Este WebApp é uma proposta de melhoria para um produto já existente, nos quais eu não participei de todo o processo. Meu principal objetivo era alterar a interface do produto para algo que não fosse tão rústico como o "Pure Material".

Minha pesquisa começa, então, analisando produtos similares de outras concorrentes. Tais produtos eram aplicações desktop, portanto eram bastante robustos. Eu precisava trazer algo mais simples e que destacasse as principais funcionalidades, uma vez que o app deveria funcionar em qualquer browser com acesso à internet.

aplicativo da Intelbras

aplicativo da Hikvision

1. Sketches

Para este projeto, onde peguei "o bonde andando", após o briefing comecei com os rascunhos no papel. A partir dos requisitos iniciais, pude construir partes do layout em papel e em seguida construir um wireframe, já de alta fidelidade, no Figma.

2. Tipografia

A tipografia utilizada foi a Roboto por ter uma licença livre, boa legibilidade e leiturabilidade em interfaces digitais.

3. Iconografia

Utilizei o pacote da Material Design Icons para a maioria dos ícones presentes no layout. Precisei fazer apenas alguns itens, pois a base de dados não possuia o que eu estava buscando.

4. Paleta de Cores

Procurei montar uma paleta de cores para um layout dark, com a ideia de que o WebApp seria utilizado em monitores por vigias de diversos tipos de estabelecimentos.

primary

#00F8BC

alert

#FF3838

atention

#F4DE6B

surface

#252A37

onSurface

#CFD4E3

background

#1D222B

onBgBtn

#10151F

graphGradient

Monitoramento

Visualização das câmeras disponibilizadas em mosaico personalizável. As detecções mais recentes são exibidas na lateral direita.

Detecções

A aba de detecções exibe uma lista com todos os rostos encontrados e as situações que o sistema identificou para aquele indivíduo. Também é possível filtrar e pesquisar a lista e imprimir um relatório personalizado.

Contador

O contador exibe a capacidade máxima do estabelecimento e o fluxo de pessoas por minuto (ou por outro parâmetro definido nas configurações). Para acessar o contador externo, é preciso clicar em Gerar Contador no canto superior direito.

Contador Externo

O contador externo é um mostrador para monitores. Exibe a quantidade de pessoas no estabelecimento, e indica se a pessoa pode ou não entrar na loja no momento, dependendo da capacidade atingida.

Etapas do Processo

Pesquisa