A organização de marketing de dispositivos e serviços (DSM, na sigla em inglês) do Google supervisiona as estratégias de lançamento de uma ampla gama de produtos: smartphones, relógios, fones de ouvido, tablets, dispositivos de casa inteligente e assinaturas relevantes, todos disponíveis na Google Store e em fornecedores terceirizados globais. As pessoas descobrem esses produtos on-line e em lojas físicas.
Um desafio constante para essa equipe é educar 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 os consumidores a entender melhor os produtos e a funcionalidade, a equipe de DSM criou um espaço virtual 3D com tecnologia avançada da Web para resolver muitos desses desafios. Neste estudo de caso, você vai aprender 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
Instruir vendedores e clientes que não conhecem os 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 o produto 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, imagens e vídeos do produto, mas não acesso a produtos físicos ou conectados.
Conteúdos de aprendizagem, como vídeos, são caros de produzir, complexos de localizar para mercados globais e quase impossíveis de reutilizar entre produtos. A criação dos recursos iniciais requer orçamentos para elenco, figurino, pesquisa de locações, taxas de locações, taxas de estúdio, equipes de filmagem e trabalho de pós-produção. Os custos e os resultados da produção também precisam considerar a localização. Modificar os recursos, locais, produtos, textos e talentos é especialmente difícil para o marketing tradicional gerenciar em grande escala. E quando você considera que a maioria dos produtos com suporte tem lançamentos de recursos a cada dois meses, esses recursos já estão desatualizados quando são concluídos.
Como encontrar maneiras melhores de compartilhar informações do produto
Para encontrar uma maneira melhor de compartilhar informações sobre produtos, a equipe de DSM testou experiências de RV/RA em um app. Os resultados foram promissores, com aumento no engajamento e no tamanho do carrinho nos pontos de venda. No entanto, os downloads de apps eram uma barreira significativa para os associados de vendas e os clientes, e limitar a experiência a um app significava que ele não podia ser incorporado a outras propriedades próprias ou de terceiros, como store.google.com.
Soluções leves com <model-viewer>
Após o sucesso dos modelos 3D para educação sobre produtos, a equipe
decidiu trazer essa abordagem para a Web. Uma maneira de fazer isso é usar
<model-viewer>
para criar experiências 3D
com produtos individuais.
<model-viewer>
é um componente da Web,
que permite adicionar um modelo 3D de forma declarativa a uma página da Web, hospedando o
modelo no seu próprio site.
Você pode conferir isso em ação na página
Pixel Fold
da Google Store, em que o <model-viewer>
permite que os usuários vejam o Pixel
Fold de qualquer ângulo com várias posições dobradas. Foi fácil integrar o
modelo 3D ao resto da UX do HTML, com botões para contar uma história usando
ângulos de câmera e variantes de cores interativas. Com <model-viewer>
, você pode
oferecer aos usuários qualquer tipo de experiência que imaginar.
Como criar modelos 3D
A primeira etapa para desenvolver uma experiência virtual 3D é criar os modelos de produtos 3D. A equipe de DSM criou os modelos 3D em CAD. Trabalhando em estreita colaboração com os designers que produziam o CAD do produto, a equipe de DSM conseguiu exportar renderizações de baixa poligonalidade que podiam ser otimizadas para a Web. Algumas das práticas recomendadas usadas para alcançar isso foram nas seguintes áreas.
- Geometria:
- Concentre-se em tornar a geometria (a forma e a escala) precisa de todos os ângulos.
- Evite usar mapas normais para chanfrar bordas.
- Crie decalques como geometria separada.
- Cores e materiais:
- Objetivo: representação visual consistente das propriedades físicas.
- Considere a dinâmica de iluminação em tempo real.
- Use conjuntos de texturas e materiais separados para cada tipo de malha (opaco, transparente, decalque).
- Itere os designs com os designers de CAD originais, se mais ajustes forem necessários.
- Tamanho do arquivo:
- Exporte como um modelo de baixa poligonalização no formato GLB para que ele possa ser usado
por
<model-viewer>
. - Compactar as malhas geométricas manualmente por um designer 3D, com um fornecedor ou por um software de compactação, como o DRACO (SO).
- Exporte como um modelo de baixa poligonalização no formato GLB para que ele 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ções mais antigas e conexões de Internet fracas.
<model-viewer>
A equipe de DSM usa o componente da Web de código aberto <model-viewer>
do Google para incorporar
os modelos 3D recém-criados às 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 glTF ou GLB (extensão .glb). Ambos os formatos são compactos, comprimíveis e
carregam rapidamente na GPU. O componente <model-viewer>
tem suporte de todos
os principais navegadores evergreen.
Durante essa etapa, o maior desafio que a equipe do DSM encontrou foi que a paleta de cores do hardware do Google não renderizava com precisão. A equipe acabou descobrindo que o mapeamento de tons ACES (um padrão da indústria cinematográfica) era responsável pela perda de cores. Para resolver isso, eles desenvolveram um novo mapeador de tons neutros Khronos PBR especificamente para resolver essas deficiências e apresentar cores com precisão na tela, evitando os destaques exagerados e as mudanças de matiz associadas ao mapeamento de tons linear.
<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 <model-viewer>
, acesse
modelviewer.dev. Para testar seus modelos 3D e fazer o download
de um site inicial completo, use nosso editor.
Soluções pesadas com three.js
<model-viewer>
é uma ótima maneira de mostrar e interagir com um modelo 3D
com alto desempenho. No entanto, às vezes, a equipe de DSM precisava de uma experiência da Web mais imersiva e
interconectada do que é possível com <model-viewer>
. Um
exemplo foi o lançamento do Nest Mini + C. O <model-viewer>
podia permitir que
clientes em potencial testassem um produto em 3D na Web, mas não conseguia mostrar
sua utilidade quando combinado com outros produtos do Google Hardware e recursos de IA,
como o Assistente.
Para essa tarefa, a equipe recorreu à biblioteca que sustenta o <model-viewer>
,
three.js. O 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
com câmeras, luzes e alto-falantes Nest internos. Isso deu à equipe uma
base para fornecer feedback em tempo real sobre como os dispositivos interagiam
entre si.
Dialogflow
A última etapa para criar a experiência interconectada é adicionar o Google Assistente. Isso significa que os usuários podem testar comandos e rotinas autênticos com a experiência virtual interconectada. No entanto, inserir o Google Assistente na conta atual do usuário abriria várias questões de privacidade problemáticas. Para criar uma solução com foco na privacidade, o DSM trabalhou com o serviço Google Cloud Dialogflow para imitar o Google Assistente nesse espaço. O diagrama de alto nível a seguir mostra como o app da Web usou a API do Dialogflow (adaptado do Basics do Dialogflow). Em cada turno de conversa, o app da Web usava a classificação de intent do Dialogflow, e a API retornava expressões de usuário final predeterminadas que correspondiam à 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 eles 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 não esteja mais disponível no site da Google Store,
ainda é possível
testá-la.
Os resultados
Desde o lançamento do Nest Mini +C, o DSM conseguiu reutilizar e expandir o framework nos últimos dois anos de lançamentos do portfólio do Pixel 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 explicação autêntica e com marca do produto para uma variação crescente de casos de uso em escala que é mais sustentável, coesa e interativa do que as estratégias anteriores. E, no futuro, a equipe de DSM agora tem um portfólio robusto de componentes de uma experiência imersiva que pode ser adaptada rapidamente a metas de negócios dinâmicas. Essas melhorias permitem que a equipe de DSM lance conteúdo de treinamento de novos produtos quatro vezes mais rápido e com menos da metade do custo dos processos anteriores, mais tradicionais.