corberto

E-commerce
supermercado DIA

Tarefas KV + interfaces + social media
Período 2020 - 2021
Empresa DIA (Projeto de TCC - FATEC)

Breve
resumo

Foi o projeto de conclusão da primeira turma da graduação em Design de Mídias Digitais da Faculdade de Tecnologia de Barueri (FATEC). Por meio deste, o grupo que trabalhou nele colocou em prática os pilares do curso, que envolveu conceitos de marketing, design, codificação e implementação de uma plataforma de e-commerce.

Nosso
trabalho

Uma equipe esteve a cargo de atividades que envolveu pesquisa (qualitativa e quantitativa), análise de dados, o desenho de um pequeno plano de marketing, a criação de um e-commerce (design de interfaces, codificação em html e aplicação em Wordpress) e divulgação em mídias sociais.

Seções

Para facilitar a navegação,
confira os trabalhos nas divisórias a seguir:

1

Proposta de interface

Um novo
e-commerce

A partir de um extenso processo de investigação e análise do posicionamento da marca DIA, foi feito um estudo de caso para a implementação de um e-commerce.

A escolha da empresa se deu por ser um dos poucos supermercados a não possuir uma plataforma de venda direta para o consumidor final. Logo, foi vista uma oportunidade de se trabalhar em cima da marca, principalmente durante o auge da pandemia, em que muitas empresas tiveram a necessidade de rever a sua estratégia de vendas e mantêr a fluidez de seus negócios.

●   Imagem da página inicial do site

Sobre o
processo criativo

Após uma minuciosa pesquisa sobre os materiais de divulgação online, percebe-se a falta de um componente importante e que representa muito o que o Supermercado Dia é: o foco no produto. O Key Visual traz a identidade do Dia de maneira mais clean e objetiva. O lettering e as cores aproximam o usuário da marca Dia, além da disposição do produto com preço ter o apelo necessário do varejo, sem deixar com aspecto confuso.

Nesta proposta, diferentemente do material oficial da empressa, o icônico tom vermelho está bastante presente na interface, em equilíbrio com o branco, para que não ocorra o efeito de chromostereopsis na visão do usuário.

A divisória em vermelho serve tanto para dividir as opções do cabeçalho quanto as informações do banner principal, além de dar destaque para o produto escolhido.

O menu principal, com as categorias da loja, possui ícones de fácil assimilação, divididos em mini-cartões. Ao passar o mouse em uma categoria, na versão desktop, surge uma sombra de destaque.

●   Imagem da home do site

Destaque
do produto

Assim como no banner principal, as listagens possuem a imagem do produto saindo da caixa (container) para dar a impressão de diferenciação das camadas. É um efeito que usa o princípio da segregação figura-fundo na psicologia da forma (Gestalt).

Além disso, ao passar o ponteiro na caixa, a borda altera a cor e, na parte inferior, ela ganha um pequeno destaque.

●   Recorte da listagem de produtos

●   Recorte da parte superior

Listagem
de produtos

A página é semelhante a inicial, apenas com a parte superior reduzida, apenas com o título e a listagem diretamente.

●   Imagem da página de categoria

Banner
superior

Abaixo, seguem alguns exemplos dos banners utilizados
na parte superior das páginas internas para desktop e mobile.

●   Recorte da listagem de produtos

Área de login,
cadastro, contato e tela
de confirmação

Abaixo, seguem os exemplos de formulários, com os devidos diagnósticos de erro e a tela de confirmação padrão, em que apenas o título e o texto são alterados.

●   Imagem da tela de login

●   Imagem da tela de cadastro

●   Imagem da tela de contato

●   Imagem da tela de confirmação

Telas relacionadas
à compra

A seguir, o espaço onde é possível ver um produto, adicioná-lo ao carrinho e finalizar a compra.

●   Imagem da página de produto

●   Imagem da página de carrinho de compra

●   Imagem da área de pagamento

Páginas
institucionais

Contém informações sobre a empresa, como endereços, a sua história e trabalho social.

●   Imagem da tela de responsabilidade social

●   Imagem da tela Sobre o dia

●   Tela de contato

2

Adaptação de formato

Versão
mobile

Durante o processo de construção do projeto, foram feitas duas versões mobile.
Na primeira, tanto os itens de menu quanto os produtos apareciam com rolagens horizontais, com mínimas alterações de layout, no entanto, ao ser aplicado no formato html, ocorreram alguns problemas técnicos. Foi necessário readaptar os formatos, de modo a facilitar tanto a navegação quanto a codificação, afinal, html + css não são a minha especialidade.

●   Imagem dos banners

3

Formatos

Redes
sociais

Foram criados 4 estilos diferentes de design de posts para redes sociais. Cada um foi pensado para atender a um objetivo específico. Confira abaixo os detalhes de cada um:

1. O primeiro estilo é simples e direto, voltado para produtos generalistas, como alimentos naturais. Ele destaca o que é importante usando fontes grandes e cores fortes.

2. O segundo estilo é mais elaborado, voltado para trabalhar as cores da marca do produto. Aqui, os elementos gráficos são utilizados para complementar o texto e tornar a mensagem mais clara.

3. O terceiro estilo é mais descontraído, e tem o foco eventos cotidianos, como o dia do churrasco, aniversários, momento gourmet com a família, entre outros.

4. Por último, temos um estilo mais clean, minimalista, e utiliza as cores do guide oficial do supermercado DIA. Aqui, o foco está nas imagens, que devem ser bem escolhidas e trabalhadas para passar a mensagem desejada.

●   Imagem das postagens

4

Documentação

Processo
de pesquisa

Devido ao fato de se tratar de um projeto de TCC, procuramos coletar o máximo de informações, sem o suporte do supermercado DIA.

O processo foi feito ao longo de dois semestres, em que o grupo pôde analisar em detalhes, discutir as estratégias de marketing das empresas concorrentes, convergir os dados, montar uma proposta de direcionamento de marketing digital e, finalmente, construir o e-commerce e a estratégia para redes sociais.

Confira abaixo os destaques desta pesquisa.

●   O estudo da marca

Pesquisa
com usuários

Com base nessa análise, desenvolvemos uma pesquisa quali-quantitativa com o intuito de conhecer diretamente a opinião e a percepção do público com relação à marca DIA e descobrir as impressões despertadas pela marca e verificar se estão alinhadas com a nossa proposta de reposicionamento, além de identificar novos pontos de melhoria.

Divulgação 07/10/2020
Perguntas 16 - escala Likert
Envolvidos 30 pessoas
Plataforma Google Answers

●   Imagem dos resultados da pesquisa

Conclusões
sobre o resultado acima

Verificamos que apenas 55% dos respondentes conhecem os produtos próprios da marca, pensando nisso, analisamos as publicações do DIA e não encontramos muitas postagens evidenciando seus produtos próprios, sendo assim, queremos destacar seus produtos nas redes sociais para fortalecer e difundir a marca.

Já na parte de mídias sociais, obtivemos o resultado em que, dentre 30 respondentes, apenas 2 conheciam as redes sociais do supermercado DIA.

Público
alvo

Gênero Homens e mulheres
Faixa etária 20-54 anos
Escolaridade Ensino médio completo
Faixa de renda R$1.000,00 – R$6.000,00
Classe social E, D, C

Localização: Residentes em capitais e regiões metropolitanas

Hábitos de consumo Priorizam o preço em detrimento a qualidade, buscam promoções e não possuem o hábito de acompanhar a marca digitalmente.

Informações sobre faixa de renda consultadas através do site:
Centro de políticas sociais [Online] // FGV SOCIAL.
09 de Novembro de 2020. - https://cps.fgv.br/qual-faixa-de-renda-familiar-das-classes.

Análise
swot

Ambiente interno
Forças Mais de 1000 lojas espalhados por cinco estados no Brasil.
Clube de fidelidade para os clientes.
Reconhecido como supermercado de valor acessível para o cliente.
Fraquezas               Não disponível para compra on-line.
Pouco entrosamento do meio digital com meio físico.
Pouca presença digital e engajamento nas redes sociais.



Ambiente externo
Oportunidade       Aumento de compras por e-commerce.
Expansão de alcance de clientes por delivery.
Criar relacionamento com clientes.
Ameaças Aumento de custo das entregas.
Crescimento dos concorrentes pequenos e grandes.
Preço oscilante dos produtos.

Dados de pesquisas
por search engines

Por meio das ferramentas Alexa (http://www.alexa.com) e (http://www.neilpatel.com.br) foi possível analisar superficialmente o comportamento do usuário e algumas estratégias de SEO utilizadas pelos Supermercados DIA.


Pesquisa pelo site Alexa

O principal meio de acesso ao site do case se dá via acesso orgânico. Entre os meses de janeiro/2020 e junho/2020, a quantidade de acessos girava em torno 120 mil e 300 mil acessos por pesquisas normais, com palavras chave orgânicas em sites de busca. Os picos foram durante os meses de março e maio/2020, com mais de 300 mil acessos por mês.

●   Imagem da tabela


Pesquisa pelo site Neil Patel

A plataforma Neilpatel detectou que boa parte dos acessos também vieram via compartilhamentos do Facebook, onde há cerca de 274 mil links para a página inicial da empresa, bem como a seção de lojas (dia.com.br/lojas), com mais de 146 mil links e trabalhe conosco (dia.com.br/trabalhe-conosco), com 182 links.

●   Imagem da tabela

●   Imagem da tabela


Pesquisa pelo Facebook Ads

O Supermercado Dia utiliza ativamente a plataforma de divulgação do Facebook, que também opera no Instagram. São utilizados diversos formatos, para diferentes plataformas, desde mobile até desktop. Não é possível obter dados de alcance desta forma de distribuição.

●   Imagem da página

Análise de
divulgação online


Divulgação pelo Instagram

A conta oficial da empresa no instagram (@diasupermercado) possui cerca de 219.000 seguidores, onde existe a média de 1 postagem por dia. O conteúdo das postagens se resume em dicas para o dia-dia, sugestões de produtos que levam como marca o próprio logotipo do Dia, além de vídeos de receitas feitos nos moldes do estilo DIY (Do It Yourself - traduzindo, Faça você mesmo), produzidos com recursos de alto nível e qualidade técnica.

Utilizam como mascote um personagem 3D simples, que remete à uma bolsa vermelha e com expressões faciais que se modificam, de acordo com a temática em suas postagens.


Divulgação pelo Facebook

A conta oficial da empresa no Facebook (/diasupermercado) possui cerca de 2.084.374 seguidores, onde existe a média de 1 postagem por dia. O conteúdo das postagens é replicado do que é colocado no seu Instagram. O engajamento de seus conteúdos na plataforma é balanceado, no entanto, postagens indicando promoções e com imagens de produtos são os que mais possuem curtidas.


Divulgação pelo Youtube

O canal oficial do Supermercado Dia no Youtube conta com 7,36 mil inscritos, e seu conteúdo é formado por vídeo de receitas com duração de 1 minuto que tem como objetivo principal apresentar os produtos próprios da marca Dia. Além disso o canal conta com vídeos institucionais, de dicas do dia a dia e claro, contém os vídeos de campanhas que são geralmente vinculadas na televisão aberta. Percebemos que o YouTube é a rede social que a marca apresenta menos índice de interação e de criação de conteúdo, podendo ser mais bem aproveitada, pois a proposta de receitas com produtos próprios é uma ótima forma de atração de clientes.


Divulgação pelo LinkedIn

O Dia conta com 82.936 seguidores em sua conta oficial do Linkedin e suas postagens são de marketing de conteúdo com abordagem institucional. O conteúdo da rede social é formado por imagens e vídeos curtos acompanhados de pequenos textos. Suas peças quase sempre vêm acompanhada com sua mascote oficial.


●   Exemplos de materiais de divulgação


Pesquisa pelo site Neil Patel

A plataforma Neilpatel detectou que boa parte dos acessos também vieram via compartilhamentos do Facebook, onde há cerca de 274 mil links para a página inicial da empresa, bem como a seção de lojas (dia.com.br/lojas), com mais de 146 mil links e trabalhe conosco (dia.com.br/trabalhe-conosco), com 182 links.

●   Imagem da tabela

●   Imagem da tabela

5

Entrega

Apresentação

Foi uma campanha de incentivo ao uso do cartão de crédito Visa na máquina Cielo durante os meses que antecediam a Copa do mundo de 2014.

Confira a apresentação em PDF Acesse a versão final do site

●   Imagem demo da apresentação

6

Considerações finais

Créditos

Projeto de conclusão da graduação em design de mídias digitais
para a FATEC - Faculdade de Tecnologia de Barueri "Padre Danilo José de Oliveira Ohl"

Professora Denise Lemes
Orientadora

Marcos Roberto Correa
Pesquisa, design de interfaces + mídias sociais,
codificação em html + css e aplicação em Wordpress

Matheus Bonfim
Pesquisa e design de mídias sociais (primeira versão)

Giovanna Amanda
Pesquisa e design de mídias sociais (primeira versão)

Bruna Mavie
Pesquisa e design de mídias sociais (primeira versão)