Wie hat tonik die Website von Voucherify neu gestaltet?

Schnelles Wachstum ist Fluch und Segen eines jeden schnell wachsenden Startups. Wenn regelmäßig neue Funktionen eingeführt werden und sich der Zielmarkt ändert, kann eine Website, die erst im Jahr zuvor veröffentlicht wurde, bereits veraltet sein.

Es ist ein großartiges Zeichen, aber es ist ebenso ärgerlich, wenn Ihre Besucher nicht sehen können, was Sie vorhaben. Wenn du deine Website nicht aktualisierst, werden sie dich basierend auf dem veralteten Pitch beurteilen.

Anfang 2021 hatte Voucherify mit ähnlichen Problemen zu kämpfen. Die Website erklärte das Produkt nicht gut, die Animationen waren sehr abstrakt und standen in keinem Zusammenhang mit dem Produkt, und der Stil und das Branding sprachen den unternehmensorientierten, technisch versierten Kundentyp, den sie erreichen wollten, nicht an. Die Pastellfarben, abstrakten Illustrationen und die karikaturartige Figur eines Bergmanns reichten nicht aus, um die Leute in den Anzügen zum Lachen zu bringen.

Zweitens fühlte sich die Website eher zusammengehackt als sorgfältig gebaut an. Kleinere Ungereimtheiten, fragwürdige Interaktionen und mangelnder Gesamtfluss schienen bei getrennter Betrachtung keine große Sache zu sein – aber zusammen sorgten sie für einen schlechten ersten Eindruck.

Die Herausforderung

Voucherify hat sich an uns gewandt, um ihnen zu helfen, ihre Website neu zu gestalten – damit sie die Zielgruppe anspricht – und ein Designsystem zu erstellen, damit das Team selbst mehr Zielseiten starten kann. Aber warte, wer sind wir ?

Wir sind tonik, ein digitales Designstudio. Meistens arbeiten wir mit Startups in der Frühphase zusammen, um ihnen bei der Einführung ihrer MVPs zu helfen, aber das bedeutet nicht, dass wir nicht mit etablierteren Unternehmen zusammenarbeiten. Kunden wie Segment, Auth0 oder Chronosphere bestätigen unsere Fähigkeit, uns in ein bestehendes Team einzufügen.

Für dieses Projekt haben wir die Kräfte von zwei Designern – Mikolaj Biernat & Mikolaj Szymkowiak – und Aga Kaczmarek, die die Arbeit als Projektmanager leitete, vereint. Mit einer gesunden Vorliebe für Agilität von beiden Teams haben wir uns keine harten Fristen gesetzt, sondern wollten das Projekt in ein paar Monaten abschließen. Also, wo haben wir angefangen?

Der Designprozess

Bevor wir uns die Hände schmutzig gemacht haben, haben wir den Designprozess skizziert, um zu definieren, welche Designmethoden wir verwenden, um das Ziel zu erreichen. Es hat uns auch geholfen, den Zeitplan des Projekts, die Anzahl der Iterationen und die Menge an Feedback einzuschätzen, die wir vom Kunden in jeder Phase benötigen. Hier ist, was wir uns ausgedacht haben.

Erstellen der Informationsarchitektur

Wir begannen mit der Erstellung einer Informationsarchitektur (IA). Es ist ein Diagramm, das die Beziehung zwischen allen Unterseiten (und manchmal auch ihren Inhalten) zeigt, was es einfach macht, sich die Navigation vorzustellen. Wenn wir an einem Website-Redesign arbeiten, verwenden wir IA, um den Inhalt zu verstehen und den Umfang eines Projekts zu visualisieren.

Für die richtige Stimmung sorgen

Kunden haben oft eine Vorstellung davon, wie ihre neue Website aussehen soll. Der perfekte Zeitpunkt für die Gestaltung ist, wenn wir das Moodboard des Projekts erstellen. Es ist eine Sammlung von visuellen Referenzen, die wir verwenden, um uns an dem Look & Feel auszurichten, nach dem wir suchen. Das Beste daran ist, dass wir keine Zeit mit der Suche nach den richtigen Adjektiven verschwenden – Screenshots von Benchmarks funktionieren tausendmal besser.

Die Blaupause

Neben der rein optischen Neugestaltung wollte das Team von Voucherify die Inhalte auf den wichtigsten Seiten aktualisieren. Was Sie auf Ihrer Website sagen, ist viel wichtiger als die Art und Weise, wie es präsentiert wird. Deshalb haben wir zunächst mit Wireframes gearbeitet, um das richtige Layout für die Inhalte zu finden. Sie können sie als Blaupause der Website betrachten. Sie verwenden keine Farben, Grafiken oder andere visuelle Effekte, sodass es einfacher ist, sich auf die Grundlagen zu konzentrieren.

Ein schneller Nebenjob – das Logo aufwerten

Als wir anfingen, die Wireframes mit den richtigen Farben und Schriftarten zu iterieren, erkannten wir eine Chance für einen schnellen Gewinn für Voucherify als Marke. Ihr Logo – seine Typografie, um genau zu sein – fühlte sich unausgeglichen an. Wir haben es ein wenig optimiert, um die Lesbarkeit zu verbessern, ohne das gesamte Branding neu zu erfinden.

Das Gesamtbild – die endgültigen Entwürfe

Dank all der Bewertungen, die wir zuvor durchgeführt haben, fügte sich schließlich alles zusammen. Die Website von Voucherify wurde mit der neuen visuellen Sprache neu gestaltet. Es ist erwähnenswert, dass wir, anstatt hinter verschlossenen Türen an den endgültigen Designs zu arbeiten, eng mit dem Webflow-Entwickler von Voucherify, Piotr, zusammengearbeitet haben, der jede Unterseite iterativ lieferte, während wir ihr Design fertigstellten. Auf diese Weise konnten wir auf Probleme reagieren, auf die wir unterwegs gestoßen sind, und das Projekt schneller starten als in einem Silo zu arbeiten.

Bauen der LEGOs – Vorbereiten eines Designsystems

Parallel zum Redesign arbeiteten wir am Designsystem der Website. Das Ergebnis enthielt eine Reihe von Bausteinen und Richtlinien zu ihrer Verwendung, damit jeder im Marketingteam von Voucherify eine Zielseite entwerfen (aus fertigen Komponenten erstellen) konnte. In einer Start-up-Realität bewegen sich die Dinge schnell und Sie brauchen Werkzeuge, um Ihre Pläne schnell und effizient umzusetzen – das Designsystem musste damit einhergehen.

Jedes Designelement – ​​von bescheidenen Token mit Informationen zu Farben, Schriftarten und Schatten bis hin zu ganzen Abschnitten – wurde sorgfältig entworfen, um für eine Vielzahl von Inhalten skalierbar zu sein. Dank der Leistungsfähigkeit von Figma – unserem bevorzugten Designtool (zumindest zum Zeitpunkt des Schreibens) – sind alle Elemente mühelos per Drag-and-Drop verfügbar.

Die Ergebnisse des Projekts

Was haben wir am Ende?

Webflow-basierte Website

Natürlich haben wir die Website nicht selbst entwickelt – sie wurde von Piotr Gacek, dem Frontend-Entwickler von Voucherify (großartige Arbeit!) – gemacht, aber es wäre nicht fair, eine Designdatei als Ergebnis unserer Zusammenarbeit aufzulisten. Schließlich ist eine Website ein interaktives Stück im Internet – kein statisches Bild. Dank Webflow konnte das Voucherify-Team es in kürzester Zeit erstellen.

Designsystem

Das von uns erstellte Designsystem ist nicht nur eine Designbibliothek, die wir verwendet haben, um den Ideenfindungsprozess zu beschleunigen. Um die Konsistenz zwischen den Teams zu gewährleisten, replizierte Piotr die Komponenten in Webflow. Auf diese Weise könnte Voucherify in Zukunft nahtlos weitere Zielseiten erstellen. ‍

Marketing-Assets

Wir legen besonderen Wert auf visuelle Elemente wie Illustrationen oder Symbole, damit sie in verschiedenen Kontexten funktionieren. So lebt die neue Bildsprache nicht ausschließlich auf der Website. Andere Marketingmaterialien wie E-Books beziehen die Schlüsselelemente aus derselben Designbibliothek.

„Ich war der Projektmanager auf der Voucherify-Seite für dieses Redesign. Ich habe es wirklich genossen, mit tonik als unserer Designagentur zusammenzuarbeiten. Sie haben auf agile, iterative Weise gearbeitet, bei der wir uns in jeder Phase des Designs einbringen und die Effizienz unserer Zusammenarbeit. Sie waren immer offen für Kritik und erstellten neue Versionen des Designs so oft, wie wir sie darum gebeten hatten. Sie waren normalerweise erreichbar und antworteten schnell. Wöchentliche Besprechungen und tägliche Zusammenfassungen, die über Slack gesendet wurden, sowie ein Tracking-Diagramm gab mir ein sehr klares Bild vom Fortschritt der Arbeit und prognostizierte Zeitpläne des Projekts. Ich schätze die Transparenz, Klarheit und Offenheit ihres Teams sehr. Wir sind sehr zufrieden mit dem endgültigen Design der Website. Das Designsystem hat bereits geholfen Wir haben ein paar neue Zielseiten zusammengestellt und fast hundert Werbemodelle erstellt. Es ist wirklich einfach zu verwenden, selbst für Nicht-Entwickler." – Katarzyna Banasik, Produktmarketing-Managerin bei Voucherify.

Was kommt als nächstes?

Einen erfolgreichen Start später gingen wir eine Partnerschaft mit Voucherify ein, um sie und ihre Kunden bei allem digitalen Design zu unterstützen, wobei wir uns auf Produkte und Branding konzentrierten. Lesen Sie die vollständige Ankündigung, um mehr zu erfahren.