feco-feederle GmbH
Was macht feco-feederle GmbH?
Als namhafter Einrichter von Büroräumen und ein führender Hersteller von raumbildenden Systemtrennwänden aus Glas, Holz und Metall konzipiert, plant und realisiert die feco-Gruppe zukunftsfähige Arbeitslandschaften.
Wir arbeiten seit 2017 mit feco-feederle zusammen. Ziel unserer Kooperation ist, den Online-Shop und feco.de zu stärken und auszubauen. Den Auftakt hat ein Online-Shop gemacht, über den hochwertige Büromöbel verkauft werden. Gemeinsam mit feco-feederle erarbeiteten wir die zukünftige Strategie für den Shop und setzten diese anschließend um.
In dem Rahmen haben wir auch Workshops zur Marketing-Strategie und SEO durchgeführt sowie eine Content-Strategie basierend auf zentralen Suchbegriffen definiert. Um das daran ergänzende Performance Marketing kümmern sich unsere Kolleg:innen von den Marketing Monsters.
Unsere Zusammenarbeit baute sich seitdem immer weiter aus, auch die Website wurde gemeinsam relaunched und wir stehen feco-feederle als Sparringpartner für die stetige Weiterentwicklung von Webseite und Shop zur Seite. Das umfasst auch Bereiche wie Tracking, User Experience und SEO.
Website Relaunch und Online Shop
Vor dem Relaunch waren von der feco-Gruppe zwei Websites im Netz: eine für das Thema Büroräume und eine für das feco-Trennwandsystem. Da beide Websites eine ähnliche Struktur hatten, gab es zahlreiche doppelte Inhalte, was nicht nur aus SEO-Sicht Probleme macht. Die Verzahnung der beiden Arbeitsbereiche, die es in der Praxis bereits gab, sollte auch auf der Website abgebildet werden. Aus technischer Sicht gab es bei der bisherigen Lösung auch einige Limitierungen und mit dem Wunsch nach einem zusätzlichen Online-Shop für Büromöbel war klar: Alles muss neu!
Ziele definieren
Also haben wir uns zusammengesetzt und in einem ausführlichen Workshop über die unterschiedlichen Zielgruppen gesprochen und Nutzer- und Unternehmensziele der neuen Seite definiert.
Analyse
Zuerst haben wir uns die aktuellen Sitemaps der beiden bestehenden Websites „feco-feederle. Die BüroRäume.“ und „feco. Die Trennwand.“ betrachtet und analysiert. Neben der Struktur der Sitemap ging es darum, bestehende Inhalte, Content-Typen, Metadaten und Taxonomien zu listen und zu verstehen.
Sitemap und Navigation
Wir haben die Inhalte der beiden Websites neu sortiert und die Seitenstruktur und Informationsarchitektur festgelegt. Einige Begriffe des Menus wurden in diesem Schritt neu definiert, um eine eindeutig verständliche Taxonomie zu gewährleisten.
Seitenkonzepte
Im nächsten Schritt galt es, die benötigten Seitentypen zu definieren. Hier haben wir mit sogenannten Priority Guides gearbeitet. Für jede Seite haben wir zuerst Ziele definiert und dann alle notwendigen Inhaltsblöcke hierarchisch gelistet. Im nächsten Schritt werden diese Blöcke dann detailliert beschrieben:
- Welche Inhalte brauchen wir in welcher Form?
- Mit welchen Modulen werden diese ideal abgebildet?
- Welche Funktionalitäten und technische Anforderungen gibt es?
- Welche Elemente werden wohin verlinkt?
Visual Design
Auf der Basis der Priority Guides haben wir dann das Visual Design entwickelt. Neben einer guten User Experience und visuellen Hierarchie war das Ziel, ein minimalistisches und aufgeräumtes Layout mit zurückhaltender Typografie und viel Weißraum zu entwerfen, um den hochwertigen Produkten und Referenzen genug Raum zu lassen.
Full-Width Videosequenzen
Wir haben die Inhalte der beiden Websites neu sortiert und die Seitenstruktur und Informationsarchitektur festgelegt. Einige Begriffe des Menus wurden in diesem Schritt neu definiert, um eine eindeutig verständliche Taxonomie zu gewährleisten.
Trennwand-Detailseite
Für die Seiten, auf denen Trennwandsysteme abgebildet werden, lag die Herausforderung darin, Produktmerkmale übersichtlich darzustellen und die technischen Informationen zum Download anzubieten. Hier sollten auch Bilder mit relevanten Informationen wie z.B. „Projekt“, „Vollwand“, „Glaswand“ ansprechend gezeigt werden. Hierfür haben wir eine Bildergalerie entworfen, die einem flexiblen Raster folgt und Informationen übersichtlich zeigt.
Übersichtliche Projektseite
Die Projektseiten sind ausführlicher geworden und sehr großzügig gestaltet. Wichtig war hier, dass die Projektinfos übersichtlich gelistet sind und zu den verwendeten Trennwänden verlinkt wird.
Wir haben ein Hotspot-Modul entwickelt, um im Kontext der Projekte die verwendeten Produkte zu zeigen und zum Online-Shop zu führen.
Raumkonzepte
feco plant mit vielfältigen Raumzonen als Erfolgsformel für Arbeitslandschaften, die verschiedene Anforderungen an einen angenehmen Arbeitsalltag erfüllen. Um diese Raumsituationen darzustellen, haben wir kurze Videosequenzen von den Räumen vorgeschlagen. Für die Videosequenzen haben wir ein Akkordeon-Modul konzipiert, das den Zugang zu allen Videos in einem Viewport ermöglicht.
«Digitale Zukunft braucht Raum: Die Zukunft der Arbeit wird hochvernetzt, kreativ, digital und komplex sein. Dies sollte bei unserem Internetauftritt und seinen Funktionalitäten berücksichtigt werden. Mit dem Kreativteam der netzstrategen erlebten wir einen zielführenden Kreativprozess: der Relaunch bietet unseren markenstarken Büromöbelpartnern einen vielfältigen Raum im Shop & Infoblog und macht unsere Leistungen leicht nachvollziehbar. Die Idee der Film-Clips als Web-Header, realisiert von born2design, verleiht unserem Portfolio zusätzliche Transparenz, die aus Usern auch interessierte Besucher*innen im feco-forum Karlsruhe machen.»
Der Online-Shop
Mit dem Online-Shop verfolgen wir mehrere Ziele gleichzeitig. Zum einen soll der Shop natürlich den direkten Abverkauf fördern – insbesondere auch, was Einzel- und Ausstellungsstücke betrifft. Diese Produkte sind vor allem für design-affine Käufer kleinerer Stückzahlen attraktiv. Zum anderen soll der Shop das umfangreiche Sortiment online abbilden und so eine Inspirationsquelle für freie Berufe und auch Entscheider in größeren Firmen sein, die Büros neu möblieren möchten. Das online gezeigte und verfügbare Sortiment wird daher laufend erweitert und stellt eine digitale Ergänzung zum Schauraum „feco-forum“ in Karlsruhe dar.
Technische Implementierung
In all unseren Projekten haben wir uns zum Ziel gesetzt, die Zusammenarbeit und den Austausch zwischen Design und Entwicklung zu intensivieren. Genau das haben wir auch für dieses Projekt realisiert.
Das Design-Team kann mit dem Tool „Zeplin“ alle erstellten Entwürfe aus Sketch mit den Kommentaren, benötigten Komponenten (wie z.B. icons) und den damit verknüpften Komponenten exportieren. Damit kann das Entwicklungsteam die entsprechenden Komponenten nachhaltig umsetzen, da sie die verschiedenen use cases und deren Abhängigkeiten nachvollziehen und gegebenenfalls direkt nachfragen können. Code-basiertes Denken in den Design-Prozess einzubringen hat sich als viel wertvoller erwiesen, als Websiten einfach aus PSD-Dateien zu bauen.
Technisch basiert die Website auf WordPress und WooCommerce, was das bekannte component-based Flynt framework unterstützt. Flynt basiert auf dem Timber-Wordpress-Framework, mit dem wir eine stabile und zugleich moderne PHP-Composer-Anwendung auf die sehr benutzerfreundliche WordPress Oberfläche bauen konnten.
Flynt ermöglicht uns separate Komponenten jeweils mit ihrem eigenen Twig-Template, Stylesheet, JS file und WordPress functions php file eigenständig zu erstellen. Dies beschleunigt nicht nur den initialen und iterativen Codebau, sondern erlaubt auch regelmäßiges Feedback vom Kunden während des Prozesses. Somit werden riesige Feedbackrunden vermieden und der Entwickler hat die Möglichkeit, den relevanten Code viel schneller ausfindig zu machen, ohne dass diese Änderungen ungewollte Konsequenzen in der Codebase mit sich zieht.
