A organização de Marketing de Serviços e Dispositivos (DSM, na sigla em inglês) do Google supervisiona as estratégias de entrada no mercado de diversos produtos: smartphones, relógios, fones de ouvido, tablets, dispositivos de casa inteligente e assinaturas relevantes. Tudo isso está disponível na Google Store e em fornecedores internacionais terceirizados. As pessoas descobrem esses produtos on-line e em lojas físicas de varejo.
Um desafio constante dessa equipe é instruir os consumidores e varejistas sobre os casos de uso e os benefícios do ecossistema de hardware do Google e das experiências avançadas de IA. Para ajudar melhor o consumidor a compreender os produtos e as funcionalidades, a equipe do Debian criou um espaço virtual 3D com tecnologia web avançada para enfrentar muitos desses desafios. Neste estudo de caso, você pode saber como a equipe criou uma experiência mais imersiva para os clientes, lançando essas novas experiências quatro vezes mais rápido e pela metade do custo dos recursos digitais tradicionais.
O desafio: educação sobre o produto
Educar os vendedores e clientes novos nos produtos de hardware do Google sobre os benefícios de recursos como interoperabilidade e IA é caro e difícil. As estratégias tradicionais de educação sobre produtos dependem de conteúdo digital produzido com produtos físicos e hospedado em plataformas de aprendizado digital. Essas plataformas de aprendizado fornecem especificações técnicas do produto, imagens e vídeos, mas não acesso a produtos físicos ou conectados.
Conteúdos de aprendizado, como vídeos, são caros de produzir, complexos de localizar para mercados globais e quase impossível de reutilizar entre produtos. A criação dos recursos iniciais requer orçamentos para elenco, guarda-roupa, localização de locais, taxas de localização, taxas de estúdio, equipes de cinema e trabalho de pós-produção. Os custos e os resultados de produção também precisam considerar a localização. Modificar os recursos, locais, produtos, textos e talentos é ainda mais desafiador para o marketing tradicional gerenciar em escala. E quando você considera que a maioria dos produtos com suporte tem atualizações de recursos a cada dois meses, esses recursos já estão desatualizados no momento em que são concluídos.
Como descobrir maneiras melhores de compartilhar informações de produtos
Tentando encontrar uma maneira melhor de compartilhar informações do produto, a equipe do Debian testou experiências de RV/RA em um app. Os resultados foram promissores, com maior engajamento e aumento do tamanho dos carrinhos nos pontos de venda. No entanto, os downloads de apps eram uma barreira significativa para a entrada de vendedores e clientes, e limitar a experiência a um app significava que ele não era incorporável a outras propriedades próprias ou de terceiros, como store.google.com.
Soluções leves com a <model-viewer>
Tendo visto o sucesso dos modelos de produtos 3D para educação de produtos, a equipe decidiu levar essa abordagem para a Web. Uma forma de fazer isso é usar o
<model-viewer> para criar experiências 3D
com produtos individuais.
<model-viewer> é um componente da Web que permite adicionar de maneira declarativa um modelo 3D a uma página da Web, enquanto hospeda o modelo no seu próprio site.
Confira como isso funciona na página
Pixel Fold
da Google Store, em que o <model-viewer> permite que os usuários confiram o Pixel
Fold de qualquer ângulo com várias posições dobradas. Foi fácil integrar o
modelo 3D ao restante da UX em HTML, com botões para contar uma história usando
ângulos de câmera e variantes interativas de cores. Com o <model-viewer>, é possível
oferecer aos usuários qualquer tipo de experiência que você possa imaginar.
Como criar os modelos 3D
A primeira etapa para desenvolver uma experiência virtual 3D é criar os modelos de produtos em 3D. A equipe do NDK criou os modelos 3D em CAD. Ao trabalhar em estreita colaboração com os designers que produzem o CAD do produto, a equipe do Debian foi capaz de exportar renderizações de polígono baixas que podem ser otimizadas para a Web. Algumas das práticas recomendadas usadas para conseguir isso foram nas áreas a seguir.
- Geometria:
- Concentre-se em tornar a geometria (a forma e a escala) precisa de todos os ângulos.
- Evite usar mapas normais para bordas chanfradas.
- Crie decalques como geometria separada.
- Cores e materiais:
- Meta: representação visual consistente das propriedades físicas.
- Considere a dinâmica da iluminação em tempo real.
- Use conjuntos de texturas e materiais separados para cada tipo de malha (opaco, transparente e decalque).
- Iterar nos designs com os designers originais do CAD se forem necessários mais ajustes.
- Tamanho do arquivo:
- Exporte como um modelo de lowpoly no formato GLB para que o modelo possa ser usado por
<model-viewer>. - Compacte as malhas geométricas manualmente por um designer 3D, com um fornecedor ou usando um software de compactação, como o DRACO (SO).
- Exporte como um modelo de lowpoly no formato GLB para que o modelo possa ser usado por
Como esses modelos 3D seriam usados com frequência em smartphones, eles foram otimizados definindo um tamanho máximo de arquivo com texturas de 2 MB, para oferecer suporte a dispositivos de geração mais antigos e conexões de Internet fracas.
<model-viewer>
A equipe do NDK usa o componente da Web de código aberto <model-viewer> do Google para incorporar os modelos 3D recém-criados nas páginas da Web. Para que os modelos criados
na etapa 1 sejam compatíveis com <model-viewer>, os recursos precisam estar em um
formato gITF ou GLB (extensão .glb). Ambos os formatos são compactos, compactáveis e
carregam rapidamente na GPU. O componente <model-viewer> tem suporte em todos
os principais navegadores contínuos.
Durante essa etapa, o maior desafio que a equipe do Debian encontrou foi que a paleta de cores de hardware do Google não era renderizada de forma precisa. A equipe descobriu que o mapeamento de tons ACES (um padrão do setor de cinema) era responsável pelas cores perdidas. Para resolver isso, foi desenvolvido um novo mapeador de tom neutro do Khronos PBR especificamente para solucionar essas deficiências e apresentar cores precisamente na tela, evitando os destaques destacados e as mudanças de tonalidade associadas ao mapeamento de tons lineares.
<model-viewer src="Pixel8Pro_Bay_enUS.glb" ar ar-modes="scene-viewer webxr quick-look"
camera-controls poster="poster.webp"
shadow-intensity="1" tone-mapping="commerce"></model-viewer>
Para saber mais sobre o <model-viewer>, acesse
modelviewer.dev (link em inglês). Para testar seus modelos 3D e fazer o download
de um site inicial completo, consulte nosso editor.
Soluções pesadas com three.js
O <model-viewer> é uma maneira ótima e eficiente de mostrar e interagir com um modelo
3D. No entanto, às vezes a equipe do Debian precisava de uma experiência na Web mais imersiva e interconectada do que seria possível com o <model-viewer>. Um
exemplo foi o lançamento do Nest Mini + C. A <model-viewer> permite
que os clientes em potencial experimentem um produto em 3D na Web, mas não demonstra
como é útil quando combinado com outros produtos de hardware do Google e recursos de
IA, como o Assistente.
Para essa tarefa, a equipe recorreu à biblioteca relacionada ao <model-viewer>,
three.js. A Three.js é um mecanismo de jogo JavaScript de código aberto, e a equipe conseguiu
criar um framework de recursos reutilizáveis para um ambiente de casa virtual
contendo câmeras, luzes e alto-falantes internos do Nest. Isso deu à equipe uma
base para fornecer feedback em tempo real sobre como os dispositivos interagiram
entre si.
Dialogflow
A última parte da criação da experiência interconectada é adicionar o Google Assistente. Isso significava que os usuários poderiam testar comandos e rotinas autênticos com a experiência virtual interconectada. No entanto, inserir o Google Assistente na conta do usuário abriria várias questões de privacidade problemáticas de privacidade. Para criar uma solução que coloca a privacidade em primeiro lugar, o NDK trabalhou com o serviço do Google Cloud Dialogflow para imitar o Google Assistente nesse espaço. Veja no diagrama de alto nível a seguir como o app da Web usou a API Dialogflow (adaptada das Noções básicas do Dialogflow). Para cada conversa, o app da Web usou a classificação de intent do Dialogflow e a API retornava expressões de usuário final predeterminadas que correspondessem à intent.
Para saber mais sobre o Dialogflow, acesse a documentação do Google Cloud.
Resultado final: um iframe incorporável
O resultado final é uma biblioteca de recursos que pode ser incorporada a uma página da Web com <model-viewer> ou usada em um ambiente virtual completo para ajudar os clientes a saber mais sobre produtos individuais e como os produtos se interconectam. A experiência
é autêntica, escalonável e econômica. Essa primeira experiência virtual
foi lançada em maio de 2021 e, embora ela não esteja mais disponível no site da Google Store, você
ainda pode
testá-la.
Os resultados
Desde o lançamento do Nest Mini +C, o DFP pode reutilizar e expandir a estrutura nos últimos dois anos de lançamentos do portfólio de Pixels com sucesso crescente. Ao operacionalizar a iteração desses recursos e experiências em 3D, a equipe conseguiu quadruplicar o número de experiências interativas de educação sobre produtos e triplicar o número de produtos que se beneficiam dessa tecnologia da Web.
O resultado final é uma orientação autêntica sobre o produto para uma crescente permutação de casos de uso em escala, que é mais sustentável, coesa e interativa do que as estratégias anteriores. E, pensando no futuro, a equipe do Debian agora tem um robusto portfólio de componentes de uma experiência imersiva que podem ser adaptados rapidamente a alvos dinâmicos de negócios. Essas melhorias permitem que a equipe do DMS lance novos conteúdos educacionais sobre produtos quatro vezes mais rápido e por menos da metade do custo do que os processos anteriores e mais tradicionais.