TYPE HYPE Magento Shop - Startseite Flyout Menü des Magento Shops von Typehype Offcanvas Menü des TYPE HYPE Magento Stores Produktteaser des Shops Produktübersichtsseite von TYPE HYPE Produktdetailsseite des Shops Magento Shop Produktdetailsseite TYPEHYPE Magento Shops Lookbook Magento Shop Shopping Shop Magento Design linie Produktkonfigurator

TYPE HYPE Magento Shop

TYPE HYPE ist ein Label für Design-Kollektionen von Premiumprodukten rund um das Thema Typografie.

Aufgabenstellung

Der bisherige Online-Store wurde vom Kunden mit dem System von "Shopify" betrieben. Da damit aber viele Einschränkungen verbunden sind und die Anforderungen den Möglichkeiten nicht mehr gerecht wurden, entschied man sich, einen kompletten Neuaufbau mit Magento durchzuführen.

User und Kunden greifen heutzutage vermehrt, teilweise sogar überwiegend, mit mobilen Endgeräten auf E-Commerce-Shops zu. Deshalb bestand eine starke Fokussierung auf die volle "Responsiveness" des Magento Shops. Dazu wurden für die unterschiedlichen Auflösungen der Devices und deren speziellen Use-Cases, optimierte Front-End Oberflächen entwickelt.

Dem Kunden soll ein Einkaufserlebnis geboten werden, das sich durch innovative Features von Standardshops abhebt. Spielerisch wird der User auf den Seiten der verschiedenen Design-Linien von TYPE HYPE zu den Produkten geführt, informiert sich über die Hersteller der Artikel und kann sich über einen Konfigurator individuelle Produkt-Sets in Echtzeit generieren lassen.
Des Weiteren wurde besonderer Wert auf eine benutzerfreundliche Navigation gelegt. Dem Kunden wird eine klare Menüführung vorgegeben, die es ihm leicht macht, sich innerhalb der verschiedenen Bereiche des Magento Shops (Produktbereich, Design-Linien, Support- und Kundenbereich, Warenkorb, Checkout etc.) zurechtzufinden.

Realisierung

Produkt-Konfigurator
Für den Produkt-Konfigurator wurde mit AngularJS eine Applikation entwickelt, die im gesamten Shop integriert werden kann. Die Produktdaten für den Konfigurator werden über JSON zur Verfügung gestellt. Die Produktsets, welche durch Eingabe von beliebigen Zeichenketten in ein Input-Feld durch den User generiert werden, können über Filter angepasst werden. Eingaben des Users im Hauptmenübereich „Wohnen & Küche“ liefern im Ergebnis nur Produkte aus der entsprechenden Produktgruppe.

Point of Sale
In Berlin-Mitte betreibt TYPE HYPE ein Ladengeschäft, in welchem sowohl Produkte aus dem Online-Store als auch Gastronomie angeboten wird. Um dieser Konstellation gerecht zu werden, wurde eine Kassen-Lösung für den Point of Sale realisiert, welche verbunden mit einer einfachen Usability den Ladengeschäftsmitarbeitern die Möglichkeit bietet, alle Verkäufe über den Magentostore abzuwickeln.

Design-Linien
Um die verschiedenen Design-Linien von TYPE HYPE vorzustellen und die Produktlinien in ihrer Vielfalt darzustellen, wurden hochwertige Fotografien in passenden Locations erstellt. Um diese Darstellung nach Art eines Lookbooks im Shop direkt mit Produkten für den E-Commerce zu verbinden, können die Artikel auf den Fotos mit Punkten getaggt werden, die durch Anklicken eine Mini-Produktinformation erscheinen lassen. Hier kann der Artikel auch direkt in den Warenkorb gelegt werde, oder man kann von dort direkt auf die Produktdetailseite navigieren. Die Produkt-Tags können vom Kunden im Backend einfach administriert werden und ihre Positionen bleiben, unabhängig von Auflösung und Endgerät, immer korrekt auf den Fotos platziert, so dass eine volle Responsiveness garantiert ist.
Die Artikeldaten, die in den Pop-Ups erscheinen werden über einen JSON-Feed zur Verfügung gestellt und aktualisieren sich automatisch. Dadurch kann der Kunde Fotos austauschen oder neue hinzufügen und hat immer die Möglichkeit, neue Produkte zu integrieren.

Responsiveness
Für die optimale Darstellung des Magento Shops auf verschiedenen Endgeräten und Displays wurden Designanpassungen über vier Breakpoints angelegt. Die Bildschirmbreiten der Stufen sind >1600px für große Desktop-Displays, >1024px für Laptop-Displays, >768px für Tablets und

Attribute-Filterung
Die Produktwelt von TYPE HYPE zeichnet sich durch mehrere Design-Linien aus. Der User hat auf der Produktübersichtseite die Möglichkeit über eine Kombination aus verschiedenen Filtern das gewünschte Item zu finden. Außerdem ist es möglich, die Reihenfolge der angezeigten Produkte durch weitere Filter zu ändern.

Weitere Features…
Das Design, das deutlich vom Standard abweicht, überzeugt auf allen Ebenen des Shops durch weitere funktionale und optische Features.
So gibt es ein Off-Canvas-Menü, über das ein Sprachwechsel möglich ist und worüber navigiert werden kann.
Das Hauptmenü wird beim Herunterscrollen automatisch verborgen und kommt beim Hochscrollen wieder zum Vorschein. Dadurch werden die Produkte und Inhalte des Shops stärker in den Fokus gerückt.
Da es viele Produkte in verschiedenen Ausführungen gibt, existieren auch für jede der Varianten vollflächige Bilder in einer eigenen Produktgalerie.
Wichtige Bereiche des Shops, wie die Produktdetailseiten, bieten die Möglichkeit, die jeweiligen Inhalte direkt in sozialen Netzwerken zu teilen.
Die Administration des Shops durch die Mitarbeiter von TYPE HYPE wurde durch die Möglichkeit erleichtert, Produktreihenfolgen per Drag-&-Drop im Backend des Shops zu verändern. Auch sind nun Änderungen der Produktstammdaten direkt auf der Übersicht der Produktadministrationsseite möglich.

Technologien: 

AngularJS

Atlassian

Git

HTML 5

Jenkins

Less

Magento

MySQL

Magento Shop von TYPE HYPE

Sehen Sie das Projekt live