Unsere Aufgabe

i+m suchte eine Agentur zur Neugestaltung von Website und Onlineshop auf Basis von WordPress bzw. WooCommerce. Ziele des Projekts waren die Verbesserung der User Experience und die Steigerung der Verkaufszahlen. Zudem sollte der Wiedererkennungswert der Produktwelt erhöht und die politischen Werte von i+m dargestellt werden.

Die Informations-Architektur haben wir in Workshops entwickelt

In ersten Workshops haben wir anhand von Zielgruppen und Anwendungs-Szenarien die Inhalte und Produkte strukturiert. Es entstand eine bedürfnisorientierte Navigation anhand von kosmetischen Anwendungsgebieten. Auch die sozialen, politischen und ökologischen Werte von i+m wurden deutlich in den Vordergrund gerückt. Erste Ideen zum Design sowie funktionale Anforderungen im Shopsystem wurden ebenfalls besprochen. Es entstand beispielsweise bereits die Idee, das Farbkonzept des Verpackungsdesigns im Layout aufzugreifen.

Im Workshop entstandene Skizzen verschiedener Seitentypen: Übersicht, Produkt-Detail, Blog-Detail

Die i+m-Redaktion haben wir mit visuellen Content-Briefings unterstützt

Die Inhalte haben wir in Form von Content Briefings geplant. Planungsskizzen jedes Seitentyps dokumentierten, welche Inhalte für welche Seite erzeugt werden mussten. Im Anschluss konnte die Redaktion von i+m parallel zu unserer Arbeit mit dem Schreiben bzw. der Medienrecherche beginnen.

Wireframes (Planungsskizzen) zur Unterstützung der Redaktion.

Die Shop-Funktionalität haben wir mit einem CMS-Prototypen sichergestellt

Nachdem die konzeptionellen Rahmenbedingungen geklärt waren, haben wir einen responsiven CMS-Prototypen mit allen wichtigen Funktionen gebaut. Redaktion und Marketing von i+m konnten in WordPress schon die vorbereiteten Inhalte einpflegen und über WooCommerce die Produkte integrieren. Das komplexe System wurde parallel zur Entwicklung benutzt, getestet und schrittweise optimiert.

Auch aus Sicht der späteren Nutzer*innen wurde getestet und optimiert. Beispielsweise haben wir den Kaufprozess sehr früh funktional durchlaufen – auch um davon abhängige externe Prozesse in Buchhaltung, Warenwirtschaft und Versand zu erkennen.

Prototyp des i+m Online-Shops auf Basis von WordPress/WooCommerce

UI- & Responsive Design entstanden in enger Abstimmung direkt im Browser

In einem Workshop wurde der visuelle Stil festgelegt. Den Look haben wir in einem iterativen Prozess gemeinsam mit der Lead Designerin bei i+m weiterentwickelt und auf alle Komponenten, Zustände und Displaygrößen ausgerollt. Das Design entstand weitestgehend direkt im Browser.

Als wichtiges Element im Layout dienen die Illustrationen von i+m. Im Zusammenspiel mit einer ansonsten klaren Formsprache entsteht ein vitaler und moderner Look.

Zur Stärkung der Markenpräsenz haben wir im Web Design das Verpackungsdesign der verschiedenen Produktlinien aufgegriffen. Je nachdem in welchem Bereich des Shops man sich bewegt, färbt sich das Layout passend zur Produktlinie um.

Seit dem GoLive wird das Projekt dauerhaft weiterentwickelt

Bei der Onlinestellung mussten alle Produkte, Bestellungen und Bewertungen aus dem bestehenden System in die neue Installation übertragen werden. Dabei galt es Downtimes zu minimieren.

Seither entwickeln wir die Website regelmäßig und in enger Abstimmung weiter.

Overlay-Elemente auf Tablet- und Desktop-Größe

Die Zahlen sprechen für sich

i+m konnte durch den Relaunch den Umsatz im Onlineshop spürbar steigern. Wir freuen uns sehr, dass das Projekt die Erwartungen erfüllen konnte und dass wir dazu beigetragen haben, dass dieses sehr sympathische Unternehmen erfolgreich ist.

Dank unserer neuen Homepage konnten wir den Umsatz in unserem Onlineshop signifikant steigern und sind auch mit der alltäglichen Kommunikation mehr als zufrieden. Neue Ideen werden stets konstruktiv besprochen, blindes Umsetzen gibt es bei euch nicht, denn ihr denkt mit anstatt nur zu liefern. Wir freuen uns auf alles, was in Zukunft noch kommen mag!

Januar 2020, Luisa Biedermann, Senior Online Marketing & Cooperations Manager i+m Naturkosmetik