Unsere Aufgabe

Die DEGES suchte eine Agentur für Konzept, UX/UI Design, CMS Implementierung und Frontend-Design der Unternehmenswebsite.

Die bisherige Website war über Jahre gewachsen und zeichnete sich durch eine unübersichtliche Struktur aus. Alle Inhalte mussten neu organisiert und aufgewertet werden. Es sollten beispielsweise die Streckenverläufe der Bauprojekte auf interaktiven Karten dargestellt werden. Das verwendete CMS konnte die redaktionellen Anforderungen nicht erfüllen. Daher sollte ein geeigneteres CMS gefunden werden. Visuell bestand unsere Aufgabe darin, das neue Corporate Design digital auszurollen und ins responsive Design zu überführen.

Im Kick-Off haben wir wichtige Weichen gestellt.

Zum Projektstart wurden Workshops durchgeführt. Die DEGES hat uns umfangreich gebrieft und auf Besonderheiten im Unternehmen bzw. in der Website hingewiesen. Es wurden alle Projektschritte besprochen und insbesondere im Bereich Konzept und UI Design konkrete Ergebnisse im Workshop erarbeitet.

Im Kick-Off-Termin entstandene Skizzen zur Visualisierung der konzeptionellen und inhaltlichen Überlegungen. Als Format wurde ein iPad im Hochformat gewählt.

Das Projekt musste in vier Monaten realisiert werden. Aufgrund des knappen Zeitplans wurden die Aufgaben streng priorisiert. Es war bereits zum Projektbeginn absehbar, dass nicht alle Features zum »Go Live«-Termin umgesetzt sein können. Updates nach »Go Live« wurden daher von Beginn eingeplant.

In den meisten Projektphasen laufen Design und Entwicklung parallel. Die Roadmap wurde nach dem Kick-Off in »Confluence« erstellt.

Die Struktur haben wir »Content Out« geplant.

Für die verschiedenen Zielgruppen wurden Anwendungsszenarien geplant, die im weiteren Projektverlauf regelmäßig geprüft wurden. Entlang dieser Anwendungsfälle haben wir die Inhalte und die CMS-Struktur geplant und in sog. »Content Briefings« festgehalten.

Auszug aus dem »Content Briefing« der Projekt-Detailseite. Neben Pflicht-Inhalten sind auch optionale Inhalte, Datentypen und nicht sichtbare Informationen dokumentiert.

Für alle Zielgruppen nahm die sog. »Projekt-Detailsseite« zur Darstellung von Bauprojekten eine zentrale Rolle ein. Dieser Seitentyp besitzt darüber hinaus die komplexesten Inhalte und beeinflusst große Bereiche der Website. Wir haben das gesamte Projekt ausgehend von diesem Seitentyp entwickelt.

Visualisierung von dynamischen Inhalten auf verschiedenen Seiten: Farbig identisch markierte Bereich sind voneinander abhängig.

Groblayouts halfen uns dabei, die Inhalte zu organisieren.

Parallel zur Planung der Inhalte haben wir weitere Ideen für den Aufbau des Layouts entwickelt. Es entstanden Groblayouts, die zu einem besseren Verständnis der inhaltlichen Struktur spürbar beigetragen haben. Im Gegensatz zur Anmutung klassischer »Wireframes« war hier die gestalterische Grundrichtung schon zu erkennen.

Groblayouts für verschiedene Seitentypen des Projekts

Funktionen und Redaktionsprozesse haben wir im CMS-Prototypen entwickelt.

Mit Hilfe der Content Briefings konnte die Redaktion der DEGES erste Inhalte für verschiedene Seiten erarbeiten. Parallel dazu haben wir das Content Management System auf Basis des WordPress Core aufgebaut.

Dieser »CMS Prototyp« wurde verwendet, um die Funktionalität der Website und die Redaktionsprozesse zu überprüfen. Insbesondere in dieser Projektphase haben wir eng mit der DEGES zusammengearbeitet und immer wieder optimiert.

Technischer Prototyp der Website auf Basis des WordPress CMS

Das Visual Design haben wir komponentenbasiert entwickelt.

Die detaillierte Gestaltung der Website haben wir anhand einzelner Komponenten erarbeitet. Wir haben mit häufig verwendeten Elementen begonnen und insbesondere die Komponenten abgebildet, die sich über verschiedene Displaygrößen verändern oder die interaktiv sind.

Ausgewählte Seitentypen haben wir grafisch aus den einzelnen Komponenten zusammengesetzt, um den Gesamteindruck besser visualisieren zu können.

Design-Komponenten responsiver und interaktiver Elemente zur Übergabe ans Frontend

UX/UI und Responsive Design entstanden direkt im Browser

Die verschiedenen Komponente und Seitentypen wurden schrittweise im Frontend umgesetzt und im CMS Prototyp implementiert. Die Redaktion der DEGES pflegte parallel alle Inhalte ein. Auch der visuelle Feinschliff fand direkt im Browser statt und konnte unmittelbar getestet und diskutiert werden. So entstand nach und nach die fertig gestaltete und inhaltlich vollständige Website.

Verschiedene Seitentypen im finalen responsive Design