Index
Product Design
2024
App
Projetando o App de um dos maiores eventos de digital commerce da américa latina
Projetando o App de um dos maiores eventos de digital commerce da américa latina
Overview
Overview
Ano: 2024
Ano: 2024
Duração: 4 meses
Duração: 4 meses
Minha atuação:
Minha atuação:
Trabalhei de ponta a ponta no projeto. Fiz os benchmarkings, auditoria no app base da WA, design dos wireframes e protótipos, fiz as facilitações e os alinhamentos com o time da WA, Fmalta e VTEX.
Trabalhei de ponta a ponta no projeto. Fiz os benchmarkings, auditoria no app base da WA, design dos wireframes e protótipos, fiz as facilitações e os alinhamentos com o time da WA, Fmalta e VTEX.
Resultados:
Resultados:
Conseguimos reaproveitar boa parte do app base, aplicar com sucesso o Brandguide da VTEX e entregar valor para o cliente com um app mais moderno e mais adequado ao porte do evento.
Conseguimos reaproveitar boa parte do app base, aplicar com sucesso o Brandguide da VTEX e entregar valor para o cliente com um app mais moderno e mais adequado ao porte do evento.
Contexto
Contexto
O VTEX DAY é um dos maiores eventos de comércio digital do mundo, é também um encontro dinâmico dos principais players de tecnologia, líderes do setor e marcas inovadoras.
O VTEX DAY é um dos maiores eventos de comércio digital do mundo, é também um encontro dinâmico dos principais players de tecnologia, líderes do setor e marcas inovadoras.
O evento contou com o apoio de centenas de patrocinadores, e recebe figuras importantes como a ganhadora do prêmio Nobel Malala Yousafzai, Neil Patel, Uri Levine, Zack Kass , hane Parrish, Barack Obama, Lewis Hamilton entre outros.
O evento contou com o apoio de centenas de patrocinadores, e recebe figuras importantes como a ganhadora do prêmio Nobel Malala Yousafzai, Neil Patel, Uri Levine, Zack Kass , hane Parrish, Barack Obama, Lewis Hamilton entre outros.
Alguns números de 2024:
Alguns números de 2024:
O evento recebeu 20K pessoas por dia ( 40k usuários totais num app), 230 patrocinadores 260 palestrantes e 120 horas de conteúdo.
O evento recebeu 20K pessoas por dia ( 40k usuários totais num app), 230 patrocinadores 260 palestrantes e 120 horas de conteúdo.
Principais desafios
Principais desafios
A WA já possuía um app para eventos, feito para um cliente anterior ( a ABRINT), e ficou decidido que utilizaríamos a estrutura do backoffice desse app.
A WA já possuía um app para eventos, feito para um cliente anterior ( a ABRINT), e ficou decidido que utilizaríamos a estrutura do backoffice desse app.
Ou seja, nós utilizaríamos uma biblioteca de componentes já existente de outro produto, e trabalharíamos para aplicar a identidade visual de VTEX Day. Criaríamos novos componentes apenas se o contexto de VTEX Day demandasse.
Ou seja, nós utilizaríamos uma biblioteca de componentes já existente de outro produto, e trabalharíamos para aplicar a identidade visual de VTEX Day. Criaríamos novos componentes apenas se o contexto de VTEX Day demandasse.
Time
Time
Objetivos
O que queremos com esse projeto
Objetivos
O que queremos com esse projeto
stakeholder
stakeholder
FMALTA + VTEX
FMALTA + VTEX
A VTEX tinha como objetivo central do evento a figura do palestrante, muito porque costumam trazer pessoas conhecidas mundialmente.
A VTEX tinha como objetivo central do evento a figura do palestrante, muito porque costumam trazer pessoas conhecidas mundialmente.
Ao mesmo tempo, e principalmente, para a F/malta era um objetivo estratégico obter receitas de patrocinadores. E ambos tinham interesse em medir a performance do produto.
Ao mesmo tempo, e principalmente, para a F/malta era um objetivo estratégico obter receitas de patrocinadores. E ambos tinham interesse em medir a performance do produto.
Obter receita dos patrocinadores
Obter receita dos patrocinadores
Dar destaque para a figura do Palestrante
Dar destaque para a figura do Palestrante
Medir a performance do evento
Medir a performance do evento
stakeholder
stakeholder
WA
WA
A WA já havia feito um produto de eventos que foi usado para um outro cliente, esse projeto era a oportunidade de criar melhorias na estrutura e na interface do produto e manter na nossa prateleira para outros clientes.
A WA já havia feito um produto de eventos que foi usado para um outro cliente, esse projeto era a oportunidade de criar melhorias na estrutura e na interface do produto e manter na nossa prateleira para outros clientes.
Facelift no modelo usado em apps de Eventos
Facelift no modelo usado em apps de Eventos
stakeholder
stakeholder
Usuário
Usuário
Para o usuário, era importante ver quem eram os palestrantes que mais interessavam e assistir as palestras desse palestrante. Descobrimos também com os feedbacks de outros apps durante a fase de benchmark que era necessário melhorar a encontrabilidade das informações do produto.
Para o usuário, era importante ver quem eram os palestrantes que mais interessavam e assistir as palestras desse palestrante. Descobrimos também com os feedbacks de outros apps durante a fase de benchmark que era necessário melhorar a encontrabilidade das informações do produto.
stakeholder
stakeholder
Patrocinador
Patrocinador
O patrocinador só tinha um objetivo: fazer publicidade.
O patrocinador só tinha um objetivo: fazer publicidade.
Usuário
Usuário
Ver quem são os palestrantes que mais interessa
Ver quem são os palestrantes que mais interessa
Escolher a palestra que mais interessa e assistir a palestra
Escolher a palestra que mais interessa e assistir a palestra
Econtrar a localização do evento e dos stands de forma fácil.
Econtrar a localização do evento e dos stands de forma fácil.
Patrocinador
Patrocinador
Fazer publicidade no app
Fazer publicidade no app
Objetivos estratégicos do produto
Objetivos estratégicos do produto
Dar sugestões de palestrantes e palestras com base no interesse o usuário
Dar sugestões de palestrantes e palestras com base no interesse o usuário
Montar de forma automática e facilitada a agenda do usuário caso ele queira
Montar de forma automática e facilitada a agenda do usuário caso ele queira
Permitir que o usuário interaja com outros usuários e palestrantes
Permitir que o usuário interaja com outros usuários e palestrantes
Objetivos de usabilidade
Objetivos de usabilidade
Ter um caminho de navegação sempre evidente e fácil, mesmo que redundante
Ter um caminho de navegação sempre evidente e fácil, mesmo que redundante
Permitir que o usuário acesse fácilmente a programação e possa adicionar palestras na sua agenda pessoal.
Permitir que o usuário acesse fácilmente a programação e possa adicionar palestras na sua agenda pessoal.
Benchmark
Entendendo como funciona os produtos desse tipo
Benchmark
Entendendo como funciona os produtos desse tipo
Como era meu primeiro app de eventos, fiz um benchmark para entender como esses produtos eram construídos.
O time da F/malta já tinha listado 2 apps para usar como bench, e a WA já tinha um produto da na prateleira como vimos anteriormente.
Como era meu primeiro app de eventos, fiz um benchmark para entender como esses produtos eram construídos.
O time da F/malta já tinha listado 2 apps para usar como bench, e a WA já tinha um produto da na prateleira como vimos anteriormente.
O que eu queria responder com o Benchmark?
O que eu queria responder com o Benchmark?
Features
Features
Comparei as features de cada produto afim de entender o que era obrigatório e o que era opcional para um app desse tipo.
Comparei as features de cada produto afim de entender o que era obrigatório e o que era opcional para um app desse tipo.
Fluxos
Fluxos
Comparei os fluxos dos apps nas principais jornadas que identificamos:
Cadastros;
Encontrar uma palestra;
Encontrar um palestrante;
Gerir a agenda pessoal;
Comparei os fluxos dos apps nas principais jornadas que identificamos:
Cadastros;
Encontrar uma palestra;
Encontrar um palestrante;
Gerir a agenda pessoal;
7
Apps mapeados
Apps mapeados
44
Features encontradas
Features encontradas
Achados mais relevantes:
Achados mais relevantes:
Em alguns apps os filtros de busca eram robustos, porém:
Em alguns apps os filtros de busca eram robustos, porém:
Aglutinaram muito as informações que ocupavam um espaço desnecessário na UI, que aumentava significativamente o tempo de execução de uma tarefa de busca.
Aglutinaram muito as informações que ocupavam um espaço desnecessário na UI, que aumentava significativamente o tempo de execução de uma tarefa de busca.
Os principais players usam motores de recomendação:
Os principais players usam motores de recomendação:
Identificamos que o motor de recomendação pode ser uma feature que equilibra o uso de filtros e aumenta o engajamento se pudermos extrair as informações de interesse ainda no onboarding (nenhum player faz essa coleta no onboarding, então nossa hipótese mais forte era que as recomendações eram arbitrárias e configuradas no backoffice).
Identificamos que o motor de recomendação pode ser uma feature que equilibra o uso de filtros e aumenta o engajamento se pudermos extrair as informações de interesse ainda no onboarding (nenhum player faz essa coleta no onboarding, então nossa hipótese mais forte era que as recomendações eram arbitrárias e configuradas no backoffice).
Abordagem
Definindo a estratégia de design
Abordagem
Definindo a estratégia de design
O Benchmark deixou mais evidente o tipo de produto que queríamos construir. Escolhi OOUX como abordagem principal para construir a arquitetura de informação e interação do app.
A única mudança em relação ao escopo tradicional, é que pulei a etapa de análise linguística para o discovery de objetos, o benchmark já havia mostrado quais os principais objetos que um produto desse tipo possui.
O Benchmark deixou mais evidente o tipo de produto que queríamos construir. Escolhi OOUX como abordagem principal para construir a arquitetura de informação e interação do app.
A única mudança em relação ao escopo tradicional, é que pulei a etapa de análise linguística para o discovery de objetos, o benchmark já havia mostrado quais os principais objetos que um produto desse tipo possui.
OOUX
Experiência de usuário orientada a objetos
OOUX
Experiência de usuário orientada a objetos
A fase mais rápida foi a parte de discovery e de requerimentos, e a parte mais demorada do projeto foi a fase 4, o protótipo passou por revisão várias vezes por vários stakeholders, e tivemos de fazer mudanças na estrutura algumas vezes dependendo do stakeholder que avaliava ( F/malta e VTEX )
A fase mais rápida foi a parte de discovery e de requerimentos, e a parte mais demorada do projeto foi a fase 4, o protótipo passou por revisão várias vezes por vários stakeholders, e tivemos de fazer mudanças na estrutura algumas vezes dependendo do stakeholder que avaliava ( F/malta e VTEX )
ORCA Sprint
ORCA Sprint
O
Objects
Objects
R
Relationship
Relationship
C
CTA
CTA
A
Attribute
Attribute
Fase 1
Fase 1
Discovery
Discovery
Fase 2
Fase 2
Requirements
Requirements
Fase 3
Fase 3
Prioritization
Prioritization
Fase 4
Fase 4
Sketch - Concept - Prototype - Test
Sketch - Concept - Prototype - Test
Object-Structure
Construindo a arquitetura de informação
Object-Structure
Construindo a arquitetura de informação
Object Relationship Matrix
Object Relationship Matrix
Product Object Structure
Product Object Structure
Wireframes
Testando as composições
Wireframes
Testando as composições
Os wireframes foram relativamente fáceis, como já iríamos aproveitar o design de outro produto da WA, meu foco era testar se era necessário criar novos componentes ou refatorar componentes já existentes.
Os wireframes foram relativamente fáceis, como já iríamos aproveitar o design de outro produto da WA, meu foco era testar se era necessário criar novos componentes ou refatorar componentes já existentes.
Quanto ao conteúdo, utilizei o conteúdo do evento de 2024, isso me fez entender os limites de caracteres dos textos ao longo da interface. Antecipando possíveis problemas de Writing que poderiam aparecer durante a implementação do projeto.
Quanto ao conteúdo, utilizei o conteúdo do evento de 2024, isso me fez entender os limites de caracteres dos textos ao longo da interface. Antecipando possíveis problemas de Writing que poderiam aparecer durante a implementação do projeto.
Brandguides vtex
Aplicando os brandguides do cliente
Brandguides vtex
Aplicando os brandguides do cliente
Todos os padrões de cores da VTEX Day já haviam sido definidos em um projeto de marca anterior.
Todos os padrões de cores da VTEX Day já haviam sido definidos em um projeto de marca anterior.
Entretanto, para suprir algumas necessidades específicas de cor e tipografia, nos apoiamos no brandguide da VTEX ( vtex day e vtex são marcas diferentes, mas se complementavam)
Entretanto, para suprir algumas necessidades específicas de cor e tipografia, nos apoiamos no brandguide da VTEX ( vtex day e vtex são marcas diferentes, mas se complementavam)
Tipografia
Tipografia
VTEX trust
VTEX trust
Prototypes
Prototypes
Onboarding
Onboarding
Home
Home
Palestrantes
Palestrantes
Agenda
Agenda
Hall
Hall
Métricas
Entendendo o que precisamos medir
Métricas
Entendendo o que precisamos medir
patrocinador
patrocinador
métrica
métrica
Como um patrocinador pode saber se sua publicidade no app está gerando engajamento?
Como um patrocinador pode saber se sua publicidade no app está gerando engajamento?
KPI
Click em banner de anúncio (qual banner clicou e quem clicou)
Click em banner de anúncio (qual banner clicou e quem clicou)
VTEX + Fmalta
VTEX + Fmalta
métrica
métrica
Como podemos usar o produto para medir a performance do evento?
Como podemos usar o produto para medir a performance do evento?
KPI
KPI
Volume de cadastros no app
Volume de cadastros no app
Resultado das pesquisas vinculados a usuários
Resultado das pesquisas vinculados a usuários
Palestras mais adicionadas na agenda do usuário.
Palestras mais adicionadas na agenda do usuário.
Palestrantes mais visualizados
Palestrantes mais visualizados
Volume de acessos de cada palco.
Volume de acessos de cada palco.
F/malta + WA
F/malta + WA
metrica
metrica
Como podemos saber se o app está convertendo usuários que ainda não compraram o ingresso?
Como podemos saber se o app está convertendo usuários que ainda não compraram o ingresso?
metrica
metrica
Cliques no card "compre seu ingresso"
Cliques no card "compre seu ingresso"
Muito obrigado!
Por dispor seu tempo para ler meus trabalhos.
Se você gostou do meu trabalho, se você quer conhecer mais do meu trabalho. Entre em contato comigo e vamos conversar!
Muito obrigado!
Por dispor seu tempo para ler meus trabalhos.
Se você gostou do meu trabalho, se você quer conhecer mais do meu trabalho. Entre em contato comigo e vamos conversar!
Sorry for the view…
My portfolio is currently being updated to ensure proper responsiveness on mobile screens. For now, it is only accessible on desktop screens.