Backstageeinblicke: Wie wir uns visuell neu erfanden

Details zum Relaunch der coeno Webseite

Seit Mitte vergangenen Jahres arbeiteten wir am neuen Erscheinungsbild der coeno. Ziel war es, uns trefflich zu präsentieren und den vielfältigen Charakter unserer Agentur adäquat abzubilden. Hier möchte ich die Entstehung nachzeichnen und veranschaulichen, warum wir davon überzeugt sind, dass unser neuer Auftritt einen informativen und inspirierenden Einblick in unsere Agentur gibt.

Mit der Zeit hatten wir uns satt gesehen an unserem bisherigen Erscheinungsbild, das mir als Art Director der coeno besonders am Herzen liegt. Unser bisher sehr cleaner Webauftritt erwies sich, vor allem durch seine visuellen Limitierungen, als etwas zu reduziert und unflexibel. Aber auch Veränderungen in der Agentur, getrieben durch neue Mitarbeiter, die neue Impulse brachten, neue Arbeitsweisen und Leistungsbausteine, konnten nicht mehr adäquat abgebildet werden.

All dem sollte unser neuer Auftritt gerecht werden und dabei nicht nur veranschaulichen, wie wir uns selbst sehen, sondern auch die Erwartungen unserer Besucher erfüllen.

How will we communicate is determined not by how well we say things, but how we are understood – Andrew Glove

Hol‘ den Vorschlaghammer

Um Neues zu schaffen, entschieden wir uns für ein vielseitiges Vorgehen:

  1. Interviews mit allen Mitarbeitern sollten verdeutlichen, was jeder Einzelne von unserem neuen Auftritt erwartet. Eine Kundenbefragung gab uns zusätzlich einen Einblick, wie wir von außen wahrgenommen wurden.
  2. Ein Benchmarking der Webpräsenz namhafter Agenturen bildete ab, wie anderorts die Bühne Internet genutzt wird.
  3. Ein Kreativworkshop diente dazu, verschiedene Navigationsparadigmen zu sammeln. Unsere Designer konnten dann mit größtmöglicher Freiheit einen Gestaltungsrahmen entwickeln, mit dem sich die coeno eigenständig und zweckgemäß präsentiert.
Gesammelte und priorisierte Anforderungen an die neue Website

1. Interviews mit dem Team

Bettina befragte zu Beginn des Projektes jeden im Team zu den Erwartungen, die sie oder er an den neuen Auftritt stellt. Viele Aspekte kamen dabei zu Wort. In Summe zeigte sich aber auch, dass die Struktur der bestehenden Präsenz gar keine schlechte Basis für den kommenden Auftritt bildete:

  • Unsere Projekte sollen weiterhin im Vordergrund stehen, jedoch deren spezielle Besonderheiten mehr ausgearbeitet und als spannende Geschichte abwechslungsreich erzählt und visualisiert werden.
  • Unsere Arbeitsweise muss anschaulich und verständlich abgebildet werden, unser Leistungsspektrum soll leicht und übersichtlich erfassbar sein.
  • Was uns aber von anderen Agenturen unterscheidet, sind wir – als einzelne Persönlichkeiten ebenso wie als Team. Das soll deutlich werden.
Aus dem Benchmarking internationaler Agenturseiten ergab sich diese Tagcloud

2. Benchmarking Agenturseiten

Learn the rules like a pro, so you can break them like an artistPablo Picasso

Digitale Gestaltungstrends sind ein zweischneidiges Schwert: Einerseits werden regelmäßig in dutzenden Artikeln ganze Ställe neuer Säue durchs Dorf getrieben. Andererseits werden beim genauen Hinsehen aus dem Mastvieh oft nur Eintagsfliegen. Oder Trends erweisen sich als Plagiat mit neuem Namen.

Nur um ein Beispiel zu nennen: Flat Design ist seit dem Erscheinen der Windows XP Media Center Edition 2006 regelmässig unter anderem Namen – Metro Design zum Xbox Relaunch, Modern Design oder Material Design – präsent auf der Liste populärer Trends, ohne dass sich visuell viel verändert hätte. Alles Gute zum Geburtstag!

Im Wesentlichen ließen sich aber bei Agenturauftritten drei eindeutige Tendenzen ausmachen:

  1. Die Arbeiten stehen immer im Vordergrund und werden großflächig präsentiert.
  2. Die Seitenstruktur ist flach und wird in Burgermenüs versteckt (oft auch auf der Webseite) und erst auf den zweiten Blick sichtbar.
  3. Außer einem Mission Statement sind die Leistungen eher vage und meist wenig aussagekräftig.

Diesen Ansätzen wollten wir nicht gänzlich folgen.

Als Agentur, die für intuitive Usability und erlebnisreiche User Experience steht, haben wir uns entschlossen, unsere Intension nicht nur plakativ abzubilden, sondern dem Besucher auch mit bekannten Interaktionsmöglichkeiten einfach den Weg zu weisen. Und mit Verknüpfungen zusammenhängende Informationen störungsfrei erlebbar zu machen. Das spiegelt sich nicht zuletzt in einer klassischen Navigation auf der Website wieder.

Die ersten Design Moods wiesen noch in deutlich unterschiedliche Richtungen

3. Das Team als Motor zum perfekten Auftritt

In einem Workshop sammelten wir gemeinsam Ideen zu denkbaren Interaktionsparadigmen und Ansichtstypen. Visuell durfte das Grundlayout ohne Limitierung gestaltet werden: Mehr Farbe sollte den neuen Auftritt prägen. Mehr Varianz sollte mit verschiedenen, informationsgetriebenen Ansichten für Abwechslung sorgen.

Zum Beispiel mit individualisierten Teamseiten, auf denen jeder seine eigenen Inhalte platzieren kann. Oder mit Projektdetailseiten, die ganz im Brand des Kunden thematische Schwerpunkte eines einzelnen Projekts herausarbeiten. Sowie dem „Was gibts Neues“ Bereich auf der Startseite, der – angelehnt an das weit verbreitete Card-Design – einen Ort schafft, an dem sich unsere Besucher schnell informieren können, was uns gerade antreibt.

Dass bei den Erwartungen all unserer Mitarbeiter jede Ansicht zig mal überarbeitet und verbessert werden musste, überrascht nicht. Hier möchte ich drei Ansichtstypen und deren Entstehungszyklen, exemplarisch kurz vorstellen.

Ansichten im Wandel

Projektmosaik – Aus einem gleichwertigen Mosaik entstand eine vielseitige Projektwand, die so jedem Projekt visuell einen eigenen Zugang ermöglicht. Zu Beginn experimentierten wir noch mit zahlreichen gleichwertigen Kacheln. Da diese in Summe zu bunt und unübersichtlich wirkten, und zudem zu unterschiedlichen Seitentypen verwiesen, trennten wir die Showcases und entschieden uns diese abwechslungsreich mit großen Teasern abzubilden.

Alte Version mit den Projekten als gleichwertige Mosaikkacheln

Finale Version: Abwechslungsreiche Teaser

Teamdetail – aus einer Ansammlung umfangreicher Informationen entstand eine maximal personalisierte Seite für jeden, auf der eigene Interessen und Aktivitäten gepostet werden können. Hier übertrieben wir es Anfangs mit zu vielen Informationen, die Mitarbeiterseite wirkte dadurch beinahe wie eine Katalogseite. Eine frei konfigurierbare Timeline sorgt jetzt für Abwechslung und die persönliche Note.

Zu Beginn überfluteten die Informationsblöcke die Mitarbeiterseite

Die nächste Version schuf links einen Ort für Blogeinträge und bündelte weitere Informationen in der rechten Spalte

In der finalen Fassung können Inhalte jeder Art in einer Timeline abgebildet werden

Leistungen – aus einer stringenten Abbildung unserer Leistungen entwarfen wir ein Schaubild, das Flexibilität und Innovation abbildet. Mit der Leistungsseite wollten wir vor allem zwei Dinge erreichen: Unser Leistungsspektrum sollte übersichtlich auf einen Blick erfasst werden können. Gleichzeitig wollten wir aber auch Raum schaffen, um detaillierter auf unsere Leistungsbausteine einzugehen.

Im Laufe der Zeit gewannen wir zwei Erkenntnisse: Eine lineare Abbildung unserer Leistungen entspricht nicht mehr unserer Arbeitsweise. Und eine gleichzeitige Darstellung aller Leistungen, sowie Details zu jedem Baustein, ist selbst für Monitore mit hohen Auflösungen zu viel. Deshalb folgt auf unserer Leistungsseite jetzt ein Element dem anderen und der zur Verfügung stehende Raum wird ideal genutzt.

In der ersten Fassung wurden unsere Leistungen noch lineal abgebildet

Die Überarbeitung zum Wabenschaubild sah zu wenig Platz für weitere Informationen vor

In der finalen Fassung nimmt das Schaubild die volle Breite ein, Informationen folgen unter der Darstellung

Das neue Corporate Design und wie wir uns sehen

Wir sind überzeugt von unserem neuen Erscheinungsbild: Unsere Webseite erzählt wer wir sind, erläutert unsere Arbeitsweise und schildert lebhaft, woran wir glauben und arbeiten. Sie ist intuitiv bedienbar und präsentiert sich in einem zeitgemäßen und abwechslungsreichen Look. Dabei mussten wir gar nicht alles verwerfen: Nach Experimenten mit neuen Schriften, kam ich zur Überzeugung, dass unsere etwas futuristisch wirkende Hausschrift Titillium noch immer gut zu uns passt, und der Zahn der Zeit ihr nichts anhaben konnte. Auch die neuen, satten Farben fügen sich gut in das bestehende Farbraster und lassen unseren Auftritt jetzt freundlicher, kräftiger und vor allem individueller erscheinen.

Ich meine, unser Auftritt lädt ein, sich auf eine Entdeckungsreise zu begeben, uns kennenzulernen und wiederzukommen. Denn wie sich die digitale Welt wandelt, werden auch wir unsere Präsenz kontinuierlich verändern und erweitern. Und wir wünschen uns, unsere Besucher bei jedem Besuch mit etwas Neuem zu überraschen.

In diesem Zusammenhang ebenfalls lesenswert:
Blogartikel: Unsere Vision und wie wir sie entwickelt haben

Ralf Kienzler

Zauberer & UI Designer

rk@coeno.com

Bleib auf
auf dem Laufenden

4x im Jahr erhältst du aktuelle Neuigkeiten aus unserer Agentur und spannende UX Insights.

Wir werden deine E-Mail-Adresse zu keinen weiteren Zwecken verwenden. Du kannst den Newsletter jederzeit bequem über einen Link im Mail Footer abbestellen. Mehr dazu in unseren Datenschutzbestimmungen.