i+m Naturkosmetik – Online-Shop & Website
Seit 1978 stellt i+m feinste Bio-Naturkosmetik her – vegan, fair gehandelt und nachhaltig. Wir haben Online-Shop und Website auf Basis von WordPress und WooCommerce gestaltet und realisiert.
Leistungen
- Content Strategy
- UX/UI Design
- Responsive Design
- Frontend Development
- WordPress & WooCommerce-Development
- Schnittstellen-Anbindung
- Content Migration
Projektzeitraum
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.
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.
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.
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.
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.
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.