APPLICATION GUIDE CONSTRUCTION

SHELL PANOLIN

Die umweltverträglichen Schmierstoffe von Shell bieten eine breite Palette von Einsatzmöglichkeiten für verschiedenste Anwendungen. Um diese Vielseitigkeit zu verdeutlichen, haben wir den “3D Application Guide” entwickelt. In diesem Guide werden die Vorteile und Anwendungsbereiche der Shell Panolin Schmierstoffe anschaulich anhand von drei Baumaschinen dargestellt. Darüber hinaus bietet der Guide eine kompakte Übersicht über alle wichtigen Details zu den jeweiligen Produkten. Wir legen großen Wert auf Barrierefreiheit, sodass alle Informationen leicht zugänglich sind.

Projekt live testen

KUNDENFAZIT

„Zusammen mit TINYTREE haben wir eine einfache und moderne Lösung entwickelt, um unseren Kunden zu zeigen in welchen Applikationen ihrer Maschinen, unsere Schmierstoffe eingesetzt werden können. Wir sind stolz auf unsere interaktiven 3D-Application Guides, welche wir nicht nur bei Messen sondern auch im direkten Kundengespräch verwenden.“

Sascha Martin (Global Marketing Manager Biodegradables, Shell)

SCREENSHOTS

WORKFLOW

ANALYSE

Wie kann man die variablen Einsatzmöglichkeiten der umweltverträglichen Schmierstoffe der Shell Panolin Produktreihe dem Kunden auf schnelle Weise zugänglich machen? Zu Beginn des Projekts bestand eine Infografik, welche dies veranschaulichte. Diese war sehr statisch und konnte nicht mit weiterführenden Informationen unterstützt werden. Hier gibt es zwei Grundideen die zu einer immens gesteigerten User Experience führen. Die Bereitstellung einer Webanwendung um alle Informationen bereitzustellen, sowie die Unterstützung durch die 3D Webkomponente. Dadurch wird „spielerisch“ über alle Produkte aufgeklärt.

PLANUNG

Die Planungsphase wurde in enger Kooperation mit Shell realisiert. Dabei wurde festgelegt, wann welche Meilensteine stehen sollten. Ein wichtiges Thema war die Bereitstellung eines CMS Systems in dem die Produktdaten erstellt und gepflegt werden können. Parallel wurde ein stimmiges Layout, auf Basis der Designrichtlinien von Shell ausgearbeitet, sowie passende 3D Modelle recherchiert. Dies alles führte zu einem Gesamtkonzept, welches am Ende der Planungsphase vor der Belegschaft von Shell präsentiert und für gut befunden wurde. Darauf folgte ein Pflichtenheft für alle Beteiligte, um Deadlines sicherstellen zu können.

UMSETZUNG

Grundlage aller Informationen für den Application Guide bildet eine JSON Datei, aus dem bereitgestellten CMS. Diese Daten werden im Guide in 2D und 3D Ebenen ausgespielt. Für das Frontend bedienten wir uns der React Javascript Library und für die Ausgabe der 3D Komponenten verwenden wir den WebGL Standard der Khronos Group. Als Framework verwenden wir hierzu ThreeJS.
Versionskontrolle wird bei uns großgeschrieben, daher ist GIT für uns ein unverzichtbares Tool, während der Entwicklung.

AGILE ENTWICKLUNG

Aufgrund unserer agilen Herangehensweise konnten wir während der Entwicklung auf Produktänderungen reagieren und diese Informationen direkt in den nächsten Projektschritt mit einfließen lassen.

ABNAHME

Vor jedem Veröffentlichungsschritt wurden die Application Guides ausgiebig, durch den Kunden als auch durch unsere Usability Tests, auf Herz und Nieren getestet. Erst danach wurde der aktuelle Entwicklungsstand auf die LIVE Umgebung transferiert.

VERÖFFENTLICHUNG

Im Zuge der Integration der Panolin Produktgruppe in die Shell Infrastruktur wurde der Application Guide von der Entwicklungs- auf die LIVE-Umgebung umgezogen. Die Integration erfolgte hier sehr einfach per iFrame.

PFLEGE

Der Shell Panolin Application Guide wird von uns in regelmäßigen Abständen gewartet und technisch auf dem aktuellen Stand gehalten. Ständige Weiterentwicklungen im Webbereich, Suchmaschinenaktualisierungen etc. machen diesen Schritt unabdingbar.

SKALIERUNG

Dank Verwendung agiler Methoden und State of the Art Frameworks / Technologien ist eine Weiterentwicklung und Adaption auf andere Branchen des Application Guides kein Problem. Von der simpelsten Variante von neuen Produkten / Produktfamilien, über Affiliate Lösungen, bis hin zu White Label Lösungen ist die Anwendung auf alle Eventualitäten vorbereitet.

TECHNOLOGIEN

THREEJS

WEBGL FRAMEWORK

ThreeJS ist eine leistungsstarke JavaScript-Bibliothek, die 3D-Grafiken im Web ermöglicht. Sie bietet einfache Schnittstellen für die Erstellung von interaktiven und beeindruckenden 3D-Visualisierungen im Browser.

CHAKRA UI

FRONTEND FRAMEWORK

Chakra UI ist eine React-basierte Komponentenbibliothek, die eine schnelle und einfache Entwicklung von ansprechenden Benutzeroberflächen ermöglicht. Sie bietet vorgefertigte Komponenten und Stile für die Webentwicklung.

ELECTRON JS

CROSS PLATTFORM FRAMEWORK

Electron JS ist ein Open-Source-Framework, das es Entwicklern ermöglicht, plattformübergreifende Desktopanwendungen mit Webtechnologien wie HTML, CSS und JavaScript zu erstellen und zu deployen.

ÄHNLICHE PROJEKTE

VIRTUAL SHOWROOM

KARDEX

Shell bietet umweltverträgliche Schmierstoffe mit vielfältigen Anwendungsmöglichkeiten. Der 3D Application Guide veranschaulicht die Vorteile und Einsatzbereiche der Panolin Produktgruppe an Praxisbeispielen.

Weiterlesen

KONTEC KONFIGURATOR

SCHUNK

Der EXA3D-Konfigurator von Schunk ermöglicht maßgeschneiderte Spannlösungen im KONTEC-Konfigurator, inklusive Echtzeit-3D-Visualisierung und .STEP-Datenexport.

Weiterlesen

UNSER PROJEKT-WORKFLOW

Am Anfang steht die Idee zu einem digitalen Projekt. Das Pflänzchen soll wachsen, Schritt für Schritt. Bis am Ende ein kräftiger Baum steht – das fertige Produkt. Wir unterteilen jedes Projekt in mehrere Abschnitte, je nach Anforderung des Kunden. Das TINYTREE Team hat eine ausgeprägte Affinität zu technischen Prozessen, gerade im Maschinenbausektor. Neben Technik und Professionalität ist uns auch das ganz wichtig: eine gute Zusammenarbeit mit unseren Kunden auf Augenhöhe.

Weiterlesen

AUSZUG ZUFRIEDENER KUNDEN

NEUGIERIG? LASSEN SIE UNS SPRECHEN!

Vereinbaren Sie ein unverbindliches Online-Meeting und lernen Sie uns kennen.