feco – Website Relaunch und Online Shop

die feco-Gruppe ist der führende Hersteller für die Gestaltung und Ausstattung von zeitgemäßen Büroflächen. Sie produzieren raumbildende Trennwandsysteme, arbeiten mit systemkompatiblen Tür- und Akustikelementen und statten Arbeitsräume mit hochwertiger Büroeinrichtung aus.

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!

feco Logos – links die zwei der Ausgangswebsiten, rechts nach dem Relaunch

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.

Sitemap feco
Definition der Sitemap und Navigationsstruktur

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?
priority guide reference sketch page concept
Priority Guide der Projektdetailseite

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
Auf den Übersichtsseiten haben wir großzügige Full-Width-Video-Module platziert, mit denen Impressionen von Raumbeispielen und die beeindruckenden Räumlichkeiten des feco-forums angemessen dargestellt werden können.




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.

feco Trennwand-Detailseite – Tabletansicht
feco Trennwand-Detailseite – Mobile Ansicht

Ü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.

feco Projekt-Detailseite – Tabletansicht
feco Projekt-Detailseite – Mobile Ansicht

Wir haben ein Hotspot-Modul entwickelt, um im Kontext der Projekte die verwendeten Produkte zu zeigen und zum Online-Shop zu führen.

feco Product-Hotspot – Desktopansicht
feco Product-Hotspot – Mobile Ansicht

Raumkonzepte
Feco arbeitet mit fünf Raumzonen, 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.“

Sven Kaun-Feederle


Der Online-Shop

Produkt-Detailseite Online-Shop – Desktopansicht

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 Showroom „feco-Forum“ in Karlsruhe dar.

Produkt-Detailseite Online-Shop – Mobile Ansicht

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.


Das Projektteam

Projektmanagement und Online-Shop
Stephan Sperling

Design und Experience
Doro Sthamer, Michael Wallner

Development
Tom Hare, Luca Pipolo

Hast Du Fragen zum Projekt oder unserem Prozess oder möchtest gerne selbst mit uns durchstarten? Dann geht es hier für Dich weiter.