Das Redesign der Greyd Webseite und des Helpcenters

Was hat euch dazu bewogen, die Greyd-Website zu relaunchen?

Wir bekommen bei persönlichen Demos immer wieder Feedback darüber, wie großartig unser Produkt ist. Aber man sagte uns auch, dass man unser Produkt auf unserer alten Website nicht wirklich direkt verstehen konnte. 

Im Laufe der Jahre wurde die Anzahl der Funktionen in unserer Suite erweitert. Demzufolge haben wir nach und nach mehr Seiten und Abschnitte hinzugefügt. Ich denke, das ist etwas, das viele Softwarehersteller bei erfolgreichem Wachstum erkennen. Das Messaging auf unserer vorherigen Website war verbesserungsbedürftig.

Was sind die wichtigsten Änderungen, die ihr am Frontend vorgenommen habt?

Das visuelle Design an sich ist nur ein Teil einer ganzen Liste von Dingen, die wir im Vergleich zur alten Seite anders gemacht haben.  Wir haben unsere Homepage komplett überarbeitet und sie so umstrukturiert, dass jeder, der nach unten scrollt, schnell erfassen kann, was Greyd.Suite zu bieten hat. 

Das Menü wurde vereinfacht, die Schriftarten wurden vergrößert – alles Schritte zu einer besseren Benutzerfreundlichkeit und Barrierefreiheit unserer Seite.

Und, auch nicht ganz unwichtig, jetzt haben wir ein Demo Video auf unsere Seite. Der zeigt in kürzester Zeit, was die Greyd.Suite zu bieten hat.

Das ganze Design ist wesentlich ruhiger, was waren dabei deine Gedanken?

Ich wollte die verschiedenen Gestaltungselemente, die wir bisher hatten, reduzieren, um einen klareren Look anzubieten, der weniger abhängig von einer Icon-Sprache ist. Hauptaugenmerk sollte auf der Typografie und dem Umgehen mit Abständen sowie Spaltenmaßen liegen, um es wesentlich klarer zu machen. Ein wichtiges Ziel war auch, das Thema Kontraste zu verbessern, insbesondere in Richtung Barrierefreiheit in der UI. Die Schriften auf der alten Webseite waren definitiv zu klein, auch das musste angegangen werden. Es ging darum, die Lesbarkeit und die Scannbarkeit des Interfaces zu verbessern.

Du hast das neue Block-Theme (Greyd Theme) verwendet. Hat das den Prozess für dich vereinfacht?

Definitiv. Mit unserem neuen Theme konnte ich mein Designsystem besser integrieren und anpassen. Beispielsweise konnte ich das Spacing global anpassen, um mehr Unterscheidungsmöglichkeiten in meinen Abständen zu schaffen. Auch in der Farbgestaltung konnten wir unsere Palette flexibler gestalten. Ein weiterer Vorteil war, dass ich mein CSS direkt im Backend sehen und bearbeiten konnte, anstatt immer ins Frontend wechseln zu müssen. Das erleichterte die Gestaltung enorm und erlaubte es mir, mehr auf grafische Patterns in CSS zu setzen, was wiederum weniger Server-Abfragen bedeutete. Sitespeed ist nicht nur wichtig für SEO, es ist Teil der Sustainability.

Hat die Beschäftigung mit Barrierefreiheit deinen Designprozess beeinflusst?

Ja und nein. Einerseits habe ich im Design grundsätzlich bewusster auf Farbkontraste und Schriftgrößen geachtet. Andererseits gab mir das Wissen, eine barrierearme Webseite zu bauen, eine gewisse Entspanntheit, da ich wusste, dass die technische Basis sauber ist. Ich musste mir keine Sorgen machen, dass ich bei Standardsituationen sofort in Barrierefreiheitsthemen hineinlaufe. Das gab mir als Designer ein Stück weit Sicherheit.

Was hat sich im Designprozess geändert?

Alles hat sich geändert. Eine Webseite ist ein lebendiges Objekt, das wächst und sich verändert. Ich musste darauf achten, dass es nicht zu einem Wildwuchs kommt. Ein großer Schwerpunkt lag auf der Automatisierung, sowohl auf der Greyd Seite als auch in unserem Helpcenter. Einmal ein Designsystem und Patterns etabliert, konnte ich mich auf die Backend-Architektur konzentrieren.

Welche technischen Highlights würdest du hier hervorheben?

Nach langer Zeit die volle Skala der Möglichkeiten von unserer Suite diesmal für unser eigene Website einzusetzen, ist schon ein Highlight an sich.  Dass wir bei dem Neubau von all unseren neuen Funktionen und Features profitieren könnten, die zwischen der Zeit, als wir unsere vorherige Website gebaut haben, und diese Website angefangen haben, hinzugekommen sind. Und dabei unser neues Block-Theme zu verwenden, das war ein großer Wunsch, den ich dann jetzt in Erfüllung gehen lassen konnte.

Content Management ist Overhead. Mit unserer Suite haben wir die Möglichkeit, die Komplexität und den Zeitaufwand für die Personen zu reduzieren, die unsere Inhalte verwalten. Mit Funktionen wie globalen Taxonomien, womit man Relationships zwischen Post Types herstellen kann, wird sichergestellt, dass Informationen nur an einer Stelle eingegeben werden müssen, anstatt sie an zwei oder drei Stellen manuell zu aktualisieren. Und wir nutzen jetzt ausgiebig die Möglichkeit, benutzerdefinierte Patterns und unsere dynamischen Vorlagen zu erstellen, damit niemand aus Versehen ein Layout kaputt macht. Dies spart viel Overhead und hält die Webseite im Betrieb schnell und einfach.

Hast du ein konkretes Beispiel?

Unsere Feature-Seite ist ein schönes Beispiel. Sie bietet auf Anhieb einen Überblick. Dafür haben wir einen Post Type, der zwei Seiten befüllt. Ist die Taxonomie “noch nicht released” wird das Feature auf der Roadmap Seite gezeigt. Wechselt man die Taxonomie auf “released” wird es dort automatisch entfernt und landet auf der Feature Seite.

Was hat sich im Helpcenter geändert?

Wir haben uns viele Gedanken darüber gemacht, wie wir auch hier nur von eine Stelle aus die Inhalte pflegen könnten. Du kannst Websites mit der Greyd .Suite bereits wie ein Headless CMS nutzen. Mit Global Content kannst du Inhalte global speichern und sie mit mehreren Websites verknüpfen. Aber es stellte sich schon länger die Frage: „Was ist mit externen Inhalte?“ Wir haben eine Headless API entwickelt, und unser neues Helpcenter ist das erste Ergebnis davon. 

In unserem Helpcenter haben wir eine direkte Verbindung zu HelpScout, der Software, die wir für den Kundensupport nutzen, mittels dieser API hergestellt. Tutorials und Dokumentation werden in HelpScout gespeichert und wir können sie als Beiträge automatisch anzeigen. Das heißt, dass wir diese Beiträge nicht an zwei verschiedene Stellen pflegen müssen.

Meinst du nicht auch das man sich “Overhead reduzieren als Herausforderung im Redesign” als Titel überlegen könnte für dieses Interview?

Haha, ja, ich verstehe, worauf du hinauswillst. Ich kann es ja nur wiederholen, so wie ich es auch immer in den Demos tue. Ein starker Aspekt der Greyd.Suite ist die Möglichkeit, sehr viel zu automatisieren. Unsere starken Filtermöglichkeiten in Queryloops, sowohl auf normalen Seiten als bei der Darstellung von Suchresultaten zum Beispiel, und Features wie Conditional Content und, ich wiederhole es gerne noch mal, die Möglichkeit auch Post-Type übergreifende Taxonomien einzusetzen. Damit macht man die Arbeit für alle, die Inhalte pflegen, leichter. Es war Zeit, dass wir es bei uns auch so integrierten!