corberto

Programas de
Incentivo Santander

Tarefas Design de interfaces
Ano 2014-2015
Empresa Casanova Full Thinking / Grupo LTM

Breve
resumo

O Santander lançou duas plataformas entre 2013 e 2014, com o objetivo de oferecer soluções personalizadas e práticas para seus clientes. A primeira foi criada com o objetivo de ajudar os clientes a economizarem, analisando seus padrões de gastos e fornecendo recomendações sobre como poupar dinheiro. Esse espaço utilizava tecnologia de análise de dados para identificar oportunidades de economia e fornecer alertas sobre despesas excessivas ou inesperadas.

A segunda plataforma, por sua vez, foi totalmente voltada para o incentivo de compras, através de pontuações obtidas por gastos realizados com o cartão de crédito do próprio banco. Os clientes podiam acumular pontos a cada compra e, posteriormente, trocá-los por produtos ou serviços, ou até mesmo por descontos em suas próximas compras. Além disso, a plataforma oferecia promoções exclusivas e ofertas especiais para os clientes mais fiéis.

Nosso
trabalho

O time de concepção teve a responsabilidade de pensar no funcionamento das plataformas e como elas poderiam ser úteis para os clientes do Santander. Para isso, contaram com o apoio de profissionais de atendimento, que ajudaram a entender as necessidades dos usuários e a criar uma solução que atendesse a essas demandas. Além disso, pude trabalhar em conjunto com um redator para criar uma interface visualmente atraente e fácil de usar. Todos trabalharam em conjunto para construir soluções sólidas e eficazes, que foram apresentada ao banco Santander com sucesso.

Seções

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

1

Plataforma

Na ponta
do lápis

Foi uma ferramenta online que ajudava as pessoas a se organizarem financeiramente. Ela possuía uma conexão com os padrões de gastos dos clientes e utiliza essas informações para criar gráficos que mostram como o dinheiro está sendo gasto. Além disso, a plataforma também fornecia dicas e sugestões de como economizar dinheiro. Era uma ótima opção para quem desejava ter uma visão mais clara das suas finanças e encontrar maneiras de otimizar o seu orçamento.

●   Imagem da página inicial do site

Página
de início

Após o login, a página apresenta um menu de navegação na parte superior, permitindo ao usuário acessar as diferentes seções da plataforma de forma rápida e fácil. No centro da tela, há um gráfico que mostra a estimativa de gastos do cliente, delimitada por período. Esse gráfico é atualizado automaticamente com as últimas informações disponíveis, fornecendo ao usuário uma visão precisa de como estão sendo utilizados seus recursos financeiros. Abaixo do gráfico, há avisos em formato de banners, destacando informações importantes para o usuário.

●   Imagem da página inicial do site

Recorte por
conta conjunta

A imagem a seguir representa o gráfico para conta conjunta,
contendo as informações de gastos por porcentagem, para cada cônjuge.

●   imagem do gráfico

Área
do simulador

Também foi desenvolvida uma ferramenta para quem deseja ter um controle mais eficiente das finanças e ter uma noção mais precisa de para onde estão sendo direcionados seus gastos. Nela, o usuário pode inserir informações com o valor de compras (ou utilizar os dados já capturados de seus cartões de crédito), como despesas fixas e variáveis, e a plataforma fará uma simulação do orçamento atual. Além disso, a página também fornece dicas personalizadas de como aperfeiçoar a situação financeira do usuário, de acordo com as informações inseridas no simulador.

●   CTA para a ferramenta

●   Tela do gráfico + dicas de economia

Gerenciar
sonhos

A ideia desta página teve como objetivo criar um espaço onde o usuário pôde colocar metas a serem alcançadas, como comprar um carro, uma casa ou fazer uma viagem. Nessa página, o usuário poderia acompanhar o progresso de suas metas e ver quanto ainda faltava para alcançá-las. Posteriormente, a mecânica da página foi reformulada e otimizada por profissionais de TI, sem o controle da equipe de criação.

●   Página com CTAs

●   Imagem do formulário da página de sonhos

Agenda
de pagamentos

A página de agendamento de pagamentos permitia que o usuário organizass e gerenciasse suas contas a pagar de forma mais eficiente, com opções de delimitação de tempo por dia, mês e ano. É uma ferramenta útil para evitar atrasos ou esquecimentos.

●   Delimitação de gastos diários

●   Delimitação de gastos mensais

Páginas
externas

Contém os formulários iniciais
e confirmação de criação de conta.

●   Página de cadastro

●   confirmação de conta criada

2

Plataforma

Santander
Esfera

Santander Esfera foi uma plataforma de incentivo que permitiu aos usuários do cartão de crédito Santander trocar pontos por produtos de diversas categorias. Os pontos eram obtidos por volume de compras que o portador do cartão realizava em diversos contextos.

Foi desenvolvido um KeyVisual, que serviu como guia, pois a arquitetura da informação e os profissionais de front-end eram de equipes do banco Santander, logo, a célula de criação não pôde acompanhar as etapas posteriores de construção do projeto.

●   Imagem da página inicial do site

Listagem
de parceiros

Contém a lista de parceiros e suas respectivas
promoções em porcentagem.

●   Imagem da lista de parceiros completa

Página
do parceiro

Mostra a promoção, os critérios de aplicação, além de convidar o usuário a observar as ofertas de outras lojas.

●   Descrição da promoção

Páginas de busca
de descontos

Abaixo, seguem as páginas de buscas (segunda versão), contendo produtos e suas respectivas pontuações.

●   Página de produtos (A)

●   Página de produtos (B)

Outras telas
de exemplo

Seguem abaixo as telas de suporte da plataforma,
contendo formulários e textos contendo informações sobre o programa.

  ●   Tela de formulário

●   Tela com texto descritivo

Blog
do Esfera

Abaixo, segue um dos modelos de blog criados para o programa. Foi moldado para que fossem incluídas postagens sobre estilo de vida, com textos criados por especialistas de culinária, paisagismo, moda, entre outros.

●   Exemplo de blog

Versão
mobile

Segue abaixo um exemplo da adaptação mobile do site.

●   Adaptação mobile