Wie wir eine SaaS-Website erstellt haben, die die Leute tatsächlich verstehen

Vor ein paar Monaten haben mein Team und ich endlich das Projekt in Angriff genommen, das Marketingabteilungen auf der ganzen Welt (einschließlich unserer eigenen) immer wieder aufschieben: Wir haben unsere Website umgebaut.

Und dann sahen wir eine 93%ige Steigerung der Lead-Generierung.

Uns wurde sofort klar, dass wir die Formel für eine SaaS-Site geknackt hatten, die das Unmögliche tut: Sie lässt die Leute tatsächlich verstehen, was unser Unternehmen tut.

Da wir als Marketingkollege einige Jahre gebraucht haben, um hierher zu kommen, wollte ich Ihnen die Mühe ersparen und unseren Prozess teilen.

1. Beseitigung von Hindernissen: Begrenzte Interessengruppen und ein solides MVP

Der größte Nachteil jedes Projekts mit hohem Einsatz sind zu viele Köche in der Küche.

Um diese Falle zu vermeiden, habe ich für jeden Aspekt der Site einen einzigen Stakeholder ernannt – einen für das Design, einen für den Inhalt und einen für das Produkt. Andere Personen hatten die Möglichkeit, Feedback zu geben, aber die endgültigen Entscheidungen wurden ausschließlich von diesen drei Eigentümern getroffen. Dies galt auch dann, wenn Feedback von Personen in leitenden Positionen kam.

Um den extremen Perfektionismus zu bekämpfen, den ich oft bei der Planung von Marketingprojekten gesehen habe, haben wir außerdem unsere Produkterfahrung übernommen und auf eine schrittweise Veröffentlichung mit einem MVP (Minimum Viable Product) und Phasen für jede Seite gedrängt. Dies ermöglichte uns, schneller zu arbeiten, aber es bot auch die Möglichkeit, uns kontinuierlich zu verbessern.

• Rückwärts arbeiten – Beginnen Sie mit einem (realistischen) Veröffentlichungsdatum und arbeiten Sie rückwärts, damit sich alle Teams an den Zeitplan anpassen, anstatt übervorsichtige Schätzungen abzugeben.
• Benennen Sie einzelne Stakeholder – Stellen Sie sicher, dass Sie für jede Domäne einen Stakeholder haben, in unserem Fall also Design, Inhalt und Produkt. Sammeln Sie Feedback im Großen und Ganzen, aber beschränken Sie Entscheidungen auf diese Personen.
• Wählen Sie einen Projekteigentümer – Es sollte einen einzigen Eigentümer für das gesamte Projekt geben. Diese Person ist dafür verantwortlich, Entscheidungen zu treffen, wenn es zu Konflikten kommt (und es wird Konflikte geben).
• Halten Sie nicht nach dem perfekten Produkt Ausschau – Erstellen Sie für jede Seite ein MVP, achten Sie darauf, dass es die Nadel bewegt, und zählen Sie auf eine schrittweise Veröffentlichung.
• Gehen Sie auf die Details ein und reagieren Sie schnell – Verwenden Sie alle Ihre Analyse- und UX-Tools, um die Reaktion auf die von Ihnen veröffentlichten Seiten schnell zu verstehen und darauf zu iterieren.

2. Die wichtigen Kennzahlen: Ziele und KPIs setzen

Eines der ersten Dinge, die wir gemacht haben, war eine Bestandsaufnahme der Probleme, die wir beheben wollten, und uns Ziele für deren Verbesserung zu setzen. Wir haben viele Probleme angegangen: niedrige Conversion-Rate, veraltete Informationen, veraltetes Design, eingeschränkte Erklärung unseres Multiproduktangebots, keine Kundenseite und eine unklare Preisseite.

Wir haben festgestellt, dass die einzige Möglichkeit, eine gründliche Arbeit in angemessener Zeit zu erledigen, darin besteht, die wichtigsten Seiten zu identifizieren , an denen gearbeitet werden muss. Für uns bedeutete dies, sich auf Folgendes zu konzentrieren:

• Die Startseite
• Produktseiten auswählen
• Die Preisseite
• Fallstudienseiten
• Erstellen einer Kundenseite

Dazu gehörte auch der Verzicht auf mehrere Seiten, die wir anpacken wollten, um den Projektstart rechtzeitig zu gewährleisten.

Um den Erfolg zu verfolgen, setzen wir folgende Ziele & KPIs:

• Steigerung der Conversion-Rate in Leads und Verbesserung der Lead-Qualität
• Verbesserung der Absprungrate und Erhöhung der Zeit auf der Website und der Seiten pro Sitzung
• Verbesserung der Markenwahrnehmung
• Erstellen einer besseren Site-Navigation
• Sicherstellen, dass unsere verschiedenen Produkte eine bessere Sichtbarkeit erhalten
• Steigerung des organischen Traffics
• Einfach skalierbare Standortinfrastruktur einrichten

Jedes Unternehmen hat unterschiedliche Ziele und muss unterschiedliche Metriken verfolgen, aber der Prozess der Auswahl der wichtigsten Seiten, an denen Sie zuerst arbeiten möchten, gibt Ihnen einen schnellen und klaren Überblick darüber, was funktioniert und was nicht, bevor Sie Ihre gesamte Website neu erstellen.

• Erfüllen Sie unternehmensübergreifende Anforderungen – Metriken wie Konversionsrate, Absprungrate usw. sind nicht alles. Bitten Sie auch Ihr HR-Team, Ihren Markenmanager, Ihr Vertriebsteam und Ihren CEO um qualitatives Feedback auf der Website.
• A/B-Test – Ja, es scheint offensichtlich, und Sie haben es wahrscheinlich eilig, Ihre neue Site zu veröffentlichen, aber Sie möchten nichts loswerden, was gut funktioniert. Stellen Sie also sicher, dass Sie alles mit einem A/B-Test freigeben und sehen Sie sich die Ergebnisse genau an.
• Legen Sie einen primären KPI fest – Eine einzige primäre Kennzahl hilft Ihnen, Entscheidungen zu treffen, wenn es Konflikte gibt, in unserem Fall war es die Conversion-Rate, um zu führen.
• Release in Phasen – Der Wiederaufbau der gesamten Website auf einmal ist ein Risiko. Beginnen Sie mit kostengünstigen, hochwertigen Seiten, lernen Sie dann Ihren Plan kennen und passen Sie ihn an.
• Aufbau einer Analyseinfrastruktur – Bauen Sie im Voraus eine Messinfrastruktur auf, um sicherzustellen, dass Sie die Auswirkungen auf jeden KPI verfolgen können.

3. Lassen Sie sich inspirieren: Es gibt von jedem etwas zu lernen

Nachdem wir unsere Problembereiche identifiziert, Verbesserungsziele festgelegt und den Umfang des Projekts identifiziert hatten, begannen wir über Layout und Design nachzudenken.

Denken Sie daran, wie viele SaaS-Sites Sie besucht und verlassen haben, ohne eine genaue Vorstellung davon zu haben, was das Unternehmen tut. „Hast du was mit Kundenservice zu tun? Vielleicht E-Mail-Marketing?“ Das wollten wir vermeiden. Also begannen wir damit, herauszufinden, was Besucher brauchen würden, um Yotpo wirklich zu verstehen.

Wir erstellten eine Tabelle, sammelten Inspiration von mehr als 150 anderen Websites, notierten, was uns an jeder gefiel und was nicht und vor allem, ob wir verstehen konnten, was das Unternehmen tut. Wir haben uns Elemente angesehen, die so granular wie eine CTA-Schaltfläche oder so umfassend wie das allgemeine Layout, die Grafik oder der Tonfall sind.

Zum größten Teil haben wir uns Websites von Unternehmen angesehen, mit denen wir nicht vertraut waren, damit unser Test, das Unternehmen zu verstehen, echt war.

• Verpassen Sie nicht Ihren ersten Eindruck – Vergessen Sie nicht, sich beim ersten Besuch einer Website Notizen zu machen. Der erste Eindruck ist entscheidend und, wie man sagt, eine zweite Chance gibt es nicht.
• Machen Sie eine Liste – Sie können von jedem lernen. Erstellen Sie eine Liste mit Websites zur Inspiration. Einige Websites haben ein großartiges Design, einige eine großartige Mikroskopie und andere eine erstaunliche Navigation.
• Nehmen Sie das Unbekannte an – Schauen Sie sich hauptsächlich Unternehmen an, die Sie nicht kennen, um zu sehen, ob ihre Website klar vermittelt, was sie tun.

4. Was kommt zuerst, Design oder Inhalt?

Unser Produkt ist super visuell, so dass Besucher 70% des Produkts verstehen können, ohne auch nur ein Wort zu lesen. Es ging nicht nur darum, den richtigen Slogan zu finden – es ging darum, zu zeigen, anstatt zu erzählen.

Da wir uns bewusst waren, dass die visuellen Darstellungen oberhalb der Falte entscheidend sind, um die Aufmerksamkeit der Benutzer zu erregen, haben wir diesen Raum genutzt, um Modelle unseres Produkts in Aktion zu zeigen. Anstatt dass der Inhalt die Führung für das Design übernimmt, haben wir den umgekehrten Ansatz gewählt, indem wir das Design führen und den Inhalt an der Vision unseres Studios ausrichten.

Unser großartiger Content-Marketer Mel hat das Design-First-Framework verwendet , um die Content-Strategie für die Website zu verfeinern und sich auf das Wesentliche für potenzielle Kunden zu konzentrieren: wie Yotpo ihnen helfen kann. Sie hat recherchiert, um die E-Commerce-Branche und die typischen Schwachstellen vollständig zu verstehen. Dann gestaltete sie die Lösungen in einem schnellen, leicht lesbaren Format, das die Designstruktur ergänzte und gleichzeitig die Benutzer mit umsetzbaren Schritten dazu anregte, mehr über unsere Produkte zu erfahren.

Das Ergebnis sind unkomplizierte, wertorientierte Inhalte, die dem Charakter und der Mission von Yotpo treu bleiben, Marken zum Erfolg zu verhelfen.

• Lassen Sie den Inhalt dem Design folgen – Wenn Ihr Content-Team stark genug ist, um direkt auf den Punkt zu schreiben, beginnen Sie mit dem Design und lassen Sie es gemäß der Zeichenbeschränkung schreiben. Es ist eine Herausforderung, aber auch eine Übung zur Optimierung Ihrer Nachrichten.
• Verstehen Sie, wie Sie Ihr Produkt am besten beschreiben – wenn Ihr Produkt optisch ansprechend ist, heben Sie es mit vielen Modellen und Präsentationsdesign hervor.
• Halten Sie es über dem Faltblatt interessant – Es mag offensichtlich erscheinen, aber die Leute vergessen oft, dass dies auf jeder Seite die wichtigste Immobilie ist. Investieren Sie zusätzliche Gedanken in das, was Sie dort anzeigen.

5. Hinter den Kulissen: Preisseite

Seitenziele:

Es war uns wichtig, unsere Preisgestaltung leicht verständlich zu machen . Wir haben uns entschieden, unsere Premium-Pläne unter einem Dach und unseren kostenlosen Plan unter einem anderen zu gruppieren. Auf diese Weise können Besucher, die sich für unser kostenpflichtiges Abonnement interessieren, problemlos mit dem Vertrieb sprechen, um mehr zu erfahren, und diejenigen, die sich für das kostenlose Abonnement interessieren, können sofort beginnen. Wir wollten auch ein ausführliches FAQ einschließen, um alle Fragen zu beantworten, die Besucher haben könnten.

Unser talentiertes Designstudio – insbesondere unser Art Director Shiri und unser Senior Product Designer Eliko – nahmen diese Ziele und verfolgten sie. In diesem und den folgenden Abschnitten erklären sie die Designstrategie hinter jeder der wichtigsten Seiten der neuen Website.

Designstrategie:

Da das Ziel darin bestand, die Leute dazu zu bringen, die Pläne zu verstehen und anzuklicken, haben wir sie zur obersten Hierarchie gemacht. Der Hintergrund wurde bewusst weicher und heller gestaltet , um nicht von den Plankästen abzulenken. Dennoch haben wir den Hintergrund zum Anlass genommen, Yotpos Marke mit Farbverläufen und subtilen geometrischen Formen darzustellen. Diese allgemeine Struktur, die für die Ziele der Preisseite entwickelt wurde, hat sich als wirklich effektive Grundlage für andere Seiten der Site erwiesen.

6. Hinter den Kulissen: Produktseiten

Seitenziele:

Jede der in die Neugestaltung einbezogenen Produktseiten, also Reviews & Ratings und Visual Marketing, sollte alle Funktionen eines superkomplexen Produkts so erklären, dass man sie innerhalb weniger Sekunden versteht. Darüber hinaus wollten wir die unterschiedlichen Anwendungsfälle für jedes Produkt aufzeigen. Auf der Seite "Rezensionen & Bewertungen" bedeutete dies beispielsweise, alle Aspekte von der Funktionsweise der Inhaltserstellung bis hin zur Integration mit Google und Facebook zu erklären. Obwohl die Seite lang und umfassend ist, enthält sie wenig Text und viele visuelle Elemente.

Designstrategie:

Wir haben schnell festgestellt, dass Modelle unserer Produkte im Einsatz der einfachste Weg sind, um den Besuchern ihre Funktionsweise näher zu bringen. Während wir ursprünglich Video verwenden wollten, blieben wir beim MVP, um die ersten Versionen der Seiten rechtzeitig herauszubringen.

Basierend auf dem, was wir aus der Gestaltung der Preisseite gelernt haben, wussten wir, dass wir den Hintergrund heller und leiser machen und gleichzeitig die Betonung auf den Mockups, insbesondere den Over-the-Fold-Mockups, belassen. Die Mockups sind auch in einer vereinfachten Designsprache erstellt, um sie leicht verdaulich zu machen.

Das Mockup-First-Design beantwortet eine Reihe anderer praktischer Bedenken. Erstens sind die Mockups von Natur aus mobilfreundlich, sowohl aufgrund ihrer Größe als auch aufgrund ihrer Fähigkeit, viele Informationen in einem minimalistischen Format zu vermitteln. Im Allgemeinen zwingt Sie das Designen mit Blick auf Mobilgeräte zu überlegen, was notwendig ist und was nicht, und dies galt sicherlich für die Mockups. Darüber hinaus ist dieses Format auch für zukünftige Produktseiten leicht skalierbar, wenn unser Angebot wächst.

7. Hinter den Kulissen: Kundenseite

Seitenziele:

Neu auf unserer Seite war die Kundenseite. Wir waren auf der Suche nach einer effektiven Möglichkeit , die großartigen Marken, die Yotpo verwenden, zu präsentieren und unsere Fallstudien zu aktualisieren und ein neues Zuhause zu schaffen. Die wichtigsten Elemente auf dieser Seite sind die Markenlogos und die neuen Video-Fallstudien, die wir zur Einführung erstellt haben.

Designstrategie:

Wir wollten erzählen, wie diese Marken mit Yotpo gewachsen sind, aber auch, wie wichtig nutzergenerierte Inhalte insgesamt sind. Das Hauptstück für das Erzählen dieser Geschichten sind Kundenlogos und die Video-Fallstudien, die jeweils einen erheblichen Platz auf der Seite einnehmen. Darüber hinaus haben wir die neue Fallstudienvorlage, die in diese Seite eingebettet ist, so flexibel wie möglich erstellt, damit sie die einzigartige Geschichte jeder Marke erzählen kann, anstatt nur ausstechende Fragen und Antworten aufzunehmen.

8. Hinter den Kulissen: Startseite

Seitenziele:

Ziel der Homepage war vor allem, dass die Besucher schnell und einfach verstehen, was Yotpo macht, bevor sie nach unten scrollen. Außerdem wollten wir sowohl unser Multiproduktangebot vorstellen als auch unser größtes Kapital – unsere Kunden – präsentieren. Schließlich sollte die Homepage als Einstiegsseite dienen, die die Besucher neugierig machte, mehr über unsere Produkte zu erfahren.

Um sicherzustellen, dass wir diese Ziele erreichen, haben wir Kollegen vor anderen SaaS-Homepages gesetzt und sie beim Navigieren auf der Seite gefragt, welches Element sie als nächstes sehen möchten. Basierend auf ihren Antworten haben wir verstanden, dass die meisten Benutzer von einer Homepage Folgendes benötigen:

Designstrategie:

Unsere größte Herausforderung für die Homepage war es, die Aufmerksamkeit der Besucher auf Anhieb zu erregen. Unsere Recherchen haben uns gezeigt, dass viele SaaS-Sites heute hübsche Illustrationen verwenden, um Besucher anzulocken – aber wir wollten etwas Substanzielleres, um die Besucher bei Laune zu halten.

Wir haben den oben beschriebenen Ablauf und die Designsprache, die wir auf den Preis- und Produktseiten verfeinert hatten, verwendet , um die Aufmerksamkeit der Besucher mit minimalistischen Modellen zu erregen , die ein sofortiges Verständnis dafür vermitteln, was Yotpo tut. Es folgt ein Kundenlogostreifen über dem Falz und dann eine schnelle und punktgenaue Übersicht über unser Produktangebot, die die Besucher auf die Produktseiten führt. Da der Großteil der Mockups oben liegt, konnten wir Illustrationen verwenden, um den Inhalt unten zu unterstützen.

Das Gesamtergebnis ist eine Seite, die eine Art „Powershot“ oder eine Vogelperspektive des Produkts bietet und Besucher dazu anregt, auf den Produktseiten fortzufahren, um mehr zu erfahren.

Unser Tech-Stack

Wir haben jedes uns zur Verfügung stehende Werkzeug verwendet, um die neue Site zu erstellen und die Ergebnisse zu messen. Hier ist ein Blick in unseren Tech-Stack:

• Prototyping & Design – Balsamiq, InVision, Sketch, Photoshop, Illustrator und After Effects
• Analytics & Conversion – Drift, VWO, Mixpanel, Amplitude, Hotjar, FullStory
• Projektmanagement – ​​Smartsheet, Trello

Wenn es um die Entwicklung geht, hat unser Entwicklerassistent David mit unserem Designteam zusammengearbeitet, um die Site zum Leben zu erwecken. Er verwendete auf der gesamten Site wiederverwendbare Komponenten und legte Wert auf scharfe Grafiken, indem er Retina-Bilder für fast alle Bilder einfügte und sich nach Möglichkeit für SVG (skalierbare Vektorgrafiken) gegenüber PNG-Dateien entschied. Er arbeitete auch hauptsächlich in SCSS, um Zugang zu mehr Optionen bei der Entwicklung der Site zu erhalten.

Fazit

Der Wiederaufbau einer Website ist ein großes Unterfangen, aber wenn Sie einen soliden Prozess haben, können Sie ihn schnell und effektiv durchführen. Die wichtigsten Dinge, die wir beim Aufbau dieses Prozesses gelernt haben, waren:

1. Ernennen Sie einen einzigen Projektverantwortlichen und beschränken Sie die Stakeholder auf ein Minimum.
2. Definieren Sie einen realistischen Umfang für das Projekt.
3. Bewerten Sie, welche Seiten entfernt statt neu gestaltet werden sollten.
4. Setzen Sie klare Ziele und KPIs.
5. Wählen Sie einen einzelnen primären KPI aus.
6. Sammeln Sie Inspiration von anderen Websites.
7. Verstehen Sie die einfachste und effektivste Art, Ihr Produkt zu erklären.
8. Führen Sie mit Design, wo immer es möglich ist. Inhalte können folgen und werden dafür stärker.
9. Gehen Sie für eine schrittweise Freigabe.
10. A/B-Teste alles.

Wenn Sie mehr über die Neugestaltung unserer Website erfahren möchten oder Fragen zu dem haben, was ich hier geschrieben habe, können Sie sich gerne hier melden. Ich würde gerne chatten. :)