Eduardo Machado Hilário GETMORE Brasil 06/03/2019 - 28/06/2019
3
1.1 IDENTIFICAÇÃO DO ESTAGIÁRIO
Nome: Eduardo Machado Hilário Matrícula: 16105713
Habilitação: Design
E-mail: [email protected] Telefone: +55 48 9 9981 5156
1.2 DADOS DO ESTÁGIO
Concedente: Getmore Serviços LTDA - EPP Período Previsto: 06/03/2019 a 28/12/2019
Período referente a este relatório: 06/03/2019 a 28/06/2019 Supervisor/Preceptor: Daniel César Vieira Radicchi
Jornada Semanal/Horário: 30hrs/08h-12h30 | 17h20-18h30 Assinatura da concedente (ou representante):
6
1.3 PROGRAMA DE ATIVIDADES
Objetivo do estágio: Por em prática o conteúdo ministrado em sala de aula,
exercitar o aprendizado, ganhar experiência na área, com a criação de diversos materiais, além da experiência de empresa e dinâmica de trabalho desenvolvido diariamente.
Objeto(s) do estágio: Peças de comunicação e produtos do web design.
Programa de atividades (PAE): Auxiliar na parte de comunicação dentro da
empresa, compreendendo a criação de slides e materiais gráficos impressos, assim como na parte de web design e UI/UX como também na criação e manutenção de telas para aplicativos.
1.4 SITUAÇÃO ENCONTRADA
Resumo da situação da empresa em relação ao Design: Possui três web designers
e diversos programadores da parte de front-end. Possui equipamento para o trabalho, como computadorcom hardware adequado, monitor de alta resolução e software de edição vetorial e gráfica.
O que foi abordado no estágio: Foi desenvolvido material gráfico para divulgação
interna e externa, criação e manutenção de apresentações internas e externas, auxílio na criação e manutenção de telas para o desenvolvimento de websites e aplicativos.
Atuação na área gráfica: Peças gráficas, interfaces gráficas e experiência do
usuário.
Atuação na área informatizada (mídias): Os softwares utilizados foram: G Suite,
Adobe Creative Suite e Figma.
1.5 ESTRUTURA PARA REALIZAÇÃO DO ESTÁGIO
Infraestrutura física disponibilizada: Ambiente aberto, com mesas, computadores
e monitores e periféricos individuais, duas salas de reunião, cozinha com utensílios e equipamentos.
7
A localização do Design na estrutura organizacional da empresa: A empresa
adota a prática de lugares indefinidos para melhorar o diálogo e convívio com os colegas, assim não tendo lugar fixo. As equipes estão sempre dialogando mas mantendo um nível de independência entre si.
O local, na estrutura organizacional da empresa, (diretoria, departamento, etc) onde foi realizado o estágio: No mesmo ambiente que os demais funcionários. Data do início do estágio: 06/03/2019
Data de encerramento do estágio: 28/06/2019 Carga horária diária: 6h.
Horário diário do estágio (entrada e saída): 8h30 - 12h30 | 17h20 - 18h30
1.6 ORIENTADOR DO ESTAGIÁRIO
Nome: Profª Dra. Lisandra Andrade
Formação e cargo: Dr. Lisandra Andrade has been an Adjunct Professor at
Universidade Federal de Santa Catarina since 2010. She has an undergraduate degree in Social Communication with expertise in Advertising from Pontifícia Universidade Católica of Rio Grande do Sul (1992) and another in Design (2007). She also has a Masters degree in Production Engineering from Universidade Federal de Santa Catarina (2002) and a PhD. in Production Engineering from Universidade Federal de Santa Catarina (2007), both with a focus in Ergonomics. She has experience mainly in Graphic Design, acting on the following subjects: Interface Design, Ergonomics, Usability and Novice Users. For the most recent years she has dedicated herself to studying Emotional and Experience Design, areas in which she currently teaches and leads research projects, having had her articles published in international journals. (Lattes, 2017)
Contatos (telefone/e-mail): +55 48 3721-2344 / [email protected]
A seguir uma cópia do TCE e do PAE referente ao estágio (anexar na próxima página)
10
2.1 QUADRO CONTENDO:
a) Cronograma com as atividades (projetos) nos quais houve a participação do estagiário;
b) Tarefas (estabelecidas no PAE) desempenhadas pelo estagiário em cada atividade (projeto).
Mês Atividade desenvolvida
Mar/2019 Layout de apresentações / G Suite - Slides;
Cartão de aniversário GETMORE; Impressões; / Illustrator; Email de dia das mães do serviço bancário Next / Figma; Impressões A3 explicativa dos serviços GETMORE / Illustrator. Abr/2019 Impressões A4 para convenções / Illustrator;
Layout de apresentações / G Suite - Slides;
Telas para aplicativos: GETMORE, Unilever, Banco next / Figma.
Mai/2019 Telas para aplicativos: GETMORE, Unilever, Banco next / Figma.
11
2.2 APRESENTAÇÃO DE CADA AÇÃO
a) AÇÃO 1:
Benchmarking dos concorrentes.
Briefing:
Realizar um benchmarking e análise dos concorrentes para apresentação interna da empresa com base no briefing do Daniel.
Público-alvo:
CEO e CTO da GETMORE.
Estes foram os primeiros slides que me foram incubidos. Minha intenção foi deixá-los o mais simples possível para que não tomassem muito tempo do meu supervisor na hora da apresentação. O processo de pesquisa durou 2 dias e a montagem do slide foi feita em uma tarde.
Usei Roboto Sans para as fontes e o vermelho instituicional da GETMORE para as cores.
Para a diagramação, foi me instruído que fosse utilizado o Slides do G Suite, para facilitar no compartilhamento, edição comunitária e controle do conteúdo.
12
a) AÇÃO 2:
Cartão de Aniversários GETMORE
Briefing:
Conceber um cartão de aniversário para os contribuintes da GETMORE.
Público-alvo:
Contribuintes da GETMORE
Após um brainstorm com meus supervisores chegamos à conclusão que seria interessante que o cartão de visitas seguisse em uma direção mais cômica e nerd, para melhor se adaptar à cultura da empresa.
Após uma breve pesquisa decidi por utilizar a temática do jogo “Super Mario World” por ser muito reconhecível e ser 16-bits.
A ideia inicial e que foi aplicada é de utilizar a lógica do jogo de "apertar" o botão de supresa e ganhar uma vida a mais, em analogia ao aniversário.
13 impressão. O espectro de cores foi CMYK e optei por dar um ar mais calmo e alegre ao cartão, com o uso predominates de cores quentes, como no céu.
Para facilitar a vida dos meus supervisores eu decidi que as assinaturas seriam digitais, assim não havendo a necessidade de assinar 150 cartões. Em compensação às mensagens de felicidade e às assinaturas eu também optei por um espaço em branco na parte interna para dedicatórias
As fontes usadas foram "Super Mario World" e "Super Mário World - Text-box", ambas originais da fonte.
O tamanho é personalizado, 8cm x 6cm. Foi impresso na Printi.
A GETMORE te deseja muitas felicidades!!! Continue
14
a) AÇÃO 3:
Email de dia das mães do serviço bancário Next.
Briefing:
Realizar a montagem de um novo layout de email para o dias das mães do Banco next. Deve atender à identidade visual do next e também ser reutilizável para outras ocasiões.
Público-alvo:
Receptores de email do Banco next.
Surpreenda sua mãe e ainda receba seu dinheiro de volta!!!
Dia das mães next!
Não deixe para
comprar na volta, heim!
Enviado por GETMORE Serviços Ltda - 23.232.934/0001-54 /facedonext /videosdonext /faoanext /instadonext Cashback de 5,9% Cashback de 9, % Cashback de ,% Cashback de ¤,§% Cashback de ¤,9% Cashback de §%
O fundo foi reutilizado do email antigo mas o resto é novo.
Decidi dar ênfase nas fotos e no cashback, assim dividi igualmente as imagens e as logos, e em cima do fundo branco fiz um
Cabeçalho do email com ícone de coração personalizado feito por mim. O layout serve de base para o programador Front-end escrever o código HTML que será enviado para distribuição de emails.
15 Surpreenda sua mãe e ainda
receba seu dinheiro de volta!!!
Dia das mães next!
Não deixe para
comprar na volta, heim!
Enviado por GETMORE Serviços Ltda - 23.232.934/0001-54 /facedonext /videosdonext /faoanext /instadonext Cashback de 5,9% Cashback de 9, % Cashback de ,% Cashback de ¤,§% Cashback de ¤,9% Cashback de §%
16
Surpreenda sua mãe e ainda receba seu dinheiro de volta!!!
Dia das mães next!
Não deixe para
comprar na volta, heim!
Enviado por GETMORE Serviços Ltda - 23.232.934/0001-54 /facedonext /videosdonext /faoanext /instadonext Cashback de 5,9% Cashback de 9, % Cashback de ,% Cashback de ¤,§% Cashback de ¤,9% Cashback de §%
17
a) AÇÃO 4:
Folha A3 de explicação do processo de cashback dentro da plataforma do Banco next para o cliente Kroton.
Briefing:
Realizar a montagem de uma folha A3 para impressão do passo-a-passo do processo de cashback na plataforma Next de vendas com o objetivo de pitching e venda da ideia da empresa, podendo rabiscada caso se veja necessário.
Público-alvo:
Kroton Educacional.
Ampliação no detalhe do layout.
1
2 3
4 5 6
Os parceiros da Kroton serãoregistrados no sistema do cashback next, pelo time de desenvolvimento.
Os parceiros serão exibidos em um card, como demais parceiros do cashback next.
Usuários interessados irão clicar em um dos parceiros da
Kroton e, então, será exibido uma mensagem com mais informações sobre o cashback.
Cashback next
O usuário será redirecionado para o parceiro onde irá prosseguir normalmente com sua matrícula.
A Kroton, através de um email, irá nos informar os usuários que se matricularam em seus cursos através do cashback next, quais fizeram o pagamento correto,
por meio de um arquivo CSV, juntamente com o pagamento. Essa rotina deve acontecer mensalmente,
já que a matrícula é algo periódico.
A GETMORE, possuindo esses dados, irá repassar o dinheiro para os usuários.
18
1 2 3
4 5 6
Os parceiros da Kroton serão registrados no sistema do cashback next, pelo time de desenvolvimento.
Os parceiros serão exibidos em um card, como demais parceiros do cashback next.
Usuários interessados irão clicar em um dos parceiros da Kroton e, então, será exibido uma mensagem com mais informações sobre o cashback.
Cashback next
O usuário será redirecionado para o parceiro onde irá prosseguir normalmente com sua matrícula.
A Kroton, através de um email, irá nos informar os usuários que se matricularam em seus cursos através do cashback next, quais fizeram o pagamento correto, por meio de um arquivo CSV, juntamente com o pagamento. Essa rotina deve acontecer mensalmente,
já que a matrícula é algo periódico.
A GETMORE, possuindo esses dados, irá repassar o dinheiro para os usuários.
Arquivo em 100% de aumento.
19
e) AÇÃO 5:
Folha A3 de explicação do programa de coalização para a rede de farmácias Farmais.
Briefing:
Realizar a montagem de uma folha A3 para impressão do passo-a-passo do processo do programa de coalizão para o CEO da drograria Farmais.
Público-alvo:
CEO das drograrias Farmais.
Ampliação no detalhe do layout.
Autenticação de usuários
associados à Farmais Visualização das lojasFarmais no app
Programa de coalizão
Cashback é atribuído
à carteira do associado Possibilidade de resgatarcashback e/ou trocar pontos por outros programas
Conciliação entre
Farmais e GETMORE Cashback fica disponível na carteira Associado gerencia carteirade cashback pelo app
Durante todo o fluxo a loja tem controle das vendas e cashbacks pelo Dashboard GETMORE Expansão para o programa de coalizão.
Associado satisfeito!
O usuário ele é ativado
por promoções para a loja O usuário chega na loja Realização uma compraativado pela oferta cashback Transação é registrada noPDV
Identificado CPF, telefone ou reconhecimento facial. Reconhecimento facial
1
2
3
4
5
6
20
Autenticação de usuários
associados à Farmais Visualização das lojasFarmais no app
Programa de coalizão
Cashback é atribuído
à carteira do associado Possibilidade de resgatarcashback e/ou trocar pontos por outros programas
Conciliação entre
Farmais e GETMORE Cashback fica disponível na carteira Associado gerencia carteirade cashback pelo app
Durante todo o fluxo a loja tem controle das vendas e cashbacks pelo Dashboard GETMORE Expansão para o programa de coalizão.
Associado satisfeito!
O usuário ele é ativado
por promoções para a loja O usuário chega na loja Realização uma compraativado pela oferta cashback Transação é registrada noPDV
Identificado CPF, telefone ou reconhecimento facial. Reconhecimento facial 1 2 3 4 5 6 7 8 9 10 11 12 Arquivo em 100% de aumento.
A3
21
a) AÇÃO 6:
Flyer A4 de explicação dos serviços ofertados pela GETMORE.
Briefing:
Realizar a montagem do layout de um flyer em uma folha A4 com a explicação dos serviços ofertados pela GETMORE que seria apresentado em uma convenção de empresas e para outras situações futuras, com base do design já existente no site.
Público-alvo:
Pessoas leigas em relação aos tipos de serviços ofertados pela GETMORE.
22
5x
mais econômicona hora de fidelizar e incentivar
biz.getmore.com.br
Nossos clientes
Colaboradores
Incremento nas vendas totais e na produtividade dos colaboradores
Consumidor Final
70% de aumento no faturamento e até 95% na lucratividade
Canais e Trade Marketing
Engajamento e fidelização de seus canais
23 Verso do flyer.
Para a diagramação da peça para impressão foi utilizado o Adobe Illustrator e para os mockups o Adobe Photoshop
24
a) AÇÃO 7
Slide para apresentação da empresa GETMORE em convenção.
Briefing:
Realizar a montagem do layout de um slide que seja simples e elegante, direto ao ponto e que consiga passar a mesagem da maneira mais clara possível, com a explicação de como é o funcionamento da GETMORE e outros assuntos pertinentes.
Público-alvo:
Platéia de apresentações de palco e clientes em pitchings.
25 Esses slides eu fiz baseado em outros já existente mas muito confusos. Aqui eu tive o trabalho de uniformizar as cores em relação à identidade visual da empresa e deixar mais claro de entendimento a semiótica dos elementos em questão.
26
Os slides foram feitos no Google Slides para maior comodidade em relação à edição e compartilhamento com os meus supervisores. Os mockups foram construídos dentro do Adobe Photoshop.
27
a) AÇÃO 8:
Manutenção de layout de tela de login do aplicativo da Compra+.
Briefing:
Uniformizar as logos no cabeçalho e realizar o design do login no aplicativo.
Público-alvo:
Compra+ da UNILEVER.
28
a) AÇÃO 9:
Criação de telas para o app de cashback da GETMORE.
Briefing:
Ajudar a equipe de desenvolvimento à resolver problemas de espaço em relação aos elementos presentes nas telas atuais do aplicativo, acomodando-os melhor em uma resolução mínima de 360px de largura.
Público-alvo:
Usuários do GETApp.
Resultados finais dos protótipos das telas. Foi adicionado a barra de navegação com “Ofertas” e “Localização”, criado uma tela caso a loja não adicione nenhum produto e criado o card com as informações sobre o cashback.
29
a) AÇÃO 10:
Criação de splash art para o app de cashback da GETMORE.
Briefing:
Desenvolver uma animação vetorial com a logo da GETMORE para a splash art do app. Foi utilizada a ferramenta Shapeshifter para o desenvolvimento.
Público-alvo:
Usuários do GETApp.
No link abaixo há o GIF animado com a animação já implementada.
30
a) AÇÃO 11:
Criação de modal para o app de cashback da GETMORE.
Briefing:
Desenvolver um modal para que seja exibidos os horários de funcionamento e horários de cashback para lojas físicas quando clicado no botão de horário.
Público-alvo:
31 Ao clicar no horário do perfil da loja o modal sobe do inferior da tela até uma altura X, e foram feitos diversos casos possíveis em que pode aparecer.
Por exemplo: o lojista define que de hora X a hora Y o takeback será de Z%. Ou que neste momento está ocorrendo um takeback e até que horário ele ficará disponível. Esse foi um protótipo que eu criei mas que já está bem diferente pois foi passado para outras mãos com o decorrer de novas delegações de funções.
32
a) AÇÃO 12:
Adaptação da versão mobile para app do serviço “Meu Yalo”.
Briefing:
Yalo é um serviço de venda de planos de saúde. Foi necessária uma adaptação em relação à versão mobile do site para um protótipo de aplicativo. O Meu Yalo já possui um aplicativo que pode ser baixada nas lojas de app mas que está tendo uma repaginada. Fui encubido de realizar essa adaptação. Usei o programa Figma para a diagramção/prototipagem e o sistema atômico de criação de componentes, algo que aprendi no estágio e que facilita na organização dos assets usados, principalmente útil em projetos de larga escala.
Público-alvo:
Usuários do app Meu Yalo.
Biblioteca de componentes dentro do Figma utilizando-se de sistema atômico. Quanto mais esmiuçado for um componente mais fácil é de fazer uma alteração nele no futuro. O programa Figma permite a criação de apenas um componente mestre como base, que funciona como um controle das propriedades de suas instâncias. Por exemplo, não é necessário criar 50 botões para diversas funções e sim apenas um com propriedades pré-definidas, como cor/margem/tipografia/ etc., somente sendo necessário ser alterada a instância específica. Caso for alterado o componente mestre, ocorre um efeito cascata e todos os seus filhos são atualizados com a mudança.
33 Exemplificação de como funciona a criação dos componentes. Há também o uso de estado que um componente pode ter, ativo/hover/inativo/click por exemplo.
34
Utilizei do material de estudos Google Material no desenvolvimento do protótipo, pois é um sistema de design amplamente utilizado na indústria por sua simplicidade, fácil implementação e constante manuntenção por conta da própria Google. Qualquer componente que eu decida utilizar do material pode ser facilmente implementada pelo developer por já estar, em sua grande parte, já programada.
35 Protótipo antigo, versão mobile do site e novo protótipo.
36
37 Acabei criando uma tela anterior ao acesso de assinaturas, em formato carrossel, para facilitar a visualização da própria.
38
39 É também necessário fazer todas os cenários que uma tela pode ter em relação ao estado do usuário na plataforma.
40
a) AÇÃO 13:
Auxílio na manutenção de telas no dashboard do Meu Yalo - Gestor
Briefing:
O Meu Yalo é alimentado pelo dashboard “Área do Gestor”. Ele está sempre em construção e rotineiramente é necessário fazer alterações como as vistas a seguir.
Público-alvo:
Usuários do dashboard “Área do Gestor”.
Atualmente estou trabalhando nessa divisão da GETMORE que tem como cliente a Yalo. Eu entrei nesse projeto em um estado bem avançado de desenvolvimento e implementação. Assim não fiz parte do processo de pesquisa e concepção. Ele já foi aprovado e está em fase de programação. Apesar disso, ainda há muitas partes do dashboard que devem ser melhor trabalhadas e ampliadas/reduzidas.
41 Não somente pessoas físicas como jurídicas podem contratar os serviços da Yalo para seu funcionários. O gestor do dashboard (empresa contratante) pode realizar de diversas formas a recarga dos créditos de seus contribuintes.
Nessa tela foi necessária a criação de uma seleção de funcionários caso o gestor queira realizar uma recarga individual.
Os usuários são selecionados na lista da esquerda e podem ser filtrados por seus grupos. Ao serem selecionados são transportados para o card ao lado para serem confirmados pelo gestor. A confirmação leva a uma tela de inserção de valores.
42
Essa é a próxima tela do workflow onde os funcionários já foram selecionados e agora poderá ser inserido o valor de maneira para geral ou individual.
43 Em muito casos não é necessário realizar a montagem e uma tela inteira, e sim de apenas algumas ações, como o modal acima de alteração de cobrança, caso o gestor mude de opinião em relação a um valor de boleto.
44
É também imperativo fazer os diversos cenários que o usuário pode tomar em relação à suas ações, isso facilita a visualização das possibilidades e ajuda os programadores em seu trabalho.
46
3.1 A SITUAÇÃO PARA A REALIZAÇÃO DO ESTÁGIO FOI SATISFATÓRIA? EM QUE E COMO?
Sim. Tive oportunidade de trabalhar diretamente com o cliente, participar de reuniões e biefings, aplicar e adquirir conhecimentos na prática. Além de ter um ambiente multidisciplinar, com ótimos colegas de trabalho, permitindo aprender sobre desenvolvimento front-end, cultura DevOps e trabalhar com web design.
3.2 QUAIS FORAM OS PRINCIPAIS PONTOS POSITIVOS E OS NEGATIVOS DO ESTÁGIO?
O maior ponto positivo foi trabalhar de forma independente. Tive a possibilidade de conversar diretamente com o cliente durante do dia a dia, participar de reuniões e decisões sobre o projeto.
O maior ponto negativo foi meu supervisor estar de saída no momento em que entrei, assim não podendo absorver grande parte das funções dele dentro da empresa.
3.3 AS ABORDAGENS CONCEITUAIS, OS MÉTODOS E AS TÉCNICAS UTILIZADAS NO ESTÁGIO FORAM COERENTES COM O QUE FOI ESTUDADO NO CURSO? QUAIS AS CONVERGÊNCIAS? QUAIS AS DIVERGÊNCIAS?
Parcialmente. Os projetos raramente passaram por todas as etapas dos métodos de criação estudados no curso. Isso se deve principalmente ao fato que alguns projetos já estavam em andamento. Além disso o tempo para criação e finalização dos trabalhos é consideravelmente menor que o visto na faculdade.
3.4 COMO E EM QUE ESSE ESTÁGIO CONTRIBUIU PARA SUA FORMAÇÃO?
Um grande aprendizado nesse estágio foi como me posicionar como designer dentro de uma empresa e com o cliente. A forma como posso apresentar o meu trabalho, indicar possíveis incoerências no projeto em andamento. Além disso conheci novas ferramentas que ajudam no controle de projetos, administração de tempo e delegação de trabalho.
47
3.5 QUAIS OS CONHECIMENTOS TEÓRICOS E TEÓRICO-PRÁTICOS ADQUIRIDOS NO CURSO QUE FORAM DIRETAMENTE UTILIZADOS?
Acredito que os conhecimentos adiquiridos em Teoria da Cor, Teoria da Forma, Composição, Cenários, InfoDesign, Ergonomia Física e Cognitiva e Semiótica, principalmente os conceitos de UX/UI que aprendi no Projeto Digital e Emoções e Novas Tecnologias.
3.6 QUE CONHECIMENTOS PRESUMIDAMENTE DA ÁREA DE DESIGN FORAM NECESSÁRIOS E NÃO FORAM ESTUDADOS NO CURSO?
Acho que o tempo de pesquisa é muito ampliada dentro da academia, e quanto ao que eu experienciei no estágio esse período é muito reduzido por conta de prazos e orçamentos.
3.7 EM ESCALA DE 0 A 10, QUE VALOR RESUMIRIA, NA SUA OPINIÃO, A CONTRIBUIÇÃO DO ESTÁGIO PARA SUA FORMAÇÃO?
Valor 10. Para mim é impossível formar um profissional sem experiência prática. Durante o estágio aprendi como me apresentar profissionalmente e como trabalhar com profissionais de diferentes áreas.
49 Anexe a Carta de Avaliação do
Supervisor de Estágio já pre-enchida e assinada.
Eduardo Machado Hilário GETMORE Brasil 06/03/2019 - 28/06/2019
