Page 1

Design Kit VersĂŁo 1.0 Novembro 2018


Seja bem vindo ao Design Kit do Cucadu! Este documento representa os esforços colaborativos de nossa equipe para documentar e manter uma história consistente em todos os elementos usados no projeto Cucadu. Ele contém um resumo do pensamento por trás de nossa marca, uma visão geral do estilo criativo e explicações dos elementos básicos de nossa identidade. Por favor, permita-se tomar um momento e não apenas saber, mas também sentir, as razões que nos guiaram neste projeto e neste estilo.


Sumário 4 Introdução

39 Marketing

5 O Projeto 6 Público Alvo 7 Personas

40 Estratégia de comunicação 42 Landing page 44 Facebook 48 Youtube 50 Instagram

11

Identidade Visual

12 Painel semântico 14 Moodboard 15 Visão geral do logo 16 Conceito de criação 17 Paleta de cores 18 Tipografia 19 Construção do logo 21 Variações 22 Reduções 23 Versões monocromáticas 24 Versões em tons de cinza 25 Usos indevidos 26 Aplicações com fundo 27 UI Kit 28 Jornada do consumidor 30 Wireframes 32 Grid 34 Sitemap 36 Layouts

53 Tecnologias 54 56 58 60 62 64

Diagrama de serviços Desenvolvimento backend Desenvolvimento frontend Direção de arte Marketing e plano de negócios Realidade aumentada

65 Comercial 66 Empresa 68 Custos 69 Receita 70 Planejamento

72

Equipe NaN


Introdução O Projeto Público Alvo Personas


O Projeto O Cucadu veio ao mundo com a intenção de, se não sanar, amenizar ao máximo um dos maiores problemas da nossa época: a falta de interação social. A tecnologia traz grandes avanços, mas a longo prazo pode causar enormes prejuízos a nossa forma de interagir e socializar. Através de uma plataforma educacional de apoio para crianças que utiliza elementos de Realidade Aumentada e Gamificação, buscamos fazer com que nossas crianças interajam mais entre si e que estejam mais preparadas e fortalecidas contra males provenientes do mau uso da tecnologia que podem causar desde isolamento até depressão.

Cucadu Design Kit

Versão 1.0

Novembro 2018

5


Público Alvo

Primário

Secundário

Nosso público primário consiste em empresas privadas ou estatais com interesse neste tipo de tecnologia na área da educação. Isso abrange desde escolas particulares até secretarias da educação que consequentemente estão ligadas a escolas públicas.

6

Versão 1.0

Nosso público secundário são crianças na faixa escolar do ensino fundamental. Para atingir nosso objetivo de interação e inclusão, todas as crianças serão consideradas, porém com esforços adicionais para aquelas com dificuldade de interação social e aprendizagem.

Novembro 2018

Cucadu Design Kit


Personas Evandro Frisken 48 Anos Ceo Área da Educação Conhecimento em tecnologia avançado

Objetivos Aumentar a vontade de aprender e de se comunicar da criança através do fascínio natural que ela tem por coisas novas.

Motivações Ser reconhecido como referência de ensino inovador e eficiente.

Desafios Manter a qualidade de ensino na instituição e aumentar a receita. Cucadu Design Kit

Ganhos

Dores

Gosta de investir em novas tecnologias; Oferece didáticas diferenciadas; Assume riscos; É organizado; Se preocupa com o futuro social;

Falta de Interação Social entre seus alunos; Aprendizado defasado; Falta de interesse em conhecimento; Sente que seu trabalho não está fazendo a diferença;

Versão 1.0

Novembro 2018

7


Personas Alberto Faria 42 Anos Secretário da Educação Área da Educação Conhecimento em tecnologia intermediário

Objetivos

Motivações Expansão qualitativa e atualização permanente.

Desafios Aumentar a qualidade do ensino. Disponibilizar novas experiências para as crianças. 8

Estimular a interação das crianças entre si e com o corpo docente. Direcionar positivamente a atenção das crianças para as matérias vigentes graças ao novo estilo de aprendizado.

Ganhos

Dores

Gosta de conhecer novas tecnologias; Gostaria de igualar a qualidade das escolas públicas; É organizado;

Falta de Interação Social entre seus alunos; Falta de interesse em conhecimento; Taxa insatisfatória de aprovados no vestibular;

Versão 1.0

Novembro 2018

Cucadu Design Kit


Personas Alice Lins 08 Anos Estudante Conhecimento em tecnologia intermediário

Objetivos Fazer com que as pessoas ao seu redor gostem cada vez mais dela.

Motivações Crescer para perder a timidez

Cucadu Design Kit

Ganhos

Dores

Grande interesse pelo aprendizado; Gosta de conhecer novas tecnologias;

Dificuldade em socializar com novas pessoas; Baixa autoconfiança;

Versão 1.0

Novembro 2018

9


Personas Paulo Cruz 10 Anos Estudante Conhecimento em tecnologia intermediário

Objetivos Dar o seu melhor nos estudos para orgulhar seus pais

Motivações Medo de castigos

10

Ganhos

Dores

Facilidade em socializar; Curioso por diversos assuntos; Facilidade com novas tecnologias;

Dificuldade em aprendizagem; Baixa autoconfiança; Falta de concentração;

Versão 1.0

Novembro 2018

Cucadu Design Kit


Identidade Visual Painel semântico

Reduções

Grid

Moodboard

Versões monocromáticas

Sitemap

Visão geral do logo

Versões em tons de cinza

Layouts

Conceito de criação

Usos indevidos

Paleta de cores

Aplicações com fundo

Tipografia

UI Kit

Construção do logo

Jornada do consumidor

Variações

Wireframes

Cucadu Design Kit

Versão 1.0

11


Painel Semântico

Moodboard

12

Versão 1.0

Novembro 2018

Cucadu Design Kit


Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

13


Moodboard

14

VersĂŁo 1.0

Novembro 2018

Cucadu Design Kit


Visão geral do logo Estas são as versões primárias do logo em posição vertical e horizontal respectivamente.

Cucadu Design Kit

Versão 1.0

Novembro 2018

15


Conceito de criação e significado Para o símbolo, procuramos resgatar graficamente os sentidos do projeto. As 4 cores usadas no projeto representam as áreas do conhecimento, a saber: Matemática, Linguagens, Ciências Humanas e Ciências da Natureza.

O balão de fala, remete a comunicação, ou seja, interação social, que é o objetivo central do projeto.

O símbolo do cérebro humano é comumente associado a ciência e conhecimento, e nossa aplicação prática é através da educação escolar como meio para se obter esse conhecimento.

Por fim temos CUCADU:

Versão 1.0

Novembro 2018

nome

CUCA = Cabeça. Forma mais informal que vai de encontro ao vocabulário comum de crianças. DU = eDUcação.

16

o

Cucadu Design Kit


Paleta de cores As cores foram definidas a partir do Moodboard como 2 principais e 2 secundárias com suas respectivas variações de tonalidade. Isso foi necessário pois ao trabalhar com polígonos e suas características de fragmentação, muitos tons análogos são usados e portanto devem sem definidos e padronizados. 1 Cor primária

P B800

B700

B600

B500

B400

B300

B200

B100

R700

R600

R500

R400

R300

R200

R100

Y700

Y600

Y500

Y400

Y300

Y200

R500 Pantone Warm Red C # E94C4C Pantone 100 C # FFE963

2 Cor secundária

G400 Pantone 584 C # CDD95A

S Y800

Pantone 2995 C # 20A7E0

Y300

P R800

B400

Y100

Gray S G800

G700

G600

G500

G400

G300

Cucadu Design Kit

G200

G100

3 Variações de tons

Versão 1.0

Novembro 2018

Pantone Cool Gray 11 C # 54565A

17


Tipografia Ubuntu

Aa

A Ubuntu foi escolhida para títulos. Suas principais características são suas combinações de formas curvas com ângulos retos nas extremidades e alguns glifos estilizados como o ‘f’ e ‘t’, causando um efeito mais futurístico que vai de encontro a tecnologia do projeto em VR.

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽ abcčćdđefghijklmnopqrsštuvwxyzž 1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

Linotte

Aa

Didact Gothic

Aa

A Didact Gothic foi escolhida como padrão para corpo de texto e demais aplicações exceto elementos da UI. Como o próprio nome sugere, foi desenvolvida essencialmente para fins didáticos, apesar de ser sem serifa. Isso significa uma melhor legibilidade em mídias físicas e digitais sem causar cansaço visual após uma leitura contínua. Para o nosso projeto, que tem fins educacionais, essa fonte é fundamental para maximizar a proposta da identidade.

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽ abcčćdđefghijklmnopqrsštuvwxyzž 1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

A Linotte foi escolhida como fonte padrão para os elementos da UI, pois seu formato arredondado vai de encontro com formas mais infantis e também causa um contraste com as formas da identidade (que são polígonos retos), pois de outra forma não seria possível obtermos uma característica mais infantil aos elementos.

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽ abcčćdđefghijklmnopqrsštuvwxyzž 1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

18

Versão 1.0

Novembro 2018

Cucadu Design Kit


Construção do logo As formas do logo foram padronizadas a partir de círculos e ovais que ajudam a criar uma comunicação visual mais suave e infantil. Foi considerada a altura da letra U para a margem de segurança.

Cucadu Design Kit

Versão 1.0

Novembro 2018

19


Construção do logo O uso da malha construtiva tem o objetivo de estabelecer proporções para reprodução em mídias físicas de larga escala. As proporções foram distribuídas em uma malha de 12x10 para a versão vertical e 18x06 para a versão horizontal.

20

Versão 1.0

Novembro 2018

Cucadu Design Kit


Variações Aqui estão todas as variações permitidas para o logo. O uso de cores sólidas deve ser usado majoritariamente em mídias físicas no caso da reprodução original apresentar falhas.

Cucadu Design Kit

Versão 1.0

Novembro 2018

21


Reduções Para que o logo não perca sua legibilidade e detalhes, é estabelecido uma redução máxima de 30 mm de altura. Note entretanto que o logo com a tipografia só pode ser usado com uma redução máxima de 60 mm de altura. Em suas versões sólidas e monocromáticas, os espaços que separam cada forma do logo aumenta proporcionalmente a medida que o logo diminui, evitando que ocorra uma mistura visual das formas pelo olho devido ao tamanho pequeno.

60 mm de altura 170 px de altura

30 mm de altura 85 px de altura

22

Versão 1.0

Novembro 2018

Cucadu Design Kit


Versões monocromáticas Para fins de acessibilidade e demais restrições de reprodução, seguem as versões monocromáticas.

Cucadu Design Kit

Versão 1.0

Novembro 2018

23


Versões em tons de cinza Para fins de acessibilidade e demais restrições de reprodução, seguem as versões em tons de cinza.

Preto 50%

Preto 70%

Preto 40%

Preto 30%

24

Versão 1.0

Novembro 2018

Cucadu Design Kit


Usos indevidos Devem ser evitadas aplicações indevidas da marca para que se mantenha uma consistência visual em todos os canais.

Não troque as cores.

Não use efeitos de outline.

Cucadu Design Kit

Não mude a posição dos elementos.

Não distorça o logo.

Versão 1.0

Novembro 2018

25


Aplicações com fundo Para fins de acessibilidade e manutenção da legibilidade do logo, deve-se sempre priorizar versões que causam o maior contraste possível em relação ao fundo aplicado. Nos casos onde apenas a tipografia não apresente contraste suficiente, é permitido mudar sua cor para branco apenas.

26

Versão 1.0

Novembro 2018

Cucadu Design Kit


UI Kit Botões

Inputs

Avatares (Simples)

Avatares (Completo) Ícones Checkboxes

Cucadu Design Kit

Versão 1.0

Novembro 2018

27


Jornada do Consumidor A jornada do consumidor no Cucadu depende do público alvo e sistema sendo acessado. A jornada de trabalho do professor é diferente do aluno, porém é necessário por exemplo que o professor ative uma matéria para que o aluno possa realiza-la.

28

Versão 1.0

Novembro 2018

Cucadu Design Kit


Desta forma, a jornada do aluno e a do professor estão conectadas, principalmente no momento da realização da ativadade. Porém, enquanto os professores se preocupam com os resultados pelo ensino dos alunos, os alunos buscam competição e premiações.

Cucadu Design Kit

Versão 1.0

Novembro 2018

29


Wireframes Ambos o sistema web (professor) e aplicativo móvel (aluno) foram projetados com uma estrutura simples, prática e direta ao ponto. A identidade visual do sistema é aplicada como algo mais infantil, com elementos poligonais e orgânicos.

30

Versão 1.0

Novembro 2018

Cucadu Design Kit


Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

31


Grid Os wireframes e a interface foram desenvolvidos seguido um gride octagonal (multiplos de 8). Todos os elementos com tamanho e espaçamento fixos utilizamse dessa grid, com os valores 8, 16, 32 e 64 sendo utilizados frequentemente. Porém, para aplicar responsividade, os elementos possuem comprimentos dinâmicos, utilizando porcentagem total da tela através do Flexbox.

32

Versão 1.0

Novembro 2018

Cucadu Design Kit


Grid Octagonal utilizada nos Wireframes

Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

33


34

VersĂŁo 1.0

Novembro 2018

Cucadu Design Kit


Sitemap (Web) O sistema Web é dividido entre duas áreas principais: Landing Page e App. A Landing Page é uma página única, com informações da empresa e do produto. O App se altera dependendo do usuário que o acessar.

Cucadu Design Kit

Versão 1.0

Novembro 2018

35


Layouts (App Desktop)

36

VersĂŁo 1.0

Novembro 2018

Cucadu Design Kit


Layouts (App (Desktop) Mobile)

Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

37


38

VersĂŁo 1.0

Novembro 2018

Cucadu Design Kit


Marketing Estratégia de Comunicação Landing Page Facebook YouTube Instagram

Cucadu Design Kit

Versão 1.0

39


Estratégia de Comunicação Keywords Tool Esta ferramenta online consegue listar diversas palavras utilizadas nos mecanismos de busca baseada na palavra central, disponibilizando uma lista em excel com todas as variações possíveis para a mesma. Google AdWords Utilizando a planilha feita no Keyword Tool, será possível estabelecer a quantidade real de clicks de maneira individual de cada palavra junto ao seu CPC (Custo por clique) e CPE (Custo por engajamento). É desta maneira que será possível selecionar os melhores termos para serem trabalhados. Link Building Trata-se de um conjunto de estratégias que possuem o objetivo de construir links externos que transfiram sua autoridade para o nosso site, objetivando a melhora da sua busca orgânica para gerar tráfego.

Versão 1.0

Novembro 2018

Cucadu Design Kit


SEO - Search Engine Optimization Guest Post Ele consiste em uma postagem original em sites que já tenham autoridade para os mecanismos de busca, gerando backlinks de qualidade para o nosso site. É importante que, durante a pesquisa, os sites a serem escolhidos tenham a mínima relação com o assunto principal do nosso produto. Após o inicial sucesso do produto, as próprias escolas contratantes do mesmo, utilizando seu nome já ativo no mercado, poderão gerar backlinks em parceria. Redes Sociais Utilizando postagens de conteúdo com qualidade, ao mesmo tempo que as mesmas contemplem um link para o nosso site, será possível conquistar reações e compartilhamentos do público atingido. Compartilhamentos, comentários e reações são sinais sociais que desempenham um importante papel para os mecanismos de busca e, aliadas às planilhas com as palavras chave mais buscadas, será possível realizar postagens com os temas mais buscados na web relevantes ao tema.

Cucadu Design Kit

Versão 1.0

Novembro 2018

41


Landing Page A Landing Page é o primeiro ponto de contato com nossos potenciais clientes, sendo de extrema importância para apresentar nosso negócio e engajá-los, atuando principalmente na captação de Leads que posteriormente serão trabalhados em campanhas de conversão.

Versão 1.0

Novembro 2018

Cucadu Design Kit


Captação de Leads Nossa Landing Page trará elementos voltados a completa conversão de Leads, trabalhando-os nas campanhas de marketing digital. Desta maneira, a página contará com poucos links, deixando a visualização do usuário mais específica frente ao nosso produto. Após suas respectivas inclusões, os Leads serão divididos em 2 partes para qualificação: Perfil da empresa / Intenção de compra Abordagem mais comercial junto ao estudo da instituição. Esta qualificação irá consistir na aproximação do cliente ideal da nossa empresa. Tal análise seguirá alguns critérios, tais como: tipo da instituição, histórico, investimento tecnológico, localização e público. De acordo com a análise, os Leads poderão ser divididos em subgrupos A, B e C, impactando tanto na sua urgência de abordagem quanto ao tipo da mesma. Usuários não-comerciais Usuários que foram, de maneira direta ou indireta, atingidos pelo nosso conteúdo. Neste caso, poderão receber novidades ou campanhas focadas em divulgação de outros públicos.

Cucadu Design Kit

Versão 1.0

Novembro 2018

43


Facebook Devido a sua facilidade em análise de tráfego, possibilidade de links na publicação, impulsionamento geral e segmentado junto a possibilidade de parcerias, o Facebook torna-se a estratégia principal de comunicação direta com o público alvo. Suas postagens também poderão ser aproveitadas no Instagram.

Versão 1.0

Novembro 2018

Cucadu Design Kit


Facebook Market Place and Search Engine O investimento do Facebook com os negócios vem crescendo cada vez mais, visando também tornar-se um buscador para fazer as pessoas buscarem marcas e produtos sem precisar de intermédios, criando um verdadeiro Marketplace. Com isso, decidimos trabalhar/melhorar o SEO da nossa página no próprio Facebook com algumas técnicas, tais como: Conteúdo constante com termos buscados Serão realizadas postagens frequentes de acordo com os temas mais buscados, contribuindo gradativamente para a autoridade da página na rede e gerando conteúdo interessante para os usuários. Depoimentos de usuários do produto também serão visados; Indexar o nome dela Ao utilizar termos com considerável volume de busca, assim como os mecanismos tradicionais de busca, o Facebook inclui a palavra para suas prioridades com mais propriedade e qualidade para o SEO. Por conta disso, podemos utilizar nomes como “Cucadu – Realidade Virtual para o ensino” e mais exemplos; Criação de eventos no Facebook Criar o nome do evento para que o mesmo crie uma URL faz com que o mecanismo de busca do Google o rastreie, aumentando ainda mais a popularidade interna do nosso produto. Webinários e workshops podem fazer parte da lista de eventos a se criar;

Cucadu Design Kit

Versão 1.0

Novembro 2018

45


Criação de vídeos com palavras chave Colocar as palavras chave em foco no SEO no título dos vídeos também podem ajudar na otimização do Facebook ao buscar os termos; Grupo com conteúdo e relevância Além de estimular ainda mais a visualização do produto naturalmente, podemos criar grupos relevantes e com conteúdo ao tema. Tais grupos não poderão ser feitos sem necessariamente conter o nome do produto em seu título. Porém, ao gerar conteúdo relevante e estimular debates, informações e reações dos usuários, o Facebook poderá dar ainda mais importância para os links inseridos em algumas das publicações.

Facebook Ads - Impulsionamento Impulsionar as publicações no Facebook é uma as melhores maneiras de começar a ter visibilidade no mercado. As vantagens desta estratégia incluem: Fixar a publicação no canto superior do feed, sendo o primeiro lugar que o usuário dirige o olhar graças às mensagens e atualizações; Segmentar as postagens por Geolocalização; Definição de quantos dias a publicação será veiculada.

Versão 1.0

Novembro 2018

Cucadu Design Kit


Análise de dados Valendo tanto para a estratégia orgânica primária quanto a seguinte patrocinada, é possível realizar a análise do alcance de cada publicaçãojunto às futuras reações dos usuários. Ferramentas de publicação Nesta ferramenta, é possível analisar o alcance e cliques/ações dos usuários, também gerando feedbacks negativos como ocultar publicação e denunciar como spam; Ferramentas para anúncios Além das pessoas alcançadas e reações dos anúncios, é possível analisar as pessoas alcançadas, envolvimentos com a publicação e cliques nos links. Ainda nesta ferramenta, podemos analisar a quantidade investida e sua utilização na campanha.

Cucadu Design Kit

Versão 1.0

Novembro 2018

47


YouTube Divulgar o nosso canal do Youtube é essencial para produzir um bom conteúdo audiovisual. Além disso, é possível utiliza-lo para trazer novas possibilidades de mercado de maneira progressiva com os inscritos junto a promoção do seu SEO.

Versão 1.0

Novembro 2018

Cucadu Design Kit


Manter-se ativo junto a bons conteúdos Quanto mais atividade nosso canal desempenhar, melhor posicionado ele ficará nas prioridades de busca. Por isso, a interação com os nossos usuários e com outros temas relevantes torna a estratégia principal para manter a atividade. Utilização de palavras chave Ao utilizar novamente as palavras mais buscadas, será possível realizar títulos com mais visibilidade nos mecanismos de busca tanto normais quanto do próprio Youtube. Promoção do canal no site e redes sociais Compartilhamento de novos vídeos no Facebook e Instagram, avisando assim que um novo vídeo fique disponível. Análise de estatísticas Ao utilizar a ferramenta de estatística do Youtube, é possível analisar os vídeos mais acessados, alcance, interesse dos espectadores, desenvolvimento do público e visão geral das publicações.

Cucadu Design Kit

Versão 1.0

Novembro 2018

49


Instagram Utilizando o perfil comercial, junto a postagens frequentes de Stories e anúncios sem precisar necessariamente do Facebook, será possível utilizar os Insights do Instagram para fornecer estatísticas sobre as impressões junto ao alcance das postagens.

Versão 1.0

Novembro 2018

Cucadu Design Kit


Conteúdo em Stories e publicações A rotina dinâmica do produto, contemplando suas ações diárias, será repassada em Stories na rede. Já as publicações mostrarão curiosidades, anúncios, depoimentos e vídeos de até 1 minuto. Os textos deverão ser complementares a uma determinada imagem ou vídeo, ou seja, publicações ou Stories com muito texto serão dispensados; Perfil comercial / Conta de Negócios Dizer em poucas palavras do que o produto se trata. Com isso, as pessoas atingidas dentro das campanhas de marketing terão mais interesse para visualizar e seguir. O perfil poderá contar com o link do site e uma foto mostrando o produto já em uso, uma vez que a marca ainda não é conhecida no mercado e pode não gerar o interesse necessário. A conta de negócios fornecerá mais ferramentas tais como análise de dados, métricas, engajamento e possibilidade publicações patrocinadas; Vínculo do perfil com o Facebook Ao utilizar o mesmo nome nas duas redes sociais, é possível vincula-las. Com isso, o usuário será abordado naturalmente por ambas as redes; Cucadu Design Kit

Versão 1.0

Novembro 2018

51


Utilização de hashtags É possível pesquisar uma hashtag no Instagram, agindo como um mecanismo de busca para um determinado termo. Utilizando hashtags que sejam coerentes ao tema, aliado a pesquisa de palavras chave, utilizaremos tais hashtags para complementar a busca orgânica; Lives Os vídeos ao vivo podem ser utilizados durante workshops e novidades do produto, aproveitando a audiência já conquistada pelas estratégias anteriores e estimulando o compartilhamento. Esta estratégia também potencializa a quantidade de conteúdo relevante para o usuário; Responder Directs e Comentários das postagens Aproveitando o engajamento dos usuários é possível tirar possíveis dúvidas, realizar parcerias ou conseguir direção para futuros negócios. As respostas também poderão gerar discussões para dinamizar o conteúdo.

Versão 1.0

Novembro 2018

Cucadu Design Kit


Tecnologias Diagrama de Serviços Desenvolvimento Backend Desenvolvimento Frontend Direção de arte Marketing e Plano de Negócios Realidade Aumentada

Cucadu Design Kit

Versão 1.0

53


Diagrama de Serviรงos

54

Versรฃo 1.0

Novembro 2018

Cucadu Design Kit


Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

55


Desenvolvimento Backend A estrutura Backend do Cucadu foi desenvolvida para funcionar separadamente do Frontend, principalmente devido ao fato que o Frontend está dividido entre a interface Web e o aplicativo Mobile. O sistema foi completamente desenvolvido utilizando NodeJS 10 LTS, em TypeScript, utilizando o Framework ExpressJS 4 para estruturar o servidor em APIs. O banco de dados escolhido foi MongoDB, devido a sua facilidade e conexão ao NodeJS, e a sua velocidade. Porém, as APIs foram definidas utilizando o padrão GraphQL, com alternativas em modo REST.

56

Versão 1.0

Novembro 2018

Cucadu Design Kit


Express Js 4

Node Js 10

Mongo DB

Typescript

GraphQL

Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

57


Desenvolvimento Frontend O Frontend do Cucadu é divido em duas estruturas diferentes para os professores e os alunos.

Professores e Administradores Os professores e Adminstradores acessam o Cucadu através de um sistema Web, desenvolvido utilizando React, em JavaScript. Para executar a conexão via GraphQL, foi utilizado Apollo. O sistema inteiro foi desenvolvido em componentes, que são estruturados pelo próprio React, utilizando React Router.

Alunos Os alunos acessam o Cucadu através de uma aplicativo Mobile, para Android, desenvolvido utilizando React Native, em JavaScript. O React Native permite utilizar uma estrutura similar a Web para criar um aplicativo que é compilado na linguagem nativa do Android. Para utilizar o sistema, os alunos precisam baixar e instalar o aplicativo, disponível na Play Store. 58

Versão 1.0

Novembro 2018

Cucadu Design Kit


Apollo

React

React Native

React Router

Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

59


Direção de arte A direção de arte foi desenvolvida utilizando os maiores e amplamente conhecidos softwares do mercado, visando uma maior produtividade e qualidade nas peças desenvolvidas. Para os elementos gráficos foi utilizado o Adobe Illustrator pela facilidade na manipulação de elementos vetoriais, posteriormente migrados para o Figma, ferramenta própria para criação de protótipos de alta fidelidade, para o aplicativo e demais peças digitais. As edições de imagem por sua vez ficaram a cargo do Adobe Photoshop, também usado para simulações e mockups. O Adobe Indesign foi utilizado para criação das peças gráficas com alta manipulação de texto, como a monografia e este próprio documento. Para a criação e edição do vídeo corporativo, foi utilizado o Adobe Premiere e o Adobe After Effects. 60

Versão 1.0

Novembro 2018

Cucadu Design Kit


Figma

Adobe InDesign

Adobe After Effects

Adobe Illustrator

Adobe Photoshop

Adobe Premiere

Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

61


Marketing e Plano de Negócios As ferramentas usadas para o marketing são amplamente conhecidas pela sua precisão na mensuração de dados e planejamento estratégico de campanhas de marketing. Para rankeamento orgânico através do Google, será utilizado o keyword tool e Link Building. A técnica de Guest Post será utilizada visando também um melhor SEO e oportunidades de alcance maiores de público principalmente nos primeiros meses de atividade. Para campanhas personalizadas com foco no público alvo definido, serão usados o Facebook Ads e o Google Adwords. O Facebook Marketplace será usado como forma mais prática de ofertar nossos produtos. Por fim, a estruturação e análise de dados contábeis através de gráficos, ficou a cargo do Microsoft Excel.

62

Versão 1.0

Novembro 2018

Cucadu Design Kit


Google Adwords Link Building Microsoft Excel

Guest Post Facebook Ads

Keyword Tool Facebook Marketplace Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

63


Realidade Aumentada O desenvolvimento para VR e AR foi realizado utilizando duas bibliotecas primárias. Para executar um ambiente VR usando elementos 3D, foi utilizado o A-Frame, que é um framework web para criar experiências de realidade virtual e realidade aumentada. O A-Frame funciona ao inserir tags HTML especiais que é detectada Aframe pela biblioteca e cria um cenário ou objeto utilizando WebVR. Desta forma, para executar o modo VR, a Galeria do Aplicativo carrega uma página Web que possui o A-Frame configurado, permitindo que o usuário ative o modo VR, encaixe o óculos em um dispositivo e tenha a experiência VR. Para executar o AR, foi utilizado uma biblioteca chamada AR Js AR.JS. Essa biblioteca permite gerar marcadores de realidade aumentada com um QR code. Esse QR Code contém o link para uma página configurada com A-Frame. O AR.JS converte esse ambiente 3D do A-Frame e o insere em cima do marcador de realidade virtual. Assim como no VR, ao ativar o modo AR, o app carrega uma página configurada com AR.JS, que abre a câmera do usuário e permite identificar o marcador, e carregar o 3D. 64

Versão 1.0

Novembro 2018

Cucadu Design Kit


Comercial Empresa Custos Receita Planejamento

Cucadu Design Kit

VersĂŁo 1.0

65


Empresa Para estruturar a empresa, foi desenvolvido todo o projeto no formato do PM Canvas. A empresa será formada por 5 sócios, em uma Sociedade Limitada (LTDA), de nome comercial Cucadu Design & Tecnologia LTDA. Cada sócio terá uma parcela de R$ 10.000,00 de capital inicial, totalizando a abertura da empresa com valor de R$ 50.000,00 (não integralizados).

66

Versão 1.0

Novembro 2018

Cucadu Design Kit


Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

67


Custos Para reduzir o custo inicial, a empresa será estruturada com o formato de uma Startup de tecnologia. Assim, não será alugado um escritório, e sim alugado uma sala privativa para 6 pessoas em um espaço de CoWorking. Abaixo segue os custos para estruturação da empresa:

Espaço CoWorking

Salário (pro-labore)

R$ 5.400,00 / mês

R$ 18.799,05 / mês

TI (Investimento Inicial para 2 anos)

Total / ano

R$ 43.261,85

68

Versão 1.0

R$ 333.650,45

Novembro 2018

Cucadu Design Kit


Receita A receita do aplicativo é obtida através da venda de licenças de utilização do aplicativo. Cada conta para um aluno, professor ou administrador é cobrada, de acordo com o nível da conta. Foram realizados estudos de acordo com o tamanho de escolas no público alvo e considerado valores de acordo com o tempo de adesão do sistema. Os valores das licenças são R$ 30,00, R$ 100.00 e R$ 200.00 para alunos, professores e administradores, respectivamente. Período Esperado para Lucro

Tempo Projetado

18 meses

36 meses

Maior valor do caixa

Menor valor do caixa

R$ 24.856,16

R$ 565.292,71

Cucadu Design Kit

Versão 1.0

Novembro 2018

69


Planejamento O gráfico ao lado demonstra o planejamento realizado para o valor do caixa acumulado (laranja) e a mudança do caixa por mês (azul). Mais detalhes podem ser encontrados na planilha de negócios anexada.

70

Versão 1.0

Novembro 2018

Cucadu Design Kit


Cucadu Design Kit

VersĂŁo 1.0

Novembro 2018

71


Equipe Marcos Vinicius Moreira Diretor de Arte & Design

Michel Costa Desenvolvedor Backend

Leonardo Rocha Diretor de Marketing

João Vitor Brandão Desenvolvedor Frontend

Diego Mendez Diretor de Administração e Recursos Humanos

Obrigado!

Projeto Cucadu  
Projeto Cucadu  
Advertisement