Nicht weniger als höchste Ansprüche an Design und Programmierung hatte unser Kunde clearaudio an die Neugestaltung und Umsetzung seines „analogshops“. Der neue Onlineshop sollte das gleiche Finetuning erhalten wie die exklusiven Plattenspieler der weltweit bekannten Erlanger High-End-Manufaktur: optimale Bedienbarkeit, die Nutzung der aktuellen technischen Möglichkeiten sowie ein absolut stimmiges und sorgfältig ausgearbeitetes Design.

Digitalmedien

Resultat unserer Arbeit ist ein liebevoll gestalteter und funktionaler Shop mit erprobter Technik für High-End-Plattenspieler und Zubehör. Unter www.analogshop.de können nun Kunden aus ganz Europa das aktuelle Produktprogramm direkt beim Hersteller ordern.

Ausgangslage zum neuen Onlineshop

Die clearaudio electronic GmbH ist Komplettanbieter für audiophile Highlights und im analogen Audiobereich fest am Markt etabliert. Ihre High-End-Produkte „made in Germany" vertreiben sie auch über ihren mehrsprachigen Webshop. Dessen Relaunch sollte wieder dem Anspruch unseres Auftraggebers und dessen Kunden gerecht werden. Passend dazu lieferten wir ebenso ein „deutsches Qualitätsprodukt“ in Form einer hochwertigen Design- und Programmierarbeit ab.

Zu Projektbeginn war das ursprüngliche Anliegen seitens clearaudio jedoch die Erweiterung und Überarbeitung des bestehenden Shops. Vor allem aufgrund des Einsatzes des relativ unflexiblen Content-Management-Systems Joomla entschloss sich unser Kunde – nach gemeinsamer Abwägung und Kalkulation – dennoch für einen kompletten Relaunch. Damit standen uns alle Möglichkeiten offen, einen höchst individuellen Shop zu kreieren, der den Anforderungen unseres Kunden in allen Details entspricht.

Neben den neuen Funktionalitäten des Shops standen Anforderungen zum Responsive Design im Vordergrund, um eine optimale Darstellung bei verschiedenen Endgeräten zu erreichen.

Gleichzeitig sollte das Design der Unternehmens-Website www.clearaudio.de angepasst und verfeinert werden. Hier lag ein großer Teil unserer gestalterischen Arbeit auf der Ausarbeitung einer stimmigen Anmutung und Handhabung – dem „Look and Feel".

Startseite alter Onlineshop: Altertümliche Anmutung aufgrund vieler plastischer Elemente und zu eng aneinander stehender Inhalte mit einem düsteren Gesamteindruck
Startseite alter Onlineshop: Altertümliche Anmutung aufgrund vieler plastischer Elemente und zu eng aneinander stehender Inhalte mit einem düsteren Gesamteindruck
Startseite neuer Onlineshop: Freundlicherer Auftritt dank großzügigem Weißraum und sanfteren Farbnuancen in Kombination mit einem modernen Flat Design
Startseite neuer Onlineshop: Freundlicherer Auftritt dank großzügigem Weißraum und sanfteren Farbnuancen in Kombination mit einem modernen Flat Design
Produktseite alter Onlineshop: Das Produkt verliert sich im Layout, was u. a. auf den hohen Schwarzanteil sowie die unvorteilhaften Schriftproportionen rückzuführen ist.
Produktseite alter Onlineshop: Das Produkt verliert sich im Layout, was u. a. auf den hohen Schwarzanteil sowie die unvorteilhaften Schriftproportionen rückzuführen ist.
Produktseite neuer Onlineshop: Der Schallplattenspieler wird eindrucksvoll präsentiert und steht dank großem Bild und Typografie voll im Mittelpunkt.
Produktseite neuer Onlineshop: Der Schallplattenspieler wird eindrucksvoll präsentiert und steht dank großem Bild und Typografie voll im Mittelpunkt.

Individuelle Umsetzung von Design und Benutzerführung

Seinen Premiumcharakter erhält der neue Onlineshop nicht dadurch, dass er Gewohntes und Erlerntes auf den Kopf stellt. Generell sollten Websites nicht von erwarteten und bewährten Mustern abweichen und die Nutzung hierdurch bremsen oder behindern. Dies bedeutet, dass beispielsweise das Logo oben links positioniert ist, der Kaufen-Button rechts neben dem Produkt und dem Warenkorb im oberen rechten Bereich der Seite. Um sich positiv von der Konkurrenz abzuheben, muss die Individualisierung also über das gekonnte Finetuning im Design erfolgen.

So präsentiert sich der neue analogshop freundlicher, heller, leichter und – dank des großzügigen Weißraums – deutlich offener als sein Vorgänger. Durch die exponierte Typografie und harmonierenden Farben wird die optische Zusammengehörigkeit von Onlineshop und Unternehmens-Website perfektioniert.

Durch unsere Prototyping-Arbeitsweise konnte clearaudio zu jeden Zeitpunkt auf den Layout- und Design-Prozess Einfluss nehmen und so – anders als bei vorgefertigten Themes oder Templates – der Webshop in enger Zusammenarbeit völlig individuell realisiert werden. Auch noch nachträglich sind individuelle Änderungswünsche ohne größere Anpassungen jederzeit umsetzbar.

Beispiele für die liebevolle Detail-Arbeit: Passende Icons im flachen Stil zur Kennzeichnung von typischen Shop-Funktionen wie Suche, Benutzerkonto und Warenkorb …
Beispiele für die liebevolle Detail-Arbeit: Passende Icons im flachen Stil zur Kennzeichnung von typischen Shop-Funktionen wie Suche, Benutzerkonto und Warenkorb …
… oder ansprechend gestaltete Schaltflächen mit dezenten Animationen beim Interagieren.
… oder ansprechend gestaltete Schaltflächen mit dezenten Animationen beim Interagieren.

Funktionen und Technik des Webshops

Features wie verschiedene Zahlungsmöglichkeiten (z. B. PayPal oder Kreditkarte), Bestellhistorie, Gastbestellungen, Suchfunktion, Produktsortierung und -filterung, Mehrsprachigkeit, Hörproben oder Newsletter-Funktionalitäten sind selbst bei Miet-Shops oder standardisierten Shop-Systemen gängig.
Dagegen können individuelle Cross-Selling-Funktionen, verschiedene Steuersätze und Versandkostenberechnung für eine internationale Ausrichtung oder ein auf die Bedürfnisse des Kunden angepasstes Gutschein-/Rabatt-Code-System oft nicht oder nur über hochpreisige Software-Pakete in ein Shop-System integriert werden.

Hinzukommt, dass der eigentliche Vorteil bzw. Premium-Aspekt einer Individual-Programmierung oft nur im Detail sichtbar ist.
Ein repräsentatives Beispiel ist die Social-Media-Anbindung: Bei allen Produkten sind die oft gesehenen Icons von sozialen Netzwerken wie Facebook oder Twitter integriert. Durch einen Klick darauf kann der Artikel bei diesen Plattformen geteilt und verbreitet werden.
Diese Funktionalität wird auch in anderen Systemen durch Plug-ins oder Extensions bereitgestellt. Jedoch wird hierbei in der Regel auf die Standard-Integrationsmöglichkeit des jeweiligen Netzwerkes zurückgegriffen, bei der bereits ohne Interaktionen des Nutzers sensible Daten im Hintergrund übermittelt werden – eine datenschutzrechtliche Falle, die auch vielen Webdesigner und -Entwicklern nicht bekannt ist.
Im analogshop haben wir eine Lösung eingesetzt, die vom bekannten Computermagazin c’t sowie dem Online-Nachrichtenportal heise.de entwickelt wurde. Diese schützt die Privatsphäre des Nutzers.

Über dieses hohe Maß an technischer Freiheit verfügen wir durch den Einsatz des CMS webEdition. Denn dieses ist kein ausgesprochenes Shop-System mit gefestigten Strukturen, sondern versteht sich mehr als Gerüst, in welches individuell programmiert werden kann.

Der Warenkorb als wichtiger Bestandteil eines Onlineshops: Hier mit der neuen Funktion zum Einlösen von Gutscheinen sowie Cross-Selling-Funktionalitäten
Der Warenkorb als wichtiger Bestandteil eines Onlineshops: Hier mit der neuen Funktion zum Einlösen von Gutscheinen sowie Cross-Selling-Funktionalitäten

Spezieller Service für clearaudio

Natürlich haben wir auch anderweitig clearaudio mit unserem Fullservice-Paket überzeugt. So kümmerten wir uns beispielsweise auch um eine Lösung für das Hosting, die Sicherheit des Shops oder die Einrichtung von Google Analytics mit der Search Console.
Die persönliche Schulung im CMS webEdition ermöglichte unserem Kunden wiederkehrende Arbeiten selbstständig durchzuführen – beispielsweise neue Produkte anlegen, Kundendaten verwalten oder Umsatzberichte einsehen.

Weitere Informationen zu diesem Projekt finden Sie in unseren Referenzen.