Ágora design Kit by icaroms13

Design Kit

Eduardo Sampaio Icaro Matos Ivana Costa Lucas Marcolino Marcelo Sousa Natalia Feitosa Pedro Baptista

sumário Sumário

público alvo

personas

biblioteca de padrões

layouts

iconografia

comunicação

tecnologias

prazos e custos

Terminar 24

painel semântico

wireframe navegação

jornada do usuário

wireflow

pĂşblico alvo

público-alvo primário: Empresas querendo investir e Investidores Anjo que estão buscando novos empreendimentos para o seu portfólio público-alvo secundário: Profissionais buscando investimento e promover soluções público-alvo terciário: Pessoas que possuem pensamento coletivo e buscam contribuir na construção de ideias

primário

secundário

Empresas de grande porte e investidores que buscam

Designers,

outros

Pessoas preocupadas com questões socioambientais

soluções inovadoras que possuam um viés mínimo de

profissionais de ambos os sexos de 22 a 30 anos, que

e a convivência em comunidade, que sintam vontade

sustentabilidade para complementar o portfólio da sua

procuram problemas para resolver de forma que

de contribuir na construção de projetos inovadores que

empresa ou ser um novo produto/serviço que tenha o

receba apoio ou retorno financeiro por essa ideia, ao

melhorem o modo de vida e auxiliam na expansão da

ciclo de produção e de lucro contínuo que se mantenha

mesmo tempo que busca se desafiar para ampliar suas

sociedade e das cidades. Ou pessoas com problemas que

por si só, geralmente são empresas ou investidores que

habilidades porém não entende ou decidiu que tipo de

acreditam ser de suma importância para determinado

ao olharem o mercado notaram que os consumidores

questão resolver e como conseguir investimento para a

grupo e sente a necessidade de ter uma solução no

estão cada vez mais atraídos por produtos com bons

sua ideia.

mercado para sanar a sua dor.

arquitetos,

terceário engenheiros,

entre

custo-benefício, comunitário/sharing e que respeitem os limites dos recursos naturais.

personas

Investidor Nome: Braú Ano de fundação: 2008 Ramo de atuação: financeiro, bancário Número de Funcionários: 94.779 Número de Filiais: +450 Continentes que atua: América Latina, Europa e Ásia Principal produto: agência bancária, caixas eletrônicos, investimentos, emprestimos

Qual(is) áreas de mercado planeja atuar futuramente? A mesma que atua

Que tipo de solução está buscando? Soluções fintech, soluções de interação

Quanto está disposto a investir? A partir de R$500 mil

Entusiasta Nome: Renata Pereira Profissão: Líder Comercial Empresa: Contratado Idade: 36 anos Gênero: Feminino Educação: MBA em Marketing Objetivos: Se tornar sócia na empresa que trabalha Principais atividades: Pesquisar sobre novas startups e conseguir novos leads para a empresa em que trabalha

Hobbies: Dançar, yoga e pintura Localização: São Paulo - SP Classe Social: Classe Média Alta Personalidade: Tranquila, persistente, líder, extrovertida 10

Projetista nome: ana cáceres profissão: gestora de projetos empresa: desempregada idade: 27 anos gênero: feminino educação:

administração - ensino superior completo

objetivos: conseguir alguma forma de remuneração enquanto busca emprego principais atividades: envio de currículos, empregos temporários hobbies: leitura, gosta de postar no facebook e instagram, sair com os amigos localização: rio de janeiro classe social: classe média baixa personalidade: extrovertida, determinada, tímida, gosta de conversar e sair com os amigos

painel semĂ˘ntico

jornada do usuรกrio

Jornada do Usuário A jornada do usuário foi pensada de maneira que faça o usuário entender o que é esperado dele dentro da plataforma, quais ações dependem dele e o que a plataforma pede dele, enquanto isso utilizamos tanto da comunicação usada dentro das telas quanto de artifícios externos como redes sociais, eventos, newsletter e e-mails marketing para mantê-lo engajado e retornando a plataforma. Já no primeiro acesso, a jornada dele ‘e predefinida em passos para que ele seja induzido a realizar as tarefas que precisamos dele, a partir de seu segundo acesso em diante, suas ações são mais livres passando autonomia para que o usuário realize suas tarefas no seu tempo.

Investidor

Etapas

Pesquisa

Descobrindo

Assimilação

Uso

Ações do Usuário

Redes Sociais Eventos Artigos Orgânico Anúncios

Home

Investidor

Cadastro/Login

Ativar cadastro

Sistema

Atrair os usuários através de conteúdo

Mostrar os tipos de atividades que podem ser realizadas na plataforma

Explicar o papel desse tipo de usuário na plataforma

Coletar as informações necessárias de cadastro do usuário

Pontos de Contato

Computador Celular Tablet

Computador Celular

Pensando

"Queria novos desaﬁos' "Quero ganhar dinheiro com produtos escaláveis" "Queria ideias para realizar"

"Como eu me encaixo aqui?" "Esse perﬁl é o mais próximo de mim" "Será que eu posso participar?"

"Então é assim que eu posso colaborar' "É gratuito, e ainda posso desenvolver um produto que o consumidor queira"

"Isso é rápido!" "São as informações necessárias de seguração que eles pedem"

Sentindo

Frustrado; curioso

Pensativo; inseguro; curioso

Empolgado; feliz

Feliz; neutro

Computador Celular Tablet

Completar Perﬁl

Postar Problema Pessoal

Postar Problema geral

Alertá-lo sobre o recebimento do email de ativação

Inserir demais informações

Fazer com que o exercite e o prepare para a próxima etapa

Realize a ação que precisamos para alimentar no pool de problemas para os projetistas

Computador Celular Tablet

"Parece seguro, tem veriﬁcação"

"Que legal, posso montar um perﬁl!" "Dessa forma posso ter reconhecimento sobre minha solução"

"Como isso me ajuda conseguir investir?" "eu deveria realmente estar postando problemas pessoais?"

"Agora eu tenho que pensar em mais pessoas" "Na minha empresa, estamos com um problema em um produto"

"Aqui tem sol variad "Essa aqui po um produto empre

Neutro

Feliz, neutro

Curioso; confuso

Feliz; analítico;

Feliz; analítico

Pool de So

Mostrar para o soluções que pelas etapa buscando inv

Compu Celu Tabl

oluções

Fiz uma proposta de investimento

Possibilidades

Retorno

Reunião

Veriﬁcação

Não deu certo!

Deu certo!

Redes Sociais Eventos Artigos Orgânico Anúncios Emails/Newsletter Ligação/Reunião

Se a reunião não deu certo e não haverá investimento, o usuário pode nos passar um feedback

O usuário preenche seus dados bancários para realizarmos a transferência do aporte e passarmos as informações da solução para o investidor

Postar a solução criada pelo usuário para que ele se sinta prestigiado e importante; engajá-lo para a plataforma e manté-lo participando da plataforma

Computador

Computador Celular ablet T

"Agora eu tenho mais um investimento, espero que corra tudo bem" "Essa solução vai revolucionar minha empresa"

"Que bom que eles me acompanham" "Essa solução é bem interessante"

excitado, empolgado, feliz, pensativo

neutro; reﬂexivo; empolgado

Pool de Problemas

Meu Perﬁl

Mostrar para o usuário os problemas postados por outros usuários dos quais ele pode acompanhar e investir nas soluções

Acompanhar em que etapa está suas soluções, acompanhar seus likes e seus problemas postados

O usuário selecionou uma ideia para investir e fez uma proposta para a equipe/autor

O usuário pode nos avisar como foi a reunião com o investidor

Caso a reunião tenha corrido bem, o usuário precisa subir o contrato assinado por todas as partes para comprovar a veracidade da informação

Computador Celular Tablet

Computador

luções bem das" oderia ser o da minha esa"

"Quantos problemas!" "Esse é bem interessante" "Então são esses os problemas que as pessoas estão tendo"

"Tenho que agendar a reunião com essa equipe" "Esse ainda não me respondeu"

"Gostaria de comprar essa ideia" "O valor está dentro do que esperava"

"A reunião foi muito intensa, mas vamos seguir!" "Não deu certo, não era o que eu esperava"

o e reﬂexivo

Curioso; surpreso

frustrado; neutro; feliz

empolgado; feliz; surpreso

pensativo, frustrado, ansioso

o usuário as e passaram as e estão vestimento

utador ular let

"Não deu certo, quero ver o que acontece com o "Seguração é importante" meu dinheiro agora" "Tenho que enviar o "Que bom que eles contratado para eles" querem saber o que aconteceu"

neutro; seguro;

triste; frustrado; aliviado

Entusiasta

Projetista Etapas

Ações do Usuário

Sistema

Pontos de Contato

Pensando

Sentindo

Pesquisa

Redes Sociais Eventos Artigos Orgânico Anúncios

Descobrindo

Home

Mostrar os tipos de Atrair os usuários através atividades que podem ser de conteúdo realizadas na plataforma

Computador Celular

"Queria novos desaﬁos' "Quero ganhar dinheiro com produtos escaláveis" "Queria ideias para realizar"

Frustrado; curioso

Computador Celular Tablet

"Como eu me encaixo aqui?" "Esse perﬁl é o mais próximo de mim" "Será que eu posso participar?"

Pensativo; inseguro; curioso

Assimilação

Projetista

Explicar o papel desse tipo de usuário na plataforma

Computador Celular Tablet

Uso

Cadastro/Login

Completar Perﬁl

Postar Problema Pessoal

Postar Problema geral

Pool de Problemas

Deﬁnir

Pesquisar

Gerar Ideias

Formar time

Coletar as informações necessárias de cadastro do usuário

Alertá-lo sobre o recebimento do email de ativação

Inserir demais informações

Fazer com que o exercite e o prepare para a próxima etapa

Realize a ação que precisamos para alimentar no pool de problemas para os projetistas

Mostrar para o usuário os problemas postados por outros usuários dos quais ele pode tentar solucionar

Conﬁrmar a seleção do problema que o usuário irá resolver

Incentivar o usuário a pesquisar e se aprofundar no problema para poder entendê-lo melhor

Espaço para o usuário dar o nome e explicar a ideia que irá projetar

Usuário poderá decidir se irá montar o projeto sozinho ou montar um time

Computador Celular Tablet

Computador

"Quantos problemas!" "Esse eu poderia solucionar"

"Sim, é esse mesmo que eu irei trabalhar"

"Seria interessante saber que soluções já existem" "É bom pesquisar" "Irei fazer isso depois"

"O que poderia solucionar esse problema?" "O que eu consigo desenvolver?" "Qual o nome que essa ideia pode ter?"

"Posso trabalhar em equipe" "Se eu achar esses proﬁssionais posso fazer a minha solução" "Posso trabalhar sozinho também""

Excitado; empolgado; esperançoso

surpreso; reﬂexivo;

empolgado; reﬂexivo;

excitado, empolgado, feliz, pensativo

neutro; reﬂexivo;

"Então é assim que eu posso colaborar' "Isso é rápido!" "É gratuito, e ainda posso "São poucas informações desenvolver um produto que eles querem" que o consumidor queira"

Empolgado; feliz

Ativar cadastro

Feliz; neutro

"Parece seguro, tem veriﬁcação"

Neutro

"Agora eu tenho que "Que legal, posso montar "Como isso me ajuda pensar em mais pessoas" um perﬁl!" conseguir investimento?" "Minha vó se machucou "Dessa forma posso ter "eu deveria realmente em casa, acho que isso reconhecimento sobre estar postando pode acontecer com minha solução" problemas pessoais?" outras pessoas de idade"

Feliz, neutro

Curioso; confuso

Feliz; excitado; esperançoso

Seleciona

Convidar as pe farão parte

Comput

"Preciso pen áreas vou p "Tem aquele( que entende que ele(a) a

neutro; reﬂ

ar time

Possibilidades

Recebeu convide para participar de um time

Foi chamado para um time, irá receber um essoas que convite onde verá a do time descrição e nome do projeto para decidir se irá aceitar ou não

tador

nsar que precisar" (a) colega disso, será aceita?"

ﬂexivo

Computador

"Que legal que ele (a) pensou em mim" "Esse projeto parece legal" "Será que vou ter tempo de trabalhar nisso?"

pensativo; feliz

Reduzir & Analisar Finanças

Fazer o usuário pensar sobre as questões ﬁnanceiras do projeto e entender quanto irá gastar

Computador

Reduzir & Analisar Ambiental

O usuário irá medir o impacto ambiental que ele vai ter

Computador

"Realmente é necessário "Wow, não esperava por pensar nisso?" isso" "Será que os "Quanto eu vou gastar consumidores e para esse projeto?" investidores olham esse lado?"

Surpreso, reﬂexivo, frustrado

Reﬂexivo; inseguro

Retorno

Reduzir & Analisar Social

Testar Protótipo

Testar Protótipo Montar apresentação

Meu Perﬁl

Recebeu proposta de aporte

Usuário irá medir o impacto social que a solução terá

Orientar o usuário a construir um MVP da solução para testar a viabilidade

Adicionar mídias e textos que expliquem e apresente a solução construída para os investidores

Acompanhar em que etapa está suas soluções, acompanhar seus likes e seus problemas postados

O usuário é notiﬁcado que um investidor se interessou por sua solução

Computador

Computador Celular Tablet

Computador

"Preciso fazer um modelo" "Isso é importante!" "Acho que o material que "Essa questão de eu tenho não é empregos que serão suﬁciente" afetados por tecnologia é "Deveria ter pesquisado algo a se pensar" mais, vou fazer isso agora"

Curioso; preocupado

Preocupado, reﬂexivo, esperançoso

"Como eu poderia explicar essa parte?" "Que bom que aqui tem os campos, algumas dessas coisas não tinha pensado" "Essa parte da solução precisa ser trabalhada mais um pouco"

Excitado; empolgado; esperançoso

"Ah, essa solução eu "Wow, recebi uma oferta ainda estou nessa parte" pela minha ideia" "Ainda não responderam "Que legal que alguém se meu convite para o time" interessou" "Como essa solução está "Realmente funciona" indo?"

frustrado; neutro; feliz

empolgado; feliz; surpreso

Reunião

Veriﬁcação

Não deu certo!

Caso a reunião tenha corrido bem, o usuário Se a reunião não deu O usuário pode nos precisa subir o contrato certo e não haverá avisar como foi a reunião assinado por todas as investimento, o usuário com o investidor partes para comprovar a pode nos passar um veracidade da feedback informação

Deu certo!

Pool de Soluções

O usuário preenche seus dados bancários para realizarmos a transferência do aporte e passarmos as informações da solução para o investidor

O usuário pode ver as outras soluções postadas na plataforma

Computador

Computador Celular Tablet

"A reunião foi muito intensa, mas vamos seguir!" "Não deu certo, não era o que eu esperava"

"Nossa, eles realmente querem conﬁrmar a informação"

"Não deu certo, eu realmente espero que eles possam me entender e me ajudar" "Que bom que eles querem saber o que aconteceu"

"Realmente conseguimos!" "Funciona de verdade" "Agora posso colocar minha ideia no mercado"

"Esse projeto é realmente legal!" "Nunca tinha visto algo assim" "Isso seria muito legal de se ter no mercado"

pensativo, frustrado, ansioso

neutro; seguro;

triste; frustrado

excitado, empolgado, feliz, pensativo

Computador

Redes Sociais Eventos Artigos Orgânico Anúncios Emails/Newsletter

Postar a solução criada pelo usuário para que ele se sinta prestigiado e importante; engajá-lo para a plataforma e manté-lo participando da plataforma

Computador Celular ablet T

"Nossa, eles estão divulgando o meu projeto!" "Olha esse problema, eu podia fazer isso para resolver"

neutro; reﬂexivo; empolgado

biblioteca de padrĂľes

iconografia

A iconografia foi desenvolvida seguindo o conceito orgânico que é empregado em toda a identidade visual do projeto. A partir disso, decidiu-se aplicar ícones em outline com pontas arredondadas e

pequenos

fragmentos/rastros,

passando a ideia de movimento. Os ícones podem estilizados com apenas uma cor ou um gradiente, mas somente com variações presentes na paleta de cores do projeto.

wireframe

Os wireframes foram pensados levando em conta trazer as instruções para a

Home

Pool de soluções

realização da ação pedida na tela que o usuário está, sem deixar poluído textualmente e visualmente, assim posicionamos os formulários e os call to action, em sua maioria, no centro da tela para que trabalhasse o foco naquele ponto e deixasse espaço para o layout ser explorado. Pool de Problemas

Perfil

Também utilizamos as migalhas de navegação para que assim ele possa acompanhar o desempenho dele na plataforma e onde ele está, logo o fluxo de ações se torna mais fluido e o leva a se concentrar mais na ação realizada. No topo estão títulos de incentivo e/ou informativo preparando o usuário para o texto explicativo e os campos que

Reduzir e Analisar

Testar Protótipo

precisam de preenchimento. O objetivo era definir a hierarquia das informações, proporcionar uma navegação fluida e fácil perante ao grande fluxo de informações que os usuários precisam inserir e o levasse a uma boa experiência.

wireflow navegação

Investidor https://bit.ly/2RXvoP2*

Pool de Soluções

Pagina projeto

Aporte

Investir

Reunião

Verificação

*Navegar através dos botões

Entusiasta https://bit.ly/2Bcfivh*

Completar perfil

Treinar

Postar problema

Sucesso

Pool de problemas

*Navegar atravĂŠs dos botĂľes

Projetista https://bit.ly/2TlrAbX*

Pool de problemas

Etapa definir

Etapa de pesquisa

Gerar ideias

Confirmação gerar ideias

Precisa de time

*Navegar através dos botões

layouts

comunicação

comunicação Nossa comunicação possui o tom brincalhão e menos formal, escolhemos tratar o usuário como um amigo que estamos tentando ajudar e incentivar sua participação na plataforma. Essa comunicação mais próxima e leve apoia a interação dos usuários com a plataforma, pensando principalmente no projetista e na sua jornada pelas nove etapas do Design Thinking Sustentável, trabalhar a comunicação dessa forma auxilia no fácil entendimento das suas ações dentro da Ágora.

projetistas e entusiastas Email Marketing e Newsletter

Outras estratégias

Além dos emails do nosso sistema, iremos trabalhar com emails

O Google Adwords, Google Analytics, Facebook Ads e SEO serão

marketing que levem até o entusiastas e investidores as novas

trabalhados de forma que nos guiem nos testes sobre horário, dias

soluções postadas e as soluções em alta na nossa plataforma,

da semana, conteúdo e perfis que mais se atraem para usuários

incentivando-os a investir e dar like nesses projetos. Para o projetista,

para nossa plataforma, após os resultados dos que as ferramentas

iremos trabalhar com emails de novos problemas postados e

utilizadas nos passarem, iremos trabalhando para que nossa

problemas que foram impulsionados, também iremos passar os

comunicação acompanhe os nossos usuários e leads, e tornando

números de visualizações que a solução teve.

todo o nosso projeto mais assertivo.

A Newsletter vai trazer os cases de sucesso de soluções e problemas postados por nossos usuários, artigos novos do nosso blog e novidades sobre a plataforma. Blog Os artigos para o blog no Medium serão para atrair leads mais qualificados e qualificar os leads que estamos atraindo a partir de outros meios, assim fornecendo informações sobre os temas que envolvem nossa plataforma, deixará mais claro o que é esperado deles e o que eles podem encontrar no nosso site.

tecnologias

Na elaboração de materiais como mood board, painel semântico, posts para redes sociais, tratamento de fotos para o projeto e do poster ciêntífico, o software utilizado foi o Photoshop. Com o Illustrator, criamos o logo e os ícones, tanto da nossa página, quanto dos materiais impressos (monografia, brandbook e design kit). Com todos arquivos prontos, diagramamoss tudo no Indesign. Dessa forma, finalizamos a identidade do projeto. Já para a plataforma online, começamos com draw.io para definir a jornada do usuário e o Adobe XD para os layouts. Em seguida, para programar tudo, utilizamos o MERN Stack. A linguagem de programação utilizada é apenas Javascript, o que facilita e implementação e desenvolvimento, estruturando melhor o projeto. O custo benefício do projeto é maior pois não é necessário contratar diferentes especialistas para manter o projeto. Todas as tecnologias utilizadas são gratuitas e open-source. Por fim, o After Effects e o Premiere foram nossos editores de vídeo.

custos e prazos

Custos mensais Item

Valor

Quantidade

Custo por ano

Internet

R$ 120,00

R$ 10.080,00

Alimentação

R$ 460,00

R$ 38.640,00

Energia

R$ 120,00

R$ 10.080,00

Água

R$ 100,00

R$ 8.400,00

Pacote Adobe

R$ 240,00

R$ 11.520,00

Reunião mensal

R$ 85,00

R$ 1.020,00

G Suite Basic

R$ 30,00

R$ 2.520,00

Custos anuais Item

Valor por ano

Dominio

R$ 30,90

Servidor

R$ 335,81 Total

Total por mês

R$ 6.675,56

Total por ano

R$ 80.106,71

Cronograma DT Data

04/10/2018

11/10/2018

18/10/2018

25/10/2018

Entreg

Grupo

Conta Primeiro Acesso

Rotina de cadastro de problema

Rotina de Cadastro de Solução

Front End

40% do Front dos wires (sem arte)

Algorítimo da validação ambiental Telas de /CONTA + microinterações

Calculadora das finanças

Páginas do pool de problemas

Wireframes

Arte

Logo(defesa e aplicação) Tipografia 50% do BrandBook 10%Design Kit

50% Design Kit BrandBook 90% 10 paginas do laytout (foco nas de Conta)

Roteiro e peças do video Cores

Monografia diagramada

Plano de Negócios

Plano de um ano

Estudo de mercado

Definição de Preços

Back End

TS 01/11/2018

08/11/2018

15/11/2018

22/11/2018

Rotina de Cadastro de Solução

Rotina de Seleção de Solução pelo investidor

Páginas dos investidores

Landing Pages

Aplicação da identidadade visual nas páginas

Ajustes finais

29/11/2018

WireflowW

ireflowD

esign de Interação

Teste de Usabilidade

Desing Kit Completo

Cartaz Científico e layout de todas as páginas

Brandbook 100%

Design Kit 95%

Definição de Salários e benefícios de todos os colaboradores

Escolha de modelo de negócios

Fechamento de todas as planilhas prevendo um ano de funcionamento

Entrega de todas as peças