Relaunch YAH! - Teil 2: Website

Ein Relaunch ist für uns immer eine große Sache. Die Planung hierfür begann bereits Anfang 2018. Wir hatten uns das Ziel gesteckt, bis Ende des Jahres mit dem neuen Brand und unserer neuen Website live zu sein. Es sollten allerdings noch weitere 10 Monate vergehen, bis wir schließlich im Oktober 2019, also knapp eineinhalb Jahre später, endlich bereit waren für den großen Launch. Warum gerade dieser Relaunch uns so viele Nerven gekostet hat und warum er für uns so wichtig ist, erfahrt ihr im zweiten Teil unseres Making-of: Relaunch YAH!.

Dieser Artikel ist eine zweiteilige Serie:

Teil 1: Brand Identity
Teil 2: Website

Es war einmal in einem Kölner-Café...

»Lass uns eine Agentur gründen!«
»Ja super, was brauchen wir?«
»Neben Büroräumen, Mitarbeitern, Hardware,... natürlich eine Website.«
»OK, gib mir zwei Tage.«

Als wir 2016 mit unserer ersten Website an den Start gegangen sind, waren wir zwar schon etwas weiter was die Büroräumlichkeiten und auch die Mitarbeiter anbelangte, allerdings war young and hyperactive zu dem Zeitpunkt noch nicht mehr als ein schicker Name für eine Identität, die wir erst noch finden mussten. Für den Anfang performte unsere alte Website gar nicht schlecht, aber es ist wie mit einem alten Schuh, der nicht mehr so richtig passen will, der vielleicht von Anfang an nicht so richtig passen wollte. »Wir brauchen unbedingt eine neue Website. Eine, mit der wir unseren Kunden besser kommunizieren können, wer wir sind und was wir machen. Eine, die einfach besser zu uns passt.«

Die Planungsphase

In unseren Meetings zur neuen Website sammelten wir zuerst die Dinge, die uns an der alten Website schon immer gestört hatten, unter anderem dass es immer eher um das Design eines bestimmten Moduls, als um die Aussagekraft dessen tatsächlichen Inhalts ging. Diesen Fehler wollten wir mit unserer neuen Website unbedingt vermeiden und mussten bereits bei den ersten Entwürfen feststellen, wie schwer es ist fokussiert zu bleiben und nicht wieder nur in einen oberflächlichen Designprozess zu verfallen. 
Da der erste persönliche Eindruck niemals einen Besuch auf einer Website aufwiegen kann und der Erstkontakt heutzutage zu 99% online stattfindet, sollte unsere Website so persönlich wie möglich gestaltet sein und einen möglichst authentischen ersten Eindruck hinterlassen. Unsere neue Sitestruktur erzählt daher eine kleine Story: von “Was wir machen”, über “Wie wir arbeiten” und “Warum wir”. – Ja warum eigentlich? 🤔

Verschiedene Entwicklungsstände

Die Designphase

Nachdem die ersten Entwürfe noch nicht so richtig den Kern unserer Idee des Storytellings treffen wollten und sich zwischenzeitlich auch das neue Brand Design weiterentwickelt hatte, entschieden wir unsere ersten Entwürfe noch einmal komplett zu überdenken und einen völlig anderen Ansatz auszuprobieren. Zusätzlich zur neuen Website sollte ein c.a 90-sekündiges Showreel produziert werden. Da wir uns schon länger mit Animationen und Videographie beschäftigten, allerdings kein gutes Vorzeigeprojekt in unserem Portfolio vorzuweisen hatten, entschieden wir es kurzerhand selbst zu produzieren. Auch wenn 90 Sekunden nicht nach viel Zeit klingt: alleine in die Produktion unseres Showreels ist wochenlange Arbeit geflossen. Wir wollten diesen großen Launch unbedingt inkl. fertigem Showreel ausrollen und hier ist es:

Da unser Team aus vollblut Geeks und Nerds besteht, darf natürlich auch der Witz nicht fehlen. Auf unserer alten Website gab es daher ein Kontaktformular, worüber die Kunden ihre Anfrage als Yoda oder op Kölsch stellen konnten. Im Projektplaner wurden passend zur Budgetvorstellung des Kunden kleine Gifs ausgespielt. Diese kleinen Gags kamen sehr positiv an und da wollten wir uns natürlich auch für unsere neue Website etwas passendes überlegen. Herausgekommen sind eigens produzierte Gifs, die unsere 5 Workflows auf eine charmante und zugleich cheesy-ge Art und Weise darstellen. Wir hatten sehr viel Spaß bei der Produktion der einzelnen Szenen, wie ihr hier sehen könnt:  

Unsere Case Studies haben auch ein komplettes Makeover erfahren. Gerade das pflegen neuer Case Studies war im alten System extrem kompliziert und dauerte ewig. Mit dem neuen Konzept und dem neuen Backend geht alles viel schneller und spart uns eine menge Zeit. Passend zum Launch unserer neuen Website, sind wir auch wieder mit einem Artikel in der aktuellen Page 🤗 Diesmal zum Titelthema: Portfolio Design – Tipps & Tools.

Die Entwicklungsphase

Ein Relaunch wie dieser ist für uns auch immer ein Anlass, neue Technologien auszuprobieren und um der Welt zu zeigen, dass auch wir niemals still stehen und uns mit jedem Launch weiterentwickeln. Natürlich hätten wir das Design einfach an unseren Entwickler weiterreichen können und der hätte uns auf Basis von Wordpress eine wunderschöne, performante Website daraus gebaut. Aber wir hätten dabei wohlmöglich nichts neues gelernt, denn das können wir ja schon. Unsere neue Website ist daher komplett in Webflow gebaut und hat selbst unseren Entwickler überrascht, der nie damit gerechnet hätte, dass die Programme schon so weit sind. Aber machen wir noch einmal einen kleinen Schritt zurück: 

Website Builder sind aktuell ein starker Trend und werden immer besser. Erinnern wir uns noch an Adobe Muse? Der Code, der da am anderen Ende rauskam war alles andere als semantisch, die Möglichkeiten mehr als begrenzt. Aber mittlerweile gibt es neben Webflow, Wix, Squarespace und Co. dutzende Website Builder und es kommen jeden Tag gefühlt neue Builder hinzu. Müssen wir uns als Designer oder Webentwickler also Sorgen um unsere Jobs machen? Diese Frage haben wir uns auch gestellt und uns dementsprechend für Webflow als neue Plattform entschieden, um diese auf Herz und Nieren zu testen. Das Fazit einmal vorweggenommen: Die Möglichkeiten ein individuelles Design technisch umzusetzen sind fast grenzenlos, gerade weil der Funktionsumfang von Webflow stetig weiterentwickelt wird. Allerdings bedarf es aufgrund der vielen Möglichkeiten und weil das Tool auf klassischer HTML-Logik basiert, eine etwas längere Einarbeitungszeit und auch wenigstens basic Kenntnisse im Aufbau von semantischen Webseiten. Somit für Kunden eher uninteressant, da keine wirkliche Zeitersparnis – für uns Designer allerdings ein spannendes Tool um schnell mal eben Prototypes zu entwickeln oder um interne Projekte voranzutreiben.  

Die Einarbeitungszeit in ein völlig neues Tool und die technische Umsetzung darin hat unseren Zeitplan mal locker um ein Jahr nach hinten verschoben. Dennoch hat es sich für uns gelohnt, denn die Zeit war nicht verschwendet. Wir haben viel über Frontendentwicklung dazugelernt und können heute noch besser mit unseren Entwicklern über Details sprechen und entsprechende Lösungen entwickeln.