BioCheck

Inspiration

A questão climática é um tema em alta tendo em vista que no Relógio do Juízo Final faltam apenas cem segundos para a meia noite. Desastres naturais atingem diversas regiões do mundo na forma de secas e enchentes, extinção em massa de espécies e escassez de recursos necessários à nossa sobrevivência como espécie. Pensar em mudanças e soluções é uma necessidade de alta prioridade. Não existe um planeta b.
Após uma discussão com o grupo, percebemos que os maiores responsáveis pelas mudanças climáticas eram as grandes empresas. E por tal razão, passamos a nos debruçar acerca do que elas fazem atualmente e o que mais poderiam fazer para reverter o avanço do relógio.

What it does

É uma ferramenta que visa auxiliar as micro e pequenas empresas a se adequarem as normas ambientais internacionais vigentes, de maneira acessível e democrática, impulsionando a questão ambiental e o empreendedorismo brasileiro, criando uma ponte entre essas duas áreas tão importantes para esse momento que vivemos.

How we built it

Matriz CSD

Para começar, logo nos primeiros encontros, nós trocamos ideias e informações, visando o preenchimento da Matriz de Certezas, Suposições e Dúvidas (Matriz CSD) de forma a alinhar o que já sabemos, o que supomos e o que não temos conhecimento sobre a problemática escolhida Os tópicos que surgiram serviram de base para os questionamentos que levamos para a pesquisa de dados.

Deskresearch

Considerando que 87% das empresas desejam se tornar ‘empresas verdes’ por motivos competitivos — os consumidores estão dando preferência por produtos e serviços eco-friendly, e não se importam em pagar um pouco por isso — como essas empresas fazem isso? Uma das formas de conseguir demonstrar ao público sua preocupação com o meio ambiente é através do certificado ISO 14001. E o que é esse ISO 14001? A sigla ISO significa International Organization for Standardization (ou em português: Organização Internacional para Padronização), ou seja, um sistema internacional de normas para padronizar certos aspectos das empresas. No caso da ISO 14001, a norma se refere a implementação de um Sistema de Gestão Ambiental (SGA) que segue requisitos específicos que podem ser auditáveis para requerimento do certificado. Por ser uma norma internacional, acreditamos que representaria um grande valor para as empresas - principalmente as de grande porte. Tendo isso em mente, passamos a nos questionar como essas empresas podem conseguir esse certificado. Através dos dados coletados, percebemos que as empresas que mais se preocupam com isso são as empresas de grande porte, multinacionais, que percebem no certificado uma forma de conseguir um diferencial competitivo. Não foi possível encontrar informações sobre times internos voltados para o assunto, porém, percebeu-se que elas têm a tendência de contratar empresas terceirizadas de consultoria para auxiliá-los no processo de adaptação para conseguir retirar os certificados (ISO 14001 ou outros). Esse processo de consultoria e adaptação pode levar de 6 meses a 1 ano e meio. Depois da pesquisa, atualizamos mais uma vez a Matriz CSD.

Benchmark

Juntamente com a pesquisa de dados, também encontramos algumas empresas que ofereciam o serviço de consultoria. As companhias são: Verde Ghaia e VGResíduos.
A Verde Ghaia oferece o serviço especializado de consultoria para auxiliar as empresas no processo de adequação para retirada de certificados do tipo ISO, incluindo ISO 14001 que é o foco do nosso projeto. Ela oferece uma concorrência direta para o nosso produto.
A VGResíduos é especializada em administração de resíduos das empresas através de um software de auto gestão. Concorrência indireta conosco tendo em vista que eles apenas gerenciam uma parte do problema que a nossa empresa pretende resolver.

Moodboard

Construímos nossa Moodboard buscando inspirações para o nosso Design Concept com base no tema (meio ambiente e sustentabilidade). Isso serviu para nossa equipe criar um alinhamento visual em relação ao produto que será entregue.

Wireframe

Criamos o esqueleto (Wireframe) do nosso layout para verificar todas as seções que podemos precisar e ter uma ideia do que queremos mostrar antes de prosseguir com a prototipagem sem sequer entender o que o usuário precisa e com o que se sente confortável. A ideia foi criar um layout mais atual e limpo onde o usuário tenha acesso a informações técnicas sobre os produtos e de fácil navegação. Depois que aprovamos com o time alguns aspectos gráficos, começamos a pensar no guia de estilo.

Criação do Design System e Guia de Estilo - Diretrizes do Design

Depois que finalizamos o esqueleto (wireframe), chegou o momento de focar nos aspectos gráficos. Criamos o Design System juntamente com o seu guia de estilo (Style Guide) para melhorar a comunicação entre nossa dupla de design e de desenvolvedores. Para assegurar que os padrões de elementos, cores e tipografia tivessem uma boa consistência durante o desenvolvimento do produto. No Guia de estilo também criei especificações dos elementos de UI, ou seja, os tamanhos, espaços e margens que eles deviam possuir. Assim como todas especificações dos componentes e elementos funcionais e como se adequam visualmente a interface, visando facilitar o trabalho dos desenvolvedores. Dessa forma, o desenvolvimento do Design System foi fundamental para melhorar os processos não só da área de design, mas também dos desenvolvedores.
O desafio de criar uma interface atraente para os olhos e fácil de navegação envolve muitas decisões. A decisão central foi projetar pensando na usabilidade e na acessibilidade, buscando deixar a interface visualmente mais atrativa, navegável e com uma boa experiência de uso.
Os principais fatores que nos guiaram nas decisões relacionadas a interface ao longo desse projeto foi: Criar uma interface que fosse acessível a um maior número de pessoas.

ESCOLHA DAS CORES

As cores são essenciais para qualquer produto, seja ele digital ou físico, e anda de mãos dadas com o posicionamento e a mensagem que uma marca deseja transmitir aos seus usuários. Como dito anteriormente, nossas inspirações visuais durante a construção da MoodBoard foram relacionadas ao tema meio ambiente. Busquei referências em organizações que têm um forte apelo a pautas ambientais e sustentabilidade sendo o mais notório deles o Greenpeace. Por essa razão escolhi a cor verde (#4E9453) como cor primária para esse projeto. Após a escolha da cor primária e o background na cor (#FCFCFC) seguimos testando paletas de cores que tivessem harmonia com ela. Chegamos a conclusão que seria melhor trabalhar com tons e sombras em cima da cor primária por se tratar de uma boa prática de design. O resultado final foi um design limpo com uso de cores simples e agradáveis com bom contraste na parte textual.

ESCOLHA TIPOGRÁFICA

Conteúdo textual e tipografia também fazem parte de nossa experiência de produto e interface. Por essa razão, esses elementos também precisavam ser bem planejados. Esse planejamento consistiu em um estudo, criação, aplicação de caracteres, fontes e de seus diferentes estilos e formatos na composição de palavras e blocos de textos dentro do guia de estilo. Escolhi a fonte Poppins por ser uma fonte geométrica sem serifa que apresenta um design elegante. O design geométrico preciso de seus caracteres o torna adequado para os cabeçalhos e para o texto do corpo. Outra razão foi porque a fonte também tem 9 pesos diferentes.

GRID

A Grid de 12 colunas também corresponde a semântica da variante da grid de 4 e 8 pixels que é bastante utilizada no bootstrap, o que facilita a responsividade e é escalável entre diferentes plataformas, tanto menores quanto maiores. Algumas outras decisões baseadas em acessibilidade foram:
● Criação de Layout simples e consistente;
● Divisão do conteúdo com sub-Títulos e Imagens;
● Construção de layout linear e lógico baseado na estrutura semântica do html5 garantindo boa leitura em ampliações;
● Botões e notificações dentro de um contexto;
● Grandes áreas clicáveis;
● Espaçamento entre campos de formulários. Construir um protótipo de alta fidelidade foi muito útil no processo de validação. Agora o design pode ser lucrativo e pode ser aplicado a uma empresa e ao cliente certo.

Logotipo

A escolha do logotipo levou em consideração alguns fatores: Concordância com a palheta de cores utilizadas para o projeto, o globo representando o certificado internacional ISO 14001, o ‘check’ por todas as tarefas que a empresa já realiza que estão alinhadas com a temática de sustentabilidade, e o ‘bio’ que significa ‘vida’. Desenvolvimento

Escolha das stacks

Em conjunto com a equipe de UI/UX a equipe optou por utilizar JS vanilla e bootstrap como framework CSS na estilização, utilizando sintaxe da biblioteca Jquery em alguns trechos do código.

Organização e arquitetura

Para melhor legibilidade de máximo desacoplamento de blocos, foi adotado o padrão MVC, utilizando services como apoio. Para dar vida ao protótipo foram observados assim como mencionado acima a acessibilidade para o usuário e a simplificação do projeto, possibilitando a leitura do mesmo por pessoas “leigas” em tecnologia.
###Pensamento para novas funcionalidades
As stacks e arquiteturas acima mencionadas visam em um futuro modificações pertinentes junto a equipe de projeto, como a monetização, atualmente obrigatória, passando a ser opcional. Desta forma democratizando o acesso ao produto buscando atingir um público maior, causando assim real impacto no empresário de micro, pequeno e médio porte. Questão essa ainda em estudo pela equipe de produto.
###Migração de dados para um back end Em uma discussão interna, a opção foi para esse MVP não implementar ainda a conexão com o banco de dados, para testes iniciais foi utilizado manipulação de DOM e algorítimos matemáticos, possibilitando um rápido desenvolvimento de dashboard e visualização dos relatórios gerados.

Conceito de página dinâmica

O desenvolvimento final resultou em apenas 2 documentos html, uma landpage onde a ideia e o produto é apresentado ao usuário e a segunda é uma página única, dinâmica para renderização das views, mesmo recorrendo à JS vanilla a opção era ir além e desvendar o código-fonte das mais diversas bibliotecas de front end, como React, por exemplo, e aplicar ao projeto, indo um pouco além da ferramenta já pronta.