Em Junho de 2010 foi lançado o novo site da da CBSS, administradora dos cartões Visa Va-le. A reformulação deste teve como objetivo aumentar o número de novos contratos pela Internet, modernização da imagem do canal e trazer mais informações e serviços para: empresas, estabele-cimentos e usuários do cartão. O objetivo deste documento é compartilhar a metodologia utilizada para a obtenção de resultados positivos, dando ênfase ao trabalho de Arquitetura de Informação e Usabilidade. Devido a recente publicação do site, parte das métricas e análises ainda estão sendo levantadas, podendo ser abordadas com mais riqueza durante o evento.
Cartões de Benefícios Visa Vale: Metodologia e resultados do novo site
1. Cartões de Benefícios Visa Vale
Metodologia e resultados obtidos na construção do novo site
2. SOBRE O CLIENTE
Visa Vale é...
Gestora de Cartão de Benefícios
–Alimentação Visa Vale
– Refeição Visa Vale
– Cesta Alimentação
– Natal Alimentação
– Flex Car Visa Vale
–Vale Transporte
3. SOBRE O CLIENTE
Visa Vale é...
Referência de mercado:
– 210 mil estabelecimentos credenciados no país;
– 70 mil empresas clientes;
– 5,4 milhões de cartões;
– 22 milhões de transações por mês.
4. HISTÓRICO
2006
• A CBSS completa 3 anos assumindo a vice-liderança do
mercado, com 30% de participação.
• O site é reformulado com objetivo de:
– Fechar contratos on-line com novos clientes;
– Realizar e gerenciar pedidos mensais dos benefícios de seus cartões.
5. HISTÓRICO
De 2006 a 2009
O site conquista marcas importantes:
– 30% dos novos contratos são feitos pela Internet;
– 99,5% dos pedidos mensais dos clientes são realizados on-line;
– Crescimento contínuo dos pageviews, chegando a 7 milhões em março de
2009.
7. HISTÓRICO
Novos planos
• Em 2009 novos desafios:
– Aumentar a fatia de vendas de novos contratos pelo site;
– A maioria dos contratos (70%) eram fechados por agências e bancos
sócios;
– Diminuir as dúvidas dos usuários e desafogar o atendimento telefônico;
– Agregar no site novos projetos e conteúdos para valorizar o serviço.
9. PROJETO
4 Empresas envolvidas
• Departamento de Marketing Visa Vale
– Coordenação do projeto e das equipes envolvidas;
– Definição da estratégia do site;
– Definição de públicos-alvo e metas;
– Validação do projeto.
10. PROJETO
4 Empresas envolvidas
• Lumens Consultoria
– Revisão da Navegação e Conteúdo;
– Definição do Fluxos e Mapas do novo site;
– Criação de Wireframes para páginas-chave;
– Teste de Usabilidade e Recomendações;
11. PROJETO
4 Empresas envolvidas
• Ad. Agency
– Concepção do Design;
– Elaboração do Protótipo em HTML para Teste de Usabilidade;
– Ajustes e finalização da Interface;
• Kaizen
– Implantação
12. PROJETO
Ressalvas Importantes
• O planejamento levou em conta cronograma reduzido e baixo
investimento.
• Esse trabalho focou apenas a atuação da Lumens Consultoria
no projeto.
13. PROJETO
Metodologia
• Análise da situação atual
– Histórico do site;
– Definição da estratégia;
– Análise do público-Alvo;
– Análise das necessidades da Visa Vale;
– Análise prévia do site de 2009 (Navegação, Conteúdo e Métricas);
14. PROJETO
Metodologia
• Estratégia e Arquitetura de Informação
– Inventário do conteúdo;
– Mapa do site;
– Fluxos de navegação;
– Wireframes;
• Validação
– Teste de Usabilidade.
16. Entendendo o Público
Usuário de cartão
• São os funcionários das empresas contratantes.
• Principais interesses:
– Verificação do extrato do cartão e serviços relacionados;
– Consulta à estabelecimentos filiados;
– Ofertas, dicas e matérias são atrativos complementares.
17. Entendendo o Público
Empresa Cliente
• Funcionários de RH das empresas que já contrataram os
produtos Visa Vale.
• Principais interesses:
– Efetuar os pedidos mensais dos benefícios para os funcionários (área
logada);
– Fazer o controle dos pagamentos e outros serviços relacionados;
– Trazer mais atrativos para qualidade de seus funcionários;
18. Entendendo o Público
Estabelecimento Cliente
• Estabelecimentos comerciais que aderiram a rede Visa Vale.
• Desejam utilizar os serviços exclusivos para esse segmento.
Ex: Material de Sinalização, Reembolso, etc.
19. Entendendo o Público
Empresa Prospect
• Empresas interessadas em adquirir os serviços da Visa Vale.
• Estão divididas em Pequena, Média e Grande empresa.
• Se diferenciam pela quantidade de beneficiados e
necessidades específicas do RH.
21. Entendendo o Público
Outros
• Profissionais da imprensa que desejam obter informações
institucionais a respeito da Visa Vale.
• Trabalhadores e estudantes com interesse em oportunidades
na empresa.
23. Atendimento via Chat
Perguntas dos Usuários
• "Gostaria de saber qual a diferença entre Alimentação Visa
Vale e Refeição Visa Vale?"
• "Olá! O Visa Refeição aceita nas redes de supermercados?"
• "Gostaria de receber um orçamento com Visa Vale e Vale
Transporte no mesmo cartão. É possível?"
Qual a diferença entre os produtos?
25. Atendimento via Chat
Perguntas dos Usuários
• "Eu quero fazer o cadastro direto com vocês e pagar via
boleto bancário sem ser intermediado por banco, é possível?"
Quais são as formas de pagamento?
26. Atendimento via Chat
Perguntas dos Usuários
• "Eu estou tentando efetuar um cadastro, mas não foi
efetuado. Dá erro!"
Problemas técnicos durante o fechamento do pedido.
27. Vivendo a experiência
A Lumens é cliente...
• Perguntar para os próprios funcionários ajudou nesse
momento.
• Descoberta: As recomendações da "Cartilha do Usuário"
enviada pelo correio não existiam no site.
• Resultado: Os funcionários jogavam fora a cartilha e depois
tinham dúvidas:
– "Como olhar o saldo?"
– "Como trocar a senha do cartão?"
30. Necessidades
Produto Vale-Transporte
• É um produto diferenciado. A Visa Vale não emite esse
cartão, porém faz o serviço de gerenciamento para os
clientes.
• As informações e o canal de vendas estavam em um site
diferente.
Falta integração.
31. Necessidades
Desinchaço do Atendimento
• O número de chamadas no canal de vendas crescia para
esclarecer dúvidas que já estavam respondidas no site.
O site não cumpria bem seu papel de orientar.
33. Necessidades
Novos Serviços
• Novas ferramentas para agregar valor aos produtos da
empresa:
– Busca de Estabelecimentos mais interativa;
– Pesquisa do Ticket Médio por Região;
– Plano de Parcerias para oferecer descontos aos usuários.
A antiga arquitetura não previu essas necessidades.
35. Google Analytics
Funil Solicitação de Novos Cartões
• Passo 1 – Página ’Seja Nosso cliente’
68% desistiam na leitura do texto.
• Passo 2 – Página com simulador de valores
45% desistiam simulando um pedido.
• Passo 3 – Página com formulário de preenchimento da proposta
79% desistiam no preenchimento.
4% dos usuários concluíam uma solicitação.
36. Google Analytics
Comportamento dos Usuários
• As páginas mais acessadas eram Saldo e Extrato dos Cartões.
– Era a página de Entrada de mais da metade dos usuários.
A maioria não via a Página Inicial.
– 62% usuários saiam após sua consulta.
O sucesso das campanhas de relacionamento dependia da retenção do
interesse dos usuários.
37. Google Analytics
Comportamento dos Usuários
• 27% dos usuários vinham do Google
– A maioria dos prospects fazia esse caminho.
O sucesso das vendas dependia da eficiência em sites de busca e da
recepção adequada desses usuários.
39. Análise do Site
O Inventário
• Foram listadas 50 páginas com conteúdos diferentes.
Ou nem tanto...
• 13 assuntos relevantes não eram contemplados.
40. Análise do Site
Navegação
• 5 áreas de navegação
– Os links não estavam organizados de maneira lógica.
– Fora dos menus, alguns conteúdos só existiam na home.
– Alguns links do rodapé eram maiores que links 'Call to Action'.
– O sub-menu e apresentação dos produtos da Visa Vale só eram
visualizados nas páginas internas.
• Era necessário clicar no menu e procurar o sub-menu na página
interna.
42. Conteúdo
Textos e Imagens
• Textos grandes, imagens pouco significativas.
• Conteúdo pouco objetivo.
– Difícil de encontrar as informações mais relevantes do negócio.
46. Organizando o Menu
Premissas
• A mudança deveria manter parte do aprendizado de
navegação já adquirido no site.
• Deveria ser no topo, e manter parte dos rótulos já
estabelecidos.
47. Organizando o Menu
Proposta Simplista
Empresa
Estabelecimento
Usuário
• Concentrava os conteúdos para os clientes dentro da área
"Serviços". Focava o restante para os novos clientes.
48. Organizando o Menu
Proposta por Público-Alvo
• Concentrava o conteúdo para novos clientes dentro de "Seja
Nosso Cliente".
49. Organizando o Menu
Proposta Prospect x Cliente
• Divide o menu entre clientes e prospects.
• Bem próximo ao menu anterior.
Aprovada!
50. Organizando as Páginas
Mapa do Site
• O novo mapa previa todas as áreas dentro do menu
planejado.
• Nesse momento rótulos foram revisados e simplificados.
• Os principais fluxos de navegação foram traçados, fazendo a
relação dos conteúdos complementares.
• Conteúdos futuros também foram previstos nesse momento.
51. Organizando as Páginas
Mapa do Site
• Comentários adicionais:
– A revisão dos rótulos e títulos levou em conta as palavras-chave usadas
pelos usuários, colhidas no Google Analytics. Isso facilitaria a futura
estratégia SEO do site.
– Foi um momento de muita de negociação com a Equipe de Marketing,
que tinha cuidado para que as mudanças não prejudicassem nomes já
estabelecidos para seus produtos.
54. Definindo a estrutura
Premissas
• A Lumens Consultoria definiu páginas pré-determinadas,
consideradas de maior importância pela Equipe Visa Vale.
• A definição dos wireframes não detalhou o conteúdo dos
textos, somente títulos.
55. Definindo a estrutura
Funcionamento do menu
• Um conjunto de wireframes foi dedicado para explicar o claro
funcionamento do menu.
• Ele foi organizado em dois níveis de profundidade, prevendo
todo o conteúdo do site.
56. Definindo a estrutura
Funcionamento do menu
Sobre a Cartões Vale Rede sua meu seu
Visa Vale Visa Vale Transporte afiliada Atendimento EMPRESA VISA VALE ESTABELECIMENTO
Nossa história
Assessoria de Imprensa
Informações e números
Releases e notícias
Arquivos para download
Ações de Sustentabilidade
Prêmios conquistados
Banner divulgação
de conteúdo em
destaque
57. Definindo a estrutura
Funcionamento do menu
Sobre a Cartões Vale Rede sua meu seu
Visa Vale Visa Vale Transporte afiliada Atendimento EMPRESA VISA VALE ESTABELECIMENTO
Conheça nossos produtos Seja nosso cliente
Cartões Alimentação
sua EMPRESA
Alimentação Visa Vale Faça seu pedido
Refeição Visa Vale
Cesta Alimentação Visa Vale meu VISA VALE
Saldo e Extrato
Natal Alimentação Visa Vale
Como usar o seu cartão
Cartões Combustível
Banner “Por que
Flex Card Visa Vale Visa Vale?”
58. Definindo a estrutura
Funcionamento do menu
Sobre a Cartões Vale Rede sua meu seu
Visa Vale Visa Vale Transporte afiliada Atendimento EMPRESA VISA VALE ESTABELECIMENTO
Serviços em Vale Transporte
Diferenciais
Sugestão de rotas, bolsa de
crédito, 2ª.via de cartão bilhete
único, Envio de SMS
Operadoras conveniadas
Seja cliente de Vale Transporte
Faça seu pedido
(cliente cadastrado)
59. Definindo a estrutura
Funcionamento do menu
Sobre a Cartões Vale Rede sua meu seu
Visa Vale Visa Vale Transporte afiliada Atendimento EMPRESA VISA VALE ESTABELECIMENTO
Consulta rede afiliada
Rede delivery
Indique estabelecimentos
Cadastre seu estabelecimento
60. Definindo a estrutura
Funcionamento do menu
Sobre a Cartões Vale Rede Atendimento sua meu seu
Visa Vale Visa Vale Transporte afiliada EMPRESA VISA VALE ESTABELECIMENTO
Atendimento a Empresas
Atendimento Usuários de cartão
61. Definindo a estrutura
Funcionamento do menu
Sobre a Cartões Vale Rede sua meu seu
Visa Vale Visa Vale Transporte afiliada Atendimento EMPRESA VISA VALE ESTABELECIMENTO
Faça seu pedido Vale Mais
(cliente cadastrado)
Revista Vale Mais
Conheça nossos produtos Empreendedorismo
Seja nosso cliente Promoções e descontos
Sobre o PAT Consulta rede afiliada
Vantagens do PAT
Atendimento a Empresas
Perguntas e respostas sobre o PAT
62. Definindo a estrutura
Funcionamento do menu
Sobre a Cartões Vale Rede sua meu seu
Visa Vale Visa Vale Transporte afiliada Atendimento EMPRESA VISA VALE ESTABELECIMENTO
Como utilizar o seu cartão Vale Mais
Saldo e extrato Revista Vale Mais
Bem Estar
Serviços pelo celular
Promoções e descontos
Rede Afiliada Programa Olá
Consulta Rede Afiliada Atendimento Usuários de cartão
Rede Delivery
Banner divulgação
Almoço com amigos Vale Mais
63. Definindo a estrutura
Funcionamento do menu
Sobre a Cartões Vale Rede sua meu seu
Visa Vale Visa Vale Transporte afiliada Atendimento EMPRESA VISA VALE ESTABELECIMENTO
Reembolso imediato Vale Mais
Como usar o Visa Vale em seu Revista Vale Mais
estabelecimento Bem Estar
Materiais de sinalização Promoções e descontos
Consulta rede afiliada
Banner divulgação
Cadastre seu estabelecimento Vale Mais
64. Definindo a estrutura
Página Inicial
• As propostas atendiam variações dos seguintes conteúdos:
– Destaques para cada segmento (Prospect, Empresa, Estabelecimento,
Usuário);
– Atalhos para áreas mais usadas pelos clientes;
– Banner para campanhas;
– Destaque para diferenciais (Sustentabilidade, Prêmio);
– Programa de descontos Vale Mais;
– Notícias sobre a Visa Vale.
69. Definindo a estrutura
Página dos Cartões
• O objetivo era facilitar o entendimento e a comparação dos
produtos.
• As diferenças geravam dúvidas frequentes na Central de
Vendas.
72. Definindo a estrutura
Página do Produto
• O objetivo era detalhar o cartão de maneira simples.
• Enfatiza as vantagens para facilitar a rápida leitura da página.
• Facilidade visou também o SEO. A página do produto era a
entrada de muitos vindos do Google.
75. Definindo a estrutura
Simulação e Aquisição
• O objetivo era facilitar a simulação de pedidos, processo vital
para o entendimento dos usuários.
• Depois disso, deixar claro os passos de aquisição ao cliente.
84. Teste de Usabilidade
Estrutura do Teste
• Entrevistas individuais em sala de espelho.
• Protótipo navegável.
• 10 participantes.
• 2 perfis de usuários:
1. Empresas que não possuem benefícios, mas que tinham intenção em
contratá-los;
2. Empresas que já haviam contrato benefícios na concorrência.
85. Teste de Usabilidade
Estrutura do Teste
• Tarefas
– Obter informações sobre a Visa Vale;
– Comparar a diferença entre dois cartões de benefícios;
– Simular a aquisição de um produto;
– Contratar o serviço;
– Solicitar um benefício para o próximo mês;
– Consultar saldo do cartão;
– Tirar dúvidas através do Atendimento.
86. Teste de Usabilidade
Relatório de Resultados
• Todos os resultados foram tabulados.
• Foi gerado um relatório completo orientando o processo de
revisão.
• Por fim, uma série de recomendações para a correta
programação e implantação técnica.
87. Teste de Usabilidade
Alguns resultados...
• Desconheciam a marca "CBSS". Por causa da bandeira, a
marca "Visa" trazia mais credibilidade aos usuários.
88. Teste de Usabilidade
Alguns resultados...
• Reparavam e entendiam as imagens de situação para explicar
o cartão.
89. Teste de Usabilidade
Alguns resultados...
• Tinham dificuldade para entender a diferença entre alguns
serviços.
– Revisão de títulos e rótulos.
Antes Depois
90. Teste de Usabilidade
Alguns resultados...
• Não rolavam a página em algumas áreas.
– Revisão de áreas de respiro e layout.
• Utilizavam os atalhos na lateral tanto quanto o menu.
– Valorização da área lateral.
• Tinham dificuldade em entender a diferença entre simular
preços, adquirir e solicitar a proposta .
– Revisão das etapas de contratação de serviço.
103. Após Jun/2010
Melhor visibilidade
• Clara evolução após aprimorar as estratégias de SEO.
– Conseguiu as primeiras posições orgânicas de palavras de grande
relevância para o negócio.
Ex: Topo com a palavra ‘Vale Alimentação’
104. Após Jun/2010
Número de propostas
• Aumento de 117% de propostas feitas na Central de Vendas
do site em relação ao mês anterior.
105. Após Jun/2010
Novos contratos
• Aumento de 19% em relação ao mês anterior;
• Aumento de 50% em relação ao mesmo período do ano
passado;
• Aumento de 30% para 40% na participação do site em novos
contratos da empresa;