Das Geräte- und Dienstleistungsmarketing (DSM) von Google beaufsichtigt die Markteinführungsstrategien für eine breite Palette von Produkten: Smartphones, Smartwatches, Kopfhörer, Tablets, Smart-Home-Geräte und relevante Abos. Diese sind sowohl im Google Store als auch bei globalen Drittanbietern erhältlich. Nutzer informieren sich online und in Ladengeschäften über diese Produkte.
Eine ständige Herausforderung für dieses Team besteht darin, Kunden und Einzelhändler über die Anwendungsfälle und Vorteile des Google-Hardwaresystems und der fortschrittlichen KI-Funktionen zu informieren. Um Verbrauchern ein besseres Verständnis der Produkte und Funktionen zu ermöglichen, erstellte dasDSM-Team einen virtuellen 3D-Raum mit fortschrittlicher Webtechnologie, um viele dieser Herausforderungen zu bewältigen. In dieser Fallstudie erfahren Sie, wie das Team ein immersiveres Erlebnis für Kunden geschaffen hat, indem diese neuen Umgebungen viermal schneller und zu halben Kosten im Vergleich zu herkömmlichen digitalen Assets eingeführt wurden.
Die Herausforderung: Produktschulungen
Vertriebsmitarbeiter und Kunden, die noch nicht mit Google-Hardwareprodukten vertraut sind, über die Vorteile von Funktionen wie Interoperabilität und KI zu informieren, ist kostspielig und schwierig. Traditionelle Produktbildungsstrategien basieren auf digitalen Inhalten, die aus physischen Produkten erstellt und dann auf digitalen Lernplattformen gehostet werden. Diese Lernplattformen bieten technische Spezifikationen, Bilder und Videos des Produkts, aber keinen Zugriff auf physische oder verbundene Produkte.
Lerninhalte wie Videos sind teuer in der Produktion und deren Lokalisierung für globale Märkte komplex. Außerdem lassen sie sich kaum in anderen Produkten wiederverwenden. Für die Erstellung der ersten Assets sind Budgets für Casting, Garderobe, Standort-Scouting, Standortgebühren, Studiogebühren, Filmteams und Postproduktionsarbeiten erforderlich. Die Produktionskosten und die Liefergegenstände müssen auch die Lokalisierung berücksichtigen. Das Ändern von Assets, Standorten, Produkten, Texten und Fachkräften ist beim traditionellen Marketing im großen Maßstab besonders schwierig. Wenn man bedenkt, dass für die meisten der unterstützten Produkte alle paar Monate Feature Drops eingeführt werden, sind diese Assets am Ende der Version bereits veraltet.
Wir suchen nach besseren Möglichkeiten, Produktinformationen zu teilen.
Auf der Suche nach einem besseren Verfahren für den Austausch von Produktinformationen experimentierte das DOM-Team mit VR-/AR-Erlebnissen in einer App. Die Ergebnisse waren vielversprechend, sowohl in Bezug auf eine stärkere Interaktion als auch eine größere Warenkorbgröße an den Kassen. App-Downloads stellten jedoch sowohl für Vertriebsmitarbeiter als auch für Kunden ein erhebliches Hindernis dar, die App zu nutzen. Die Beschränkung der App bedeutete, dass sie nicht in andere Erst- oder Drittanbieter-Properties wie store.google.com eingebettet werden konnte.
Einfache Lösungen mit <model-viewer>
Nach dem Erfolg von 3D-Produktmodellen für die Produktschulung beschloss das Team, diesen Ansatz auch im Web umzusetzen. Eine Möglichkeit dafür ist die Verwendung von <model-viewer>, um 3D-Erlebnisse mit einzelnen Produkten zu erstellen.
<model-viewer> ist eine Webkomponente, mit der Sie einer Webseite ein 3D‐Modell deklarativ hinzufügen können, während das Modell auf Ihrer eigenen Website gehostet wird.
Sie können dies auf der Seite Pixel Fold im Google Store sehen. Dort können Nutzer Pixel Fold mithilfe von <model-viewer> aus jedem beliebigen Winkel und in verschiedenen zugeklappten Positionen sehen. Das 3D-Modell ließ sich leicht in den Rest der HTML-UX integrieren. Es bot Schaltflächen, um durch Kamerawinkel und interaktive Farbvarianten eine Geschichte zu erzählen. Mit <model-viewer> können Sie Ihren Nutzern beliebige Erlebnisse bieten, die Sie sich wünschen.
3D-Modelle erstellen
Der erste Schritt zur Entwicklung eines virtuellen 3D-Erlebnisses besteht darin, 3D-Produktmodelle zu erstellen. Das DOM-Team erstellte seine 3D-Modelle in CAD. Durch die enge Zusammenarbeit mit den Designschaffenden, die Produkt-CAD erstellen, konnte das DBM-Team Low-Poly-Renderings exportieren, die für das Web optimiert werden konnten. Dabei kamen einige der Best Practices auf die folgenden Bereiche.
- Geometrie:
- Konzentrieren Sie sich darauf, die Geometrie (Form und Größe) aus jedem Blickwinkel genau zu gestalten.
- Vermeiden Sie die Verwendung normaler Karten für abgeschrägte Kanten.
- Erstellen Sie Aufkleber als separate Geometrie.
- Farben und Materialien:
- Ziel: einheitliche visuelle Darstellung physikalischer Eigenschaften.
- Berücksichtigen Sie die Lichtdynamik in Echtzeit.
- Verwenden Sie separate Textursätze und Materialien für jeden Mesh-Typ (Undurchsichtig, Transparent, Aufkleber).
- Wenn weitere Anpassungen erforderlich sind, überarbeiten Sie die Designs mit den ursprünglichen CAD-Designschaffenden.
- Dateigröße:
- Exportieren Sie als Low-Poly-Modell im GLB-Format, damit das Modell von
<model-viewer>verwendet werden kann. - Komprimieren Sie die geometrischen Mesh-Netzwerke manuell durch einen 3D-Designer, einen Anbieter oder mithilfe von Komprimierungssoftware wie DRACO (OS).
- Exportieren Sie als Low-Poly-Modell im GLB-Format, damit das Modell von
Da diese 3D-Modelle häufig auf Smartphones verwendet werden, wurden sie durch Festlegen einer maximalen Dateigröße mit Texturen von 2 MB optimiert, um Geräte der älteren Generation und schwache Internetverbindung zu unterstützen.
<model-viewer>
Das DSM-Team verwendet die Open-Source-Webkomponente <model-viewer> von Google, um die neu erstellten 3D-Modelle in seine Webseiten einzubetten. Damit die in Schritt 1 erstellten Modelle mit <model-viewer> kompatibel sind, müssen die Assets in einem gITF- oder GLB-Format (Erweiterung „.glb“) vorliegen. Beide Formate sind kompakt, komprimierbar und werden schnell in die GPU geladen. Die <model-viewer>-Komponente wird von allen großen Evergreen-Browsern unterstützt.
Bei diesem Schritt bestand die größte Herausforderung für das DOM-Team darin, dass die Google-Hardware-Farbpalette nicht korrekt gerendert wurde. Das Team fand schließlich heraus, dass das Tone Mapping (ACES) (ein Standard der Filmindustrie) für die verlorenen Farben verantwortlich war. Um dieses Problem zu lösen, wurde ein neuer Khronos PBR Neutral Tone Mapper entwickelt, um diese Mängel zu beheben und Farben genau auf den Bildschirm abzustimmen. Gleichzeitig wurden die ausgeblasenen Spitzlichter und Farbtonverschiebungen vermieden, die mit dem linearen Tone Mapping verbunden sind.
<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>
Weitere Informationen zu <model-viewer> findest du unter modelviewer.dev. Mit unserem Editor kannst du deine 3D-Modelle testen und eine vollständige Website für den Einstieg herunterladen.
Umfangreiche Lösungen mit third.js
<model-viewer> ist eine hervorragende, leistungsstarke Möglichkeit, ein 3D-Modell anzuzeigen und mit ihm zu interagieren. Manchmal brauchte das DBM-Team jedoch eine immersivere und vernetztere Weberfahrung, als dies mit <model-viewer> möglich ist. Ein Beispiel war die Markteinführung von Nest Mini + C. Mit <model-viewer> könnten potenzielle Kunden ein Produkt im Web in 3D erleben. In Kombination mit anderen Google-Hardwareprodukten und KI-Funktionen wie dem Assistenten könnte dieses Produkt jedoch nicht besonders nützlich sein.
Für diese Aufgabe verwendete das Team die Bibliothek, die <model-viewer>,three.js basiert. Three.js ist eine Open-Source-JavaScript-Spiele-Engine und das Team war in der Lage, ein Framework aus wiederverwendbaren Assets für eine virtuelle Heimumgebung mit Nest-Innenkameras, -Lampen und -Lautsprechern zu erstellen. So konnte das Team in Echtzeit Feedback dazu geben, wie die Geräte miteinander interagierten.
Dialogflow
Der letzte Teil der nahtlosen Interaktion besteht darin, Google Assistant hinzuzufügen. So konnten Nutzer authentische Befehle und Routinen in einer miteinander verbundenen virtuellen Umgebung ausprobieren. Das Einfügen von Google Assistant aus dem vorhandenen Konto des Nutzers würde jedoch eine Reihe problematischer Bedenken hinsichtlich des Datenschutzes ergeben. Für die Erstellung einer datenschutzorientierten Lösung arbeitete dasDSM zusammen mit dem Google Cloud Dialogflow-Dienst zusammen, um den Google Assistant in diesem Bereich zu imitieren. Das folgende Diagramm zeigt, wie die Web-App die API von Dialogflow verwendet hat (basierend auf den Grundlagen von Dialogflow). Für jede Unterhaltungsrunde hat die Web-App die Intent-Klassifizierung von Dialogflow verwendet und die API hat vordefinierte Endnutzerausdrücke zurückgegeben, die dem Intent entsprechen.
Weitere Informationen zu Dialogflow finden Sie in der Google Cloud-Dokumentation.
Endergebnis: ein einbettbarer iFrame
Das Endergebnis ist eine Bibliothek von Assets, die mit <model-viewer> in eine Webseite eingebettet oder in einer vollständig virtuellen Umgebung verwendet werden können. So können Kunden mehr über einzelne Produkte und die Verbindung der Produkte erfahren. Das Programm ist authentisch, skalierbar und kostengünstig. Das erste virtuelle Erlebnis wurde im Mai 2021 eingeführt. Es ist zwar nicht mehr auf der Google Store-Website verfügbar, du kannst es aber immer noch testen.
Die Ergebnisse
Seit der Markteinführung von Nest Mini + C konnte das Framework für die Markteinführungen des Pixel-Portfolios der letzten zwei Jahre wiederverwendet und erweitert werden. Mit zunehmendem Erfolg. Durch die Operationalisierung der Iterationen dieser 3D-Assets und -Erlebnisse hat das Team bisher die Anzahl der interaktiven Produktschulungen vervierfacht und die Anzahl der Produkte, die von dieser Webtechnologie profitieren, verdreifacht.
Das Endergebnis ist eine authentische Produktschulung für eine wachsende Vielfalt von Anwendungsfällen, die nachhaltiger, zusammenhängender und interaktiver ist als frühere Strategien. Für die Zukunft verfügt dasDSM-Team nun über ein solides Portfolio an Komponenten, die eine umfassende Umgebung bieten, die sich schnell an dynamische Geschäftsziele anpassen lässt. Dank dieser Verbesserungen kann dasDSM-Team neue Produktschulungsinhalte viermal schneller und zu weniger als der Hälfte der Kosten veröffentlichen als die früheren, traditionelleren Prozesse.