Burger King SpiderVerso
Feature Landing Page
Criação da primeira campanha feito pelo Burger King utilizando a Landing Page exclusiva dentro do app Bk. A feature Landing Page vinha sendo desenolvida pelo time de Cupons e aplicada junto ao time do app. A landing page foi criada para facilitar a aplicação de campanhas dentro do app e a primeira campanha escolhida foi Spiderverso 2 em conjunto com a Sony® Brasil.
A landing page ajudará nas vendas de cupons com maior CMV (Custo da Mercadoria Vendida) que anteriormente estaria na aba “pra você” dentro do app do Bk.
Task Flow
Modelo de ação do organograma que conecta a landing page, que vem do banner primário, ao app do Burger King, e também mostra de forma clara e didática os caminhos que o usuário pode seguir.
Wireframe
Recurso inédito mundialmente no Burger King, implementado pela primeira vez com a seleção brasileira. Isso nos dá uma estrutura de Landing Page totalmente personalizável, o que significa que podemos remover e adicionar recursos disponíveis para o usuário.
Banner Principal
Para captar a atenção do usuário e promover a interatividade, implementamos um efeito de paralaxe. À medida que o usuário rola a página em seu dispositivo móvel, o personagem da campanha, Homem-Aranha, se move de acordo.
BK Stories
Projetado para transmitir clareza e captar a atenção do cliente, mantendo-se fiel à essência da marca Burger King.
BK Stories
Recurso de Stories no aplicativo, seguindo o mesmo formato do Instagram e outras plataformas de mídia social.
CTA Banner
Call to action em estilo banner que, ao ser clicado, leva o usuário a um tour por todos os locais do aplicativo Burger King e oferece a chance de ganhar mercadorias da marca.
Cupons Estratégicos
Estrategicamente posicionados na landing page do aplicativo, os cupons de produtos são elementos-chave neste fluxograma. Como parte da equipe de cupons de produtos, eu e minha equipe entendemos sua importância. É importante ressaltar que eles aparecerão apenas na landing page, e não em nenhum outro lugar.
Informações Jurídicas
Uma seção dedicada na página deve fornecer acesso a todas as informações legais relacionadas à campanha, incluindo todas as regras e regulamentos para os participantes.
UI Design
A landing page foi desenvolvida em colaboração com a equipe do aplicativo Burger King, incluindo desenvolvedores e a equipe de UI. Fui responsável por toda a concepção da landing page, incluindo wireframe e imagens utilizadas. Também fui responsável em capitaniar o projeto junto ao time de desenvolvedores, Qas e Product Owners.
Motion Design De Transição
Motion design UX para a transição entre a tela inicial do aplicativo e a landing page. Esse recurso aumenta a visibilidade da campanha por meio de uma transição de estilo “multiverso” inspirada no filme SpiderVerse.
A transição foi criada no After Effects e desenvolvida com base no repositório lottiefile utilizando tecnologia Json.
Parallax Banner Principal
Para transmitir o conceito de multiverso e criar uma conexão mais próxima com diferentes tipos de clientes, criamos três landing pages, uma para cada personagem do filme (Gwen, Miles Morales e Spider-2099). Cada landing page apresenta sua própria animação e movimento exclusivos.
BK Stories
Recurso de história no aplicativo, seguindo o mesmo formato do Instagram e outras plataformas de mídia social. O Bk Stories possibilita a comunicação de diversas informações da campanha que está sendo desdobrada na landing page.
User Flow
Mapa da jornada do usuário para nosso aplicativo, detalhando todos os possíveis caminhos e interações do usuário. O mapa inclui um fluxograma que ilustra as ações que os usuários podem ou não realizar dentro da landing page, desde o login do usuário até a compra de um cupom através landing page.
Resultados de Negócio
Mais de 616.357 de usuários utilizando as landing pages do SpiderVerso, heavy users e novos usuários interagindo com as funcionalidades dentro das landing pages.
Users
Users
Users
HeatMaps
Mapa de calor criando pelo nosso sistema de monitoramento dentro do app confirmando que o usuário está clicando exatamente onde prevíamos. sua atenção transcorre pela landing page, focando nos elementos até fixar sua atenção na venda dos cupons especiais do Bk.
FocusMap
Mapa de foco mostrando que o usuário está interagindo bastante com o banner principal contendo o efeito parallax. Efeito criado pela primeira vez dentro do app e constatamos boa repercução entre nossos heavy users.
Logo após o usuário passa seu foco para os stories onde. o usuário procura por ofertas exclusivas.
-
Próximo Trabalho