A jornada completa de UI/UX do primeiro app da Warner Bros. para a CCXP19, sucesso de downloads nos 4 dias oficiais do evento, em São Paulo

😬 Antes de entrar no filé mignon do projeto, é legal pontuar alguns aspectos essenciais desse trampo. Bora lá?

1) Desafio

Objetivo principal: criar um app para gerar maior praticidade no agendamento das atrações do estande da WB na CCXP19, eliminando o problema clássico das filas físicas em eventos desse porte;

Objetivos específicos: definir as proposições de valor de maior relevância para o público-alvo; detectar e solucionar questões de apresentação, usabilidade e desempenho do produto digital; explorar oportunidades para reforçar o engajamento e o posicionamento da marca no mercado; propor um roadmap para expansão de funcionalidades e melhorias.

2) Equipe principal

Daniel Risi como Diretor CX, Fernando Teixeira como Diretor de Criação, André Sá como Diretor de Arte, Felippe Kanashiro como Gerente de Produto, Pedro Matos como Gerente Comercial e suporte in loco durante o evento, Carlos Kikuti, Leonardo Pepis e Rodrigo Kuya como Dev's iOS e Android.

3) Minha contribuição

Atuei, como Designer UI/UX, em todos os aspectos da criação do app #WarnerNaCCXP, desde a fase de entendimento inicial, proposição de valores, pesquisa com usuários, análises, metodologias, design e melhorias pós-lançamento em tempo real, durante o evento. Acompanhei também a maior parte das ativações da CCXP, ajudando o público e testando funcionalidades de diversas ativações físicas e digitais.

👽 "Houston, we have a problem"

Durante a CCXP 2018, foi criado um site de reserva de ingressos com o objetivo de acabar com as intermináveis filas físicas e proporcionar um agendamento confortável nas atrações do estande da WB.

O site rodou tranquilo e a aderência do público foi intensa já no primeiro dia do evento. O cenário parecia estar sob controle, mas um vilão contundente (que não era da Warner) surgiu para desafiar o nosso heróico site: a internet. O problema surgiu a partir de muita interferência de sinal de outros estandes, instabilidade da internet local e dificuldade do público para realizar agendamentos online em determinados momentos.

Foi então que, no meio de um turbilhão de vozes, escutamos a seguinte frase:

🤔 Houston, we're dealing with that problem!

Fizemos pesquisas no melhor estilo "live action" durante a própria CCXP18, para entender e mapear as reações dos usuários ao utilizar o site.

Aliás, um fator exclusivo desse evento é a possibilidade de receber feedback em tempo real dos usuários. Essa relação estreita com todos eles é um grande mapa do tesouro para aprimorar ainda mais a ergonomia do app.

Pois bem: com algumas hipóteses mapeadas em 2018 a partir de pesquisas in loco, começamos em 2019 a colher impressões mais profundas de um público-alvo bem nichado: os superconectados geeks, consumidores digitais destacados num mercado complexo, em constante evolução.

Breve raio-x antropológico da CCXP

O perfil desse público pode ser dividido em três esferas sinérgicas: os tech geeks (buscam inovação através da tecnologia), cult geeks (interessados em cultura pop, séries, quadrinhos e super-heróis) e por final, os gamer geeks (ligados em games, console ou mobile). São influenciadores natos, criam tendências de comportamento e são muito comprometidos com os valores culturais desse universo parrudo das marcas e de personagens.

“Trata-se de um mercado pujante e com força para crescer ainda mais, com espaço para a entrada de mais criadores de conteúdos, produtos, eventos e oportunidades".

Lucas Mathias, profissional de marketing da MindMiners

Bingo! Muitos números em mãos, imersão no mercado geek e um perfil de usuário bem delineado pra iniciarmos a fase de bronzeamento cerebral:

• Na CCXP de 2018, 51% do público era formado por homens e 49% mulheres. Em relação à idade, 66% dos visitantes tinham entre 15 e 34 anos. Em média, quem passou por lá gastou 325 reais - um público com poder aquisitivo saudável, com gastos 40% acima da média nacional (segundo dados da Rakuten Digital Commerce);
• Em termos de classes sociais, 34% são da B2, 28% da C1 e 15% da C2;
• 76% utilizam o YouTube e frequentam diversas redes sociais;
• 45% possuem serviços pagos de streaming de filmes e séries (26% deles também possuem apps de música).

😎 Houston, anything else? We're fine here!

Fizemos, em outubro de 2019, uma nova pesquisa (dessa vez on-line) para validarmos a ideia de criar o app para a Warner (383 pessoas no total, em São Paulo, capital). Os resultados foram positivos:

• 96% dos usuários baixam apps frequentemente;
• 16% usam wearables (relógios que se comunicam com dispositivos mobile);
• 89% utilizam notificações como ferramenta de decisão e reação aos serviços dos aplicativos;
• 98% gostariam de utilizar um app na CCXP19 para evitar filas físicas no estande da WB;
• 8% preferem acessar um site ao invés de um app com o objetivo de reservar lugar em atrações na CCXP19;
• 5% preferem filas físicas ao invés de um site/aplicativo para ter acesso às atrações da WB na feira.

Suposições confirmadas:

• Pessoas utilizam apps para decidirem questões importantes do dia a dia;
• A experiência de entretenimento em dispositivos mobile é um dos principais focos da cultura de consumo do público geek;
• Sites são práticos, mas apps economizam tempo para acessar informações;

Suposições invalidadas:

• Uma parte considerável das pessoas ainda preferem usar pulseiras de identificação em eventos de grande porte ao invés de se cadastrarem em aplicativos com essa funcionalidade;
• Usuários baixam menos apps do que gostariam por problemas de espaço nos dispositivos mobile.

👀 Mas… Quedê as Personas?

Opa! Personas são personagens fictícios, criados a partir de dados reais, para representar diferentes tipos de usuário para um produto em eclosão existencial. Elas devem expressar as reais necessidades, frustrações e desejos daquelas pessoas, mostrando o que originou aquele sentimento relacionado à sua proposta de valor.

Criamos 4 personas a partir de pesquisas e dados etnográficos do público que compõe a CCXP, englobando desde a base até o topo da pirâmide social:

🧠 Value Proposition Canvas (Strategyzer)

“É essencial saber decidir o que não será desenhado. O que você não desenha também é design.” (tweet com origem não citada)

💎💎 Triple Diamond parrudão

O Triple Diamond é um método ampliado de Design Thinking. Na minha visão, ele fornece um mapa mais claro que a metodologia do Double Diamond sobre como uma equipe pode atuar em fases específicas, no planejamento, no desenvolvimento, na resolução de problemas e na criação de produtos novos.

Além disso, essa metodologia amplia a participação e desperta o interesse dos designers na fase de pós-prototipagem, ecoando diretamente no resultado da relação com a equipe de desenvolvimento do produto.

🎈O app #WarnerNaCCXP nasceu na celulose

Wireframes rústicos*

Nesse esqueleto, foquei em desenvolver as funcionalidades do aplicativo e como as informações poderiam ser mostradas a cada etapa do processo de agendamento das atrações. Esse step (ainda manual, no lápis mesmo) me ajudou a realizar testes de maneira produtiva sem me preocupar em excesso com a UI do app naquele momento.

*Não cheguei a fazer os wireframes no Sketch por causa da agenda apertada de entregas. Discuti essa estrutura internamente com a equipe de UX e também em reuniões com o cliente para aprovar o fluxo proposto e alinhar a criação posterior das telas definitivas.

🥩 Filé do dia: o Protótipo

O app #WanerNaCCXP foi criado a partir de um design digital projetado também no estande físico do evento: a preocupação era criar um storytelling (também) visual, que orientasse os usuários espacialmente na feira, a partir de referências estéticas embutidas no design no app.

O projeto inicial foi pensado para utilizarmos cenas dos filmes e séries para identificar cada card das ativações, numa aposta de conectar o público emocionalmente com as atrações. Mas por problemas de direito autoral, tive que criar as artes de cada card apenas com os logotipos pra compor a home.

O app ainda está disponível na Apple Store e Google Play, mas as funcionalidades não estão mais ativas. Por isso, não coloquei os links pra download aqui no texto, oká? 🙄

Color schemes

A paleta do app seguiu as 3 cores do logo exclusivo da CCXP19, com a adição da cor Dark Black como sustentação de fundo para o projeto. Magenta é a cor de elementos de interação; yellow é aplicada em massas tipográficas com informações importantes e também é a cor dos icons do menu principal. Cyan foi utilizado para destacar os horários das atrações e também como cor de fundo de boxes de informação no topo das telas.

Icons e app icon

A malha iconográfica do menu principal foi criada a partir de um outline simples, sem preenchimento interno de cor. Na composição do app icon absorvi as 3 faixas de cor presentes no estande da Warner na CCXP19 de maneira sutil no topo, com o logo da WB em Cyan para gerar contraste.

Referência tipográfica

Embora o cliente tenha deixado livre a escolha da família tipográfica do app, eu decidi utilizar a mesma tipografia do site americano, a família Montserrat. Essa fonte possui uma amplitude de contraste muito grande, em 18 variações.

A coesão tipográfica precisa ser esteticamente interligada com todos os suportes onde a marca se faça presente. São detalhes que podem passar batido logo de cara, mas o crossover integrado de linhas criativas é fator mandatório em qualquer projeto de design.

📱 Design de interface para a Cartoon Network

Além do app, criei as interfaces da ativação da Madame Caroço, com foco no público infantil. Foi incrível a experiência de baixar apps de crianças, calcular o tamanho do polegar e dedos indicadores deles para criar botões ergonômicos para atrair o interesse desses pequeninos.

A imersão para produzir o app foi gigantona, os desafios apresentados (corrida contra o tempo e o fato de desbravar o mundo de entretenimento geek, algo que não dominava com segurança) me fizeram ampliar o olhar crítico sobre coisas que eu não valorizava anteriormente.

⭐ Métricas de Sucesso

· Analisar o número de downloads e usuários cadastrados no app;
· Analisar o número de usuários que conseguiram participar das ativações;
· Analisar o número de usuários satisfeitos com as funcionalidades do app;
· Analisar o número de usuários que retornarão para a CCXP20 utilizando o aplicativo da Warner Bros. pela segunda vez.

🎓 Resumão comentado

Criar o app da #WarnerNaCCXP foi uma experiência incrível e um grande laboratório de ideias que motivou meio mundo de pessoas na agência.

Ter participado da feira (incluindo a Spoiler Night) fez uma baita diferença pra sacar como o app se comporta na hora do pega pra capar. Consegui fazer ajustes pontuais em tempo real, melhorando a experiência dos usuários na medida que novas problemáticas surgiam (tivemos picos de 53 mil pessoas simultâneas usando o app, o que podia comprometer gravemente a performance do app com um server sobrecarregado).

O que eu aprendi?

Ferramentas: fiquei mais ligeirão no Sketch, animei umas coisas no Adobe XD e fiquei craque no Invision;

UI Design: desenvolvi novas habilidades em Fundamentos de Design e criação de Interfaces funcionais e responsivas (mobile first). Criei Landing pages de ativações, elaborei protótipos e fiz animações de algumas telas.

UX Design Thinking: muita leitura sobre Estratégia, Geração de Ideias, Planejamento, Ergonomia, Validação e Pesquisa, além de Métricas e Lançamentos de MVP (Minimum Viable Product).

E o melhor: Geramos novos valores aos usuários.

🔮 Roadmap de melhorias (sem bola de cristal)

Um app quando acaba, deixa tanta saudade quanto finalizar uma série marcante, tipo Breaking Bad. Mas diferente dessas séries, a continuação de novos capítulos é perene durante o ciclo de vida do app. Lá vai o pacotão:

• Realizar constantemente testes variados sobre novas funcionalidades do app, com foco em acessibilidade, usabilidade e melhorias;
• Propor funcionalidades que ampliem o ciclo de vida do aplicativo: inserção de resenhas de filmes e séries, recursos imersivos a partir de AR (Realidade Aumentada) e integração com API's e filtros (Instagram e Snapchat) para ampliar a experiência das ativações infantis da WB (Madame Caroço, Scooby, Gumball, Mulher-Maravilha, etc);
• Disponibilizar a vasta biblioteca de trailers de filmes e séries da WB, in-app, além de reunir materiais produzidos pelos próprios usuários em edições anteriores da CCXP (fotos, informações de público, atrações consagradas, vídeos, etc);
• Disponibilizar o quiz da CCXP19 embutido na próxima versão do app como um recurso perene de informações sobre a Warner;
• Associar outras frentes do cliente dentro do aplicativo: WB Tv, Cartoon Network, Warner Games e a DC Comics. A ideia é oferecer muito mais que um app com foco em uma task específica (como foi o agendamento de atrações em 2019). O novo objetivo é ampliar a gama de conteúdo da Warner Bros. em um app de entretenimento, com atualizações constantes.

🔗 O que rolou na web sobre o nosso filhote

Muito bacana o eco saudável que o app gerou na internet. A equipe do site TechTudo fez uma análise detalhista das principais funcionalidades do app, comentando as funcionalidades das principais telas. E claro, os amigos do Geek Publicitário soltaram a primeira matéria que farejamos:

• O que é CCXP 2019? Saiba tudo do app #WarnerNaCCXP
• Warner Bros anuncia atrações e agendamento por app para CCXP 19 - Geek Publicitário

🤟 Trabalho coletivo, sempre

Trabalhar em equipe sempre foi o DNA do meu processo de trabalho. Desde a época que trabalhei no Estadão, com design editorial, fazer tudo em grupo sempre gerou um resultado muito mais efetivo. Eu adoro embarcar em ideias diferentes, em opiniões e críticas que inspiram.

A equipe de UI/UX foi essencial e indispensável em todas as tomadas de decisão, nos alinhamentos de pesquisa com usuários, nos ajustes pixelperfect de todas as telas do app, na imensa ajuda do "Executivo de Contas multifuncional da agência", o Pedrão Gola Alta (todos temos apelidos, né?); nos apontamentos dos Planners (meu amigaço Phelipe foi o primeiro a fisgar a matéria do Geek Publicitário sobre o app) e claro: preciso agradecer especialmente o meu gato, Myers, que ficou acordadão por inúmeras noites me observando trabalhar ao lado de uma latinha de Monster Mango Loko! 😺

🥁 Ba dum tss…

Claro, um bom samaritano não pode deixar de comentar o poder existencial da música: eu preciso dela pra materializar minhas ideias subjetivas em caminhos objetivos. Nesse sentido, o Metallica foi o tema gestacional do app. Com certeza, Papa James fez os melhores acordes no meu cérebro pra estimular as minhas melhores sinapses. Fica a dica!

Metallica

Um mega obrigado a todos que chegaram até aqui! Nos vemos na CCXP 2020, com novas ideias e grandes desafios pelo caminho :)

👋