– Customer Success Storywww.littlehipstar.com 1

www.littlehipstar.com

LITTLEHIPSTAR GMBH – CUSTOMER SUCCESS STORY

2019

– Customer Success Storywww.littlehipstar.com 2

Produktvision

Der Name verrät es bereits: im Onlineshop von littlehip-star kann man seit 2013 hochwertige und hippe Baby- und Kinderkleidung, Designermode, Schuhe, Spielzeug, Accessoires sowie Kinderzimmer-Deko kaufen. Das Un-ternehmen aus der Schweiz mit Niederlassung in Mün-chen hat es sich auf die Fahne geschrieben, seinen Kun-den ein fantastisches Kauferlebnis sowie den besten Kundenservice zu bieten, um der Nummer-Eins-Online-shop für Baby- und Kindermode als auch Home Interior zu werden.

Um diese Mission umzusetzen, wandte sich littlehipstar an die TechDivision. Neben der Migration von Magento 1 auf Magento 2 zielte man auf eine verbesserte Usability und schnellere Ladezeiten ab. Eine weitere Herausforde-rung stellte die Produktpflege dar. Wurden die Produkte bisher direkt in Datenbanken von Magento angelegt und erweitert, sollte zukünftig das PIM Akeneo eingeführt werden, was die Komplexität des E-Commerce-Projekts erhöhte.

Da es bereits viele Produkte in Magento 1 gab, galt es, innerhalb des Projektes nicht nur die Anlage und das Aufsetzen des Akeneo PIM Systems zu bewerkstelligen, sondern auch eine Migration der bereits bestehenden Da-ten in Akeneo zu gewährleisten.

Wir haben also innerhalb des E-Commerce-Projekts mit littlehipstar ein neues Magento 2 Shopsystem aufge-setzt, neue nutzerfreundliche Features entwickelt und zeitgleich auch ein komplett neues PIM-System und die dazugehörigen Schnittstellen implementiert und ausge-rollt.

Parallel zur technologischen Weiterentwicklung sollte auch das Design des Shops aufgefrischt werden. Dabei haben wir mit dem Tool InVision gearbeitet um die Zu-sammenarbeit und Kommunikation zwischen Design, Kunde und Entwicklern zu erleichtern.

Um die Zielgruppe “Mütter”, die beim Kleiderkauf fürs Kind gern stöbert und beraten lässt, gezielt anzuspre-

chen, wurde ein Fokus darauf gelegt, mehr Content im Onlineshop zu bieten. Für jede Produktkategorie wurden Zwischen-Landingpages eingebaut, die, bevor die ein-zelnen Produkte angezeigt werden, einen Content-Block enthalten, um den Kunden noch nähere Informationen und Highlights zu Produkten in dieser Kategorie zu ge-ben. Von diesen Zwischen-Landingpages aus gelangt man in die Unterkategorien. Die Icons bzw. “Bubbles” für die Unterkategorien erinnern vor allem in der mobilen An-sicht - der Zielgruppe entsprechend - ans “Story-Design” bei Instagram.

Das Stöbern wird im Shop durch die nutzerfreundliche Filterung zu einem besonderen Erlebnis. Eine Ajax-Filte-rung sorgt für schnelle Reaktion beim Filtern und genaue Filterergebnisse.

Durch den Gewinn des renommierten Shop-Usability-Awards 2019 in der Kategorie Mode wurden die Anforde-rungen des Relaunches eindrucksvoll bestätigt.

littlehipstar.com

– Customer Success Storywww.littlehipstar.com 3

Startseite Kategorieseite mit “Bubbles” zu Unterkategorien

Einkaufserlebnis

– Customer Success Storywww.littlehipstar.com 4

Unterkategorieseite Produktdetailseite

Einkaufserlebnis

Einkaufserlebnis

– Customer Success Storywww.littlehipstar.com 5

Warenkorb

– Customer Success Storywww.littlehipstar.com 6

Einkaufserlebnis

– Customer Success Storywww.littlehipstar.com 7

Über littlehipstarIm September 2013 ist littlehipstar, ein Online-Shop für Mamas auf der Suche nach coolen, einzigartigen und hochwertigen Baby- und Kinderprodukten, live gegangen.

Die Idee hinter einer handverlesenen Auswahl der hoch-wertigsten und hipsten Baby- und Kindersachen steckt bereits im Namen littlehipstar. Neben Designermode für Babys und Kleinkinder, können Kunden Schuhe, Acces-soires, Spielzeuge sowie Kinderzimmer-Dekoration von den großartigsten Marken der Welt im Shop erwerben. Die ausgewählten Marken im Online-Shop sind für ihre herausragende Qualität, ihre einzigartigen Designs und nachhaltige Produktion bekannt.

Vom Versandcenter in Deutschland aus beliefert littlehip-star mit dem Ziel des bestmöglichen Services Kunden auf der ganzen Welt.

Seit Juli 2019 ist der Shop mit seiner Neuauflage online und macht noch mehr Mütter und Kinder mit seinem viel-fältigen Angebot glücklich.

ProjektauftragZiel des Projekts war es, den Onlineshop von Magento 1 auf Magento 2 zu migrieren. Um den Kunden ein op-timales Kauferlebnis zu gewährleisten, sollte die Usabi-lity verbessert, der Checkout-Prozess vereinfacht sowie die Ladezeiten beschleunigt werden. In diesem Atemzug sollte auch das Design des Shops aktualisiert werden.

Um die Zielgruppe optimal anzusprechen, machte man es sich zur Aufgabe, für den Onlineshop mehr und pas-senden Content präsent zu platzieren.

Ein weiteres Hauptziel war es, den Onlineshop auf Basis von Magento 2 Commerce an das Product Information Management System Akeneo anzubinden, um so die Pflege der Produkte zu vereinfachen.

LINK

D A T E N & F A K T E N

SYSTEM

FEATURES

TECHDIVISION -MAGENTO MODULE

SCHNITTSTELLEN

PROJEKTTEAM

ENTWICKLER

PROJEKTLAUFZEIT

› TD Product Flags

› TD Navigation

› TD Ajax Catalog

› TD Brandmodul

› TD Tracking

› TD SEO Modul

› TD Checkout Icons

› PIMgento (Akeneo-Schnittstelle)

› Xtento

Magento Commerce 2.2

Team Stable - TechDivision GmbH

Product Owner - TechDivision GmbHTechDivision eConsulting

Anfang Okt. 2018 bis 24. Juli 2019

› Amazon Pay

› Trusted Shops

› Klaviyo

› Bluefoot CMS

› PAYONE

https://www.eglo.com/de/

– Customer Success Storywww.littlehipstar.com 8

Ergebnis

Erfolgreiche Migration auf Magento 2

Problemloser GoLive

Bessere Usability (Gewinn des Shop-Usability-Award 2019!)

Bessere User Experience

Übersichtlicher 3-stufiger Checkout

Schnellere Ladezeiten

neues, an die Zielgruppe angepasstes Design

Filtern der Produkte nach Geschlecht, Alter, Hersteller, Farbe und Preis schnell und mit genauen Ergebnissen

Inhalte/Content auf die Zielgruppe “Mütter” abgestimmt, die im Shop gern stöbert, sich inspirieren lässt und nach neuen Produkten sucht

Design der Unterkategorieseiten ähnelt - passend zur Social Media affinen Zielgruppe - dem Story-Design bei Instagram

Lösungen

Verwendung von Magento Commerce 2.2

Anbindung Akeneo-PIM als zentrale Plattform für die Produktdaten mit PIMGento

Ajax-Filterung mit JavaScript

Content-Blocks für jede einzelne Kategorieseite

Anforderungen

Erstellung eines Onlineshops auf Basis von Magento 2

Migration der bestehenden Daten aus Magento 1 in Magento 2

Verbesserte Usability

Verbesserte User Experience

Checkout-Optimierung

Schnellere Ladezeiten

Neues, moderneres Design

Zielgruppenspezifischer Content

Content für Kategorieseiten notwendig

Filterung

Produktpflege über Akeneo: Anbindung des PIM Akeneo an Magento 2

User Experience Mobile

Content-Pflege Bluefoot Widgets

– Customer Success Storywww.littlehipstar.com 9

Akeneo-PIM

Durch die zunehmende Digitalisierung und die Nutzung unterschiedlicher Kanäle vor und während des Kaufpro-zesses stellen gut gepflegte und strukturierte Produktda-ten das Fundament für den Erfolg im E-Commerce dar. Genau an dieser Stelle kommen sogenannte Product Information Management Systems (PIM) zum Tragen, indem sie Produktdaten zentral und medienneutral für unterschiedliche Ausgabekanäle bereitstellen. Akeneo gehört zu den weltweit führenden Anbietern für PIM-Sys-teme, die Herstellern und Händlern eine einheitliche und vollständige Customer Experience über alle Verkaufska-näle hinweg bietet; ob E-Commerce, Mobil, Print oder am Point of Sale.

Datenerfassung Datenoptimierung DatenverteilungErfassung von Produktdaten aus verschiedenen Quellen, sowohl on- als auch offline und aus internen Quellen oder von Drittanbietern, wie z.B. Lieferanten. Wählen Sie die gewünschten Daten aus und definieren Sie Prioritäten in-nerhalb der verschiedenen Datenquellen.

Anreicherung der Produktdaten mit unterschiedlichen technischen Daten sowie Marketinginformationen - dazu zählen insbesondere Beschreibungstexte - sowie Medi-en. Das oberste Ziel besteht hier darin, das optimal be-schriebene Produkt für alle relevanten Ausgabekanäle und Sprachen zu erhalten.

Export und Verteilung von Produktdaten über Konnekto-ren zu unterschiedlichen Ausgabekanälen, wie z.B. Webs-hops, Printkatalogen, Marktplätzen usw. Sie entscheiden dabei, wie, wann und über welche Kanäle Ihre Produktda-ten verteilt werden.

– Customer Success Storywww.littlehipstar.com 10

Lösung

Um die Produkt- und Kategorie-Informationen aus Akeneo in Magento zu importieren, wird die Magento-Extension PIMGento2 (API) genutzt, die das Vorgängermodul des offiziellen Magento 2 Connectors für Akeneo darstellt. Durch die Anbindung über eine Magento-Extension besteht die Möglichkeit, einfach kundenspezifische Anforderungen auch in Magento umzusetzen.

Unterstützte Akeneo-Entitäten:• Categories• Families• Attributes• Options• Product Models• Variants• Products

Kern-Features:• Möglichkeit, Daten-Import über Magento-Backend zu starten• Möglichkeit zum zeitgesteuerten Import von Daten über Kommandokonsole• weitreichende Steuerungsmöglichkeit für zu importierende Produkte: geändert seit x Tagen, Status, Fertigstel-

lungsgrad usw.• zahlreiche Konfigurationsmöglichkeiten zur Zuordnung der Daten zwischen Magento und Akeneo (Zuordnung von

Attributen, Steuerklassen und Bildern beim Import)• Unterstützung für verschiedene Channels aus Akeneo mit Zuordnung zu Websites in Magento

Projektspezifische Anpassungen:• Steuerung von websiteabhängigem Produktstatus in Magento über channelspezifisches Attribut aus Akeneo• Herstellung der Kompatibilität der Extension mit migrierten Daten aus Magento 1• SEO-Optimierung der Produkt-URLs, so dass statt der Produkt-SKU ein in Akeneo pflegbarer Produktname verwen-

det werden kann• SEO-Optimierung von Kategorie-URLs, so dass diese nicht unnötig um Zahlen-Index erweitert werden• Anpassung der Bilder-Zuordnung an kundenspezifische Anforderungen• Anpassung importierter Kategoriedaten an eine von der eingesetzten Suchlösung erwartete Datenstruktur

Anforderungen

Mit der Anbindung des Product Information Manage-ment Systems Akeneo wurde eine Schnittstelle benötigt, die die Akeneo-Produktinformationen an Magento 2 übermittelt. Die Anforderung hierbei war, ein performantes Modul zu implementieren, das die Möglichkeit für kundenspezifische Erweiterungen zu-lässt.

PIMGento als Schnittstelle für die Anbindung von Akeneo an Magento 2

– Customer Success Storywww.littlehipstar.com 11

Ajax-Filterung für schnelle und genaue Ergebnisse

Anforderungen Die Filterung soll:

• unterscheiden können, ob Kleidung für Jungs oder Mädchen gesucht wird,

• auf allen Endgeräten einfach zu bedienen sein,• die Möglichkeit bieten, nach Farben zu suchen,• nach verschiedenen Altersgruppen unterscheiden

können,• eine schnelle Reaktionszeit zur Anzeige der Produkte

bieten, damit die oder der Kunde/in komfortabel zu ihrem/seinem gewünschten Produkt findet.

Dafür sollten folgende Filteroptionen implementiert werden:

• Geschlecht• Alter• Hersteller• Farbe• Preis

Lösung Eine herkömmliche Filterung kam für uns als Lösungs-möglichkeit nicht infrage, da ein Seitenreload den Benut-zer nur unnötig lange auf die Ergebnisse hätte warten lassen.

Die Filterung wurde daher mit JavaScript umgesetzt. Ausgewählte Filter werden im Client des Benutzers op-tisch gesetzt und an den Server übermittelt.

Während des Ladevorgangs werden die dargestellten Produkte ausgegraut, bis sie mit den der neuen Filterung entsprechenden Produkten ausgetauscht werden. Dies gibt dem Benutzer das Gefühl, dass tatsächlich ein Lade-vorgang stattfindet - das wiederum verringert die gefühlte Wartezeit.

Durch die zusätzlich reduzierte Datenmenge wird der Ladevorgang auch tatsächlich beschleunigt, da nicht die gesamte Seite ausgetauscht werden muss, sondern lediglich die passenden Produkte nachgeladen werden.

Ergebnis Die Kunden von littlehipstar können die Produkte auf al-len Endgeräten nach Geschlecht, Alter, Hersteller, Farbe und Preis filtern - schnell und mit genauen Ergebnissen.

Die Filterung bei littlehipstar war eines der Key-Features für den Relaunch des neuen Shops. Die Zielgruppe von littlehipstar stöbert gern im Onlineshop und sucht nach neuen Produkten. Da diese schnell gefunden werden müssen, waren eine schnelle Reaktion der Suche und genaue Filterergebnisse essentiell.

– Customer Success Storywww.littlehipstar.com 12

– Customer Success Storywww.littlehipstar.com 13

Fazit: Dem Ziel, der Nummer-Eins-Onlineshop für Baby- und Kindermode zu werden, ein großes Stück näher!Beim Magento-Commerce-Projekt littlehipstar bestand das Team aus fünf Entwicklern vom “Team Stable” der TechDivision GmbH und zwei Mitarbeitern der TechDivision eConsulting.

Die Steuerung erfolgte durch einen projektverantwortlichen Product Owner, der von TechDivision gestellt wurde. Das Projekt wurde mit der Kanban-Methode umgesetzt. Durch tägliche Stand-ups innerhalb des Teams sowie laufenden Austausch zwischen Team und Kunde in Retrospektiven konnte eine gute Zusammenarbeit geschaffen und das Projekt erfolgreich umgesetzt werden.

Durch einen sog. MVP-Ansatz (Minimal Viable Product) wird sichergestellt, dass zuerst die zum Betrieb notwendigen Funktionalitäten bereitgestellt werden und so eine mög-lichst schnelle Time-to-Market gewährleistet wird.

Durch den Gewinn des renommierten Shop-Usability-Award 2019 in der Kategorie Mode wurden die Anforderungen des Relaunches eindrucksvoll bestätigt.

– Customer Success Storywww.littlehipstar.com 14

„Einen erfolgreich laufenden Shop zu relaunchen ist immer eine echte Herausforderung. Im gleichen Atemzug noch ein PIM-Projekt zu realisieren und zehntausende von Produktdaten zu migrieren und optimieren ist eine echte Mammutaufgabe.

Glücklicherweise haben wir mit der TechDivision echte Vollprofis an unserer Seite die unsere Vision und Ambitionen verstehen und technisch versiert umzusetzen wissen.“

Adrian Vogel CTO

„

– Customer Success Storywww.hallhuber.com 14

– Customer Success Storywww.littlehipstar.com 15

littlehipstar

Im September 2013 ist littlehipstar, ein Online-Shop für Mamas auf der Suche nach coolen, einzigartigen und hochwertigen Baby- und Kinderprodukten, live gegangen.

Die Idee hinter einer handverlesenen Auswahl der hochwertigsten und hipsten Baby- und Kindersachen steckt bereits im Namen littlehipstar. Neben Designermode für Babys und Kleinkinder, können Kunden Schuhe, Accessoires, Spielzeuge sowie Kinderzimmer-Dekoration von den großartigsten Marken der Welt im Shop erwerben. Die ausgewählten Marken im Online-Shop sind für ihre herausragende Qualität, ihre einzigartigen Designs und nachhaltige Produktion bekannt.

Vom Versandcenter in Deutschland aus beliefert littlehipstar mit dem Ziel des bestmöglichen Services Kunden auf der ganzen Welt.

Seit Juli 2019 ist der Shop mit seiner Neuauflage online und macht noch mehr Mütter und Kinder mit seinem vielfältigen Angebot glücklich.

www.littlehipstar.com/de/

TechDivision

Die TechDivision GmbH gehört als Magento-Enterprise-Partner der ersten Stunde so-wie offizieller Magento-Cloud-Partner zu den führenden Adressen für anspruchsvolle E-Commerce-Projekte und Digitalisierung von Geschäftsprozessen im deutschspra-chigen Raum. Über ein äußerst erfahrenes Inhouse-Team bietet TechDivision neben Design, Implementierung, Optimierung und Support auch umfassende Beratungs- und Online-Marketing-Leistungen an.

Neben diversen mittelständischen Kunden vertrauen auch international agierende Un-ternehmen wie Ritter-Sport, Familotel, myTheresa, GABOR, Volkswagen oder JuZo auf das Know-how und die Erfahrung von TechDivision.

Aktuell verfügt TechDivision über drei Standorte in Rosenheim/Kolbermoor, München sowie Hamburg und beschäftigt insgesamt mehr als 100 Mitarbeiter.

www.techdivision.com

– Customer Success Storywww.littlehipstar.com 16

Magento

Mit einem globalen Marktanteil von rund 28% und rund 260.000 Installationen sowie ei-ner riesigen, weltweiten Community in allen Erdteilen ist Magento die weltweit führende E-Commerce-Plattform. Das Magento-Ökosystem umfasst dabei hunderte von Syste-mintegratoren, unzählige zertifizierte Entwickler, eine Vielzahl an Technologiepartnern aus allen Bereichen sowie einen Marktplatz für Programmerweiterungen mit tausenden von Modulen.

Der Fokus von Magento liegt dabei auf mittelständischen Kunden, die eine nachhalti-ge Online-Strategie verfolgen und hierfür eine flexible Softwarebasis benötigen. Hierzu wurde Magento in der Vergangenheit bereits mehrfach unter anderem von Forrester und Gartner als sog. Leader ausgezeichnet. Seit Ende 2015 ist mit Magento 2 die kom-plett neue Nachfolgeversion der Shopsoftware verfügbar, die durch diverse neue Fea-tures, vereinfachte Bedienung sowie verbesserte Skalierbarkeit besticht.

Neben Magento Commerce als E-Commerce-Plattform (On-Premise & PaaS) stehen mit dem Magent-Order-Management-System sowie Magento Business Intelligence zusätzliche Tools zur Verfügung, mit denen die Shop-Plattform bei Bedarf erweitert werden kann.

www.magento.com/de

Akeneo

Akeneo gehört zu den weltweit führenden Anbietern für PIM-Systeme, die Herstellern und Händlern eine einheitliche und vollständige Customer Experience über alle Ver-kaufskanäle hinweg bietet; ob E-Commerce, Mobil, Print oder am Point of Sale. Mit Ake-neos Open Source Enterprise PIM werden Produktdaten zentral harmonisiert, übersetzt und können intuitiv und flexibel von externen Zulieferern sowie den eigenen Mitarbei-tern bedient werden. Akeneo PIM steht in zwei Versionen zur Verfügung, um unterschiedliche Zielgruppen und Ansprüche bestmöglich bedienen zu können. Die Akeneo Community Edition stellt bereits eine Vielzahl an Funktionalität bereit, um Produktdaten zentral zu verwalten und über unterschiedliche Kanäle auszugeben. Darüber hinaus steht mit der Akeneo Enter-prise Edition eine PIM-Lösung für gehobene Ansprüche und mit diversen Zusatzfunkti-onalitäten zur Verfügung:Neben einer Vielzahl zusätzlicher Features erhalten Kunden der Enterprise Version zu-dem umfassenden Herstellersupport. Akeneo Enterprise ist dabei wahlweise als OnPre-mise- oder Cloud-Version und damit als derzeit einziges Open PaaS PIM auf dem Markt verfügbar. Damit kann die Flexibilität einer Open-Source-Lösung mit der Sicherheit und Skalierbarkeit einer SaaS-Lösung kombiniert werden.

www.akeneo.com/de/

– Customer Success Storywww.littlehipstar.com 17

Spinnereiinsel 3a83059 Kolbermoor

Tel.: +49 8031 22 10 55 - 0Fax.: +49 8031 22 10 55 - 22

info@techdivision.com

www.techdivision.com

TechDivision GmbH / TechDivision eConsulting GmbH

Balanstr. 73, Haus 8, 3. OG81541 München

FACEBOOK YOUTUBEXING

GOOGLE+ TWITTER

Sie haben Fragen? Wir stehen Ihnen telefonisch und per Mail gerne zur Verfügung und freuen uns auf eine

gemeinsame und erfolgreiche Zusammenarbeit!

Bildquellen: littlehipstar, TechDivision