Gestaltung und Implementierung der Marketing-Website unseres Unternehmens: Meine Reise vom Inhalt zur Umsetzung

Falls du ein Logto-Benutzer bist, ist dir vielleicht aufgefallen, dass die Website unseres Unternehmens kürzlich aktualisiert wurde. Falls nicht, besuche die Website logto.io und rate, wie viel Aufwand wir betrieben haben, um dies zu verwirklichen.

Du könntest denken, wollt ihr etwa selbst bewerben, dass es ein enormer Arbeitsaufwand, Mühe und sorgfältiges Design erfordert, nur um eure Exzellenz in der Umsetzung zu zeigen?

Nein!

Im Gegenteil, wir möchten zeigen, wie clever wir Werkzeuge und Methoden nutzen, um die Qualität unseres Produkts zu verbessern und unseren Nutzern die besten Produkte und Dienstleistungen zu bieten.

Wir haben positives Feedback aus unserer Community erhalten und fragen uns, wie wir das geschafft haben. Diese Runde von Updates ist anders, weil wir einen völlig neuen Workflow in einem sich schnell bewegenden Umfeld neu erfunden haben. Wir möchten unsere Best Practices vorstellen und auch einen genaueren Blick auf unsere Teamarbeit und Kooperationskultur werfen.

Der Hintergrund#

Wir sind ein Tech-Team, das sich auf die Bereitstellung einer Vielzahl von Services und Infrastrukturanwendungen im Zusammenhang mit Kundenidentitäten konzentriert. Der Druck zur Lieferung ist beträchtlich. Gleichzeitig müssen wir verschiedene Storytelling- und operationale Aufgaben unterstützen, wie das Erstellen von gebrandeten Marketing-Websites, das Schreiben von Blogs, die Förderung unserer Projekte und die Interaktion mit unseren Nutzern.

Eine überzeugende Landing-Website ist entscheidend, da sie oft den ersten Eindruck von deinem Produkt vermittelt, das den Nutzern hilft, die Probleme zu verstehen, die dein Produkt löst, einschließlich Preisgestaltung und bemerkenswerte Kunden als sozialen Beweis.

Darüber hinaus kann sie mehrere Geschäftsziele erfüllen:

• Präsentiere die Marke und den Wert deines Produkts.
• Gewinne Leads.
• Diene als Content-Hub, besonders wichtig für ein Unternehmen, das auf produktspezifisches oder entwicklerorientiertes Wachstum setzt.
• Biete einen Ort zur SEO-Optimierung, zum Erwerb von Nutzern und zur Verfolgung des regelmäßigen Traffic.

In meinem vorherigen Job war ich bereits in ein Website-Projekt involviert. Sehen wir uns an, wie ein typischer Workflow aussieht:

1. Zuerst definieren Produktmarketing-Manager und Produktmanager den Inhalt und die Anforderungen.
2. Produktdesigner und ein UX-Writer verfeinern den Inhalt.
3. Wir übergeben die Arbeit, die normalerweise eine Low-Fidelity-Version ist, an visuelle und Branding-Designer für den letzten Schliff vor der Produktion.
4. Ingenieure und Produktmanager beginnen dann mit der Umsetzung, wobei sie sich auf Animation und responsives Webdesign konzentrieren.

Dieser Prozess ist mühsam und erfordert viele Leute und Stakeholder, was ihn für ein sich schnell bewegendes Umfeld ungeeignet macht.

Selbst wenn wir zunächst nur zwei Personen für die Wartung haben—einen Produktdesigner und einen Ingenieur—erfordern die Aufgaben des Web-Performance-Managements, das Hochladen von Bildern, das Sicherstellen des Responsive Designs, das Bearbeiten von Bildformaten und das Aktualisieren von Inhalten immer noch viel hin und her Kommunikation.

Dieser Workflow ist ineffizient. Ich denke ständig darüber nach, wie ich Entwicklungsressourcen freisetzen kann, damit sie sich auf die Kernproduktarbeit konzentrieren können, während ich den Rest verwalte.

Die Nutzung von Tools zur Steigerung der Produktivität ist eine Schlüsselphilosophie unseres Teams. Deshalb habe ich begonnen, nach Tools zu suchen, die helfen, diese Prozesse zu optimieren.

Die Bedürfnisse aufschlüsseln#

Um eine erfolgreiche SaaS-Marketing-Website zu entwickeln, lass uns die wesentlichen Elemente aufschlüsseln, die benötigt werden:

1. Inhalt: Die Grundlage jeder Marketing-Website ist zu wissen, was genau präsentiert werden soll. Dies erfordert ein tiefes Verständnis deiner Zielkunden, ihrer typischen Anwendungsfälle und des Wertversprechens deines Produkts. Kein Tool kann dieses Verständnis ersetzen. Zum Glück bin ich durch meine Beteiligung an Produktdesign und Markteinführungsstrategien gut gerüstet, um Inhalte zu erstellen, die den Bedürfnissen der Nutzer entsprechen.
2. Design: Die Website sollte eine gepflegte und elegante visuelle Gestaltung haben. Mein Hintergrund im UX-/Produktdesign, obwohl nicht so umfangreich wie der eines speziellen Kreativdesigners, befähigt mich, diesen Aspekt kompetent zu bewältigen.
3. Technik: Wichtige technische Überlegungen umfassen das Hosting der Website, das Sicherstellen von Responsive Design und das Ermöglichen reibungsloser Mikrointeraktionen. Es ist auch entscheidend, die Website nahtlos mit anderen Komponenten zu integrieren, wie z. B. Link-Weiterleitungen und der Authentifizierungsseite des Produkts.

Nach einiger Recherche, hier ist das Toolset, das ich für die Design-Aspekte verwenden möchte:

Produkt- und Marketing-Inhalt#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper oder ähnliche KI-Anwendungen als Copilot.

Dies dient der Feinabstimmung und Optimierung meiner Marketinginhalte und -nachrichten. Es ist wichtig, klar über das Ziel und die Absicht dahinter nachzudenken. KI ist nur ein Copilot, kein Entscheidungsträger. Bevor ich eine Marketingnachricht schreibe, stelle ich mir einige Fragen:

1. Wer wird die Nachricht lesen?
2. Benötigen sie zusätzliche Kontexte?
3. Was ist der Hauptpunkt, den du in der Nachricht ansprechen möchtest?
4. Was erwartest du, dass der Nutzer als nächsten Schritt unternimmt?
5. Soll diese Nachricht bilden oder eine bestimmte Handlung auslösen?
6. Hat dies das Potenzial, irreführend oder übertrieben zu erscheinen?

Dann schreibe ich einen ersten Entwurf der Punkte, die ich kommunizieren möchte.

Manchmal kann KI Wörter einführen, die veraltet erscheinen oder deine ursprüngliche Absicht so verdrehen, dass sie logisch korrekt erscheint. Du musst jedoch deine Absicht erneut betonen und an deinen Zielen festhalten. Du musst Standards festlegen, um sicherzustellen, dass die an das Publikum übermittelten Worte klar, einfach, prägnant und transparent sind. Dies ist besonders wichtig in unserem Produktbereich, der viele Unternehmen und Entwickler bedient.

Design#

Figma, Framer für Interaktion und visuelles Design sowie Animation und Prototyping

Ich habe einen Hintergrund im Design, hauptsächlich im Produktdesign, das die Gestaltung von UI und UX umfasst. Während das Design von polierten UIs für mich keine Herausforderung darstellt, ist meine Arbeit nicht so raffiniert wie die eines Profis. Mit einigen grundlegenden visuellen Design- und Illustrationsfähigkeiten und durch die Wahl der richtigen Werkzeuge kann man jedoch die Qualität seiner Arbeit verbessern. In diesem kreativen Prozess verwende ich Framer und Figma.

Dies ist unser altes Design, das vollständig von Figma erstellt wurde

Unser ursprüngliches Design wurde in Figma erstellt. Ich verwendete das offizielle Framer-Plugin „Framer to HTML“, um das Grunddesign in Framer zu kopieren und einzufügen, was einen guten Startpunkt bot.

Der nächste Schritt ist das Design. Wenn du Figma zuvor verwendet hast, ist der Übergang zu Framer ein reibungsloser Prozess, da das Benutzererlebnis insgesamt sehr ähnlich ist. Ich werde einige interessante Interaktionen hervorheben, die die Produktivität erheblich steigern.

Layout#

Figma-Nutzer schätzen das Auto-Layout, weil es viel Zeit spart, Elemente zu layouten und zu platzieren. Die Layout-Funktionen in Framer sind jedoch noch intelligenter und passen besser zu einem Front-End-Mindset. In Framer kannst du wählen, ob du ein Raster- oder Stapel-Layout verwenden möchtest, die Spalten definieren, eine maximale Breite festlegen, und es wird bei Bedarf automatisch in eine andere Reihe umwickeln. Diese Funktionalität verbessert den Designprozess, indem sie besser widerspiegelt, wie sich Elemente in einer Live-Web-Umgebung verhalten werden.

Breakpoints für Responsive Design#

Durch das clevere Einrichten von Breakpoints und Breiten-Einstellungen (wie Füllen, Fest, Relativ und An den Inhalt anpassen) und das Definieren verschiedener Leinwände kannst du leicht und genau verschiedene Responsive Designs erreichen. Dieser Ansatz ermöglicht es dir, das Layout effizient an unterschiedliche Bildschirmgrößen und Geräte anzupassen.

Animation#

Framer bietet eine Vielzahl vorgefertigter Animationen, einschließlich einer Ticker-Animation, die wir auf unserer Website ausgiebig verwenden, um unsere Arbeit zu präsentieren. Du kannst die Komponente einrichten und in dieses Widget einbetten. Es ermöglicht dir, verschiedene Konfigurationen wie Geschwindigkeit, Richtung, Polsterung und mehr zu definieren, was dir Flexibilität und Kontrolle darüber gibt, wie die Animation auf deiner Website funktioniert.

Eine weitere nützliche Funktion in Framer ist die Fähigkeit, Scroll-Animationen anzupassen. Zum Beispiel kannst du festlegen, wie Elemente erscheinen, wenn sie beim Scrollen in den Blick kommen. Das Einrichten deiner Scroll-Animation ermöglicht es dir, das Timing und den Stil der Anzeige von Elementen zu steuern, was das Benutzererlebnis und die Interaktion mit deinem Inhalt verbessert.

Schnelles Veröffentlichen#

Eine meiner wichtigsten Anforderungen ist die Fähigkeit, Folgendes zu tun:

1. Schnell mehrere Landing-Pages erstellen für SEO-Optimierung und Marketing-Kampagnen. Geschwindigkeit ist ein Muss.
2. Inhalte häufig selbst aktualisieren. Deine Produkt-Landing-Page spiegelt die neuesten Entwicklungen und deine aktuelle Produktpositionierung wider. Veraltete Inhalte bedeuten verpasste Marktchancen und das Nichtberücksichtigen der aktuellen Bedürfnisse deiner Kunden.

In meinem vorherigen Workflow, wenn ich irgendwelche Inhalte aktualisieren musste, musste ich entweder einen Ingenieur darum bitten oder selbst einen Pull Request einreichen. Unser Entwicklungsteam folgt einem strengen Prozess, um die Codequalität sicherzustellen, was zeitaufwändig sein kann und meine Fähigkeit einschränkt, schnelle Änderungen vorzunehmen.

Framer hat dieses Problem für mich gelöst. Jetzt, wann immer ich eine Änderung vornehme und auf Veröffentlichen klicke, wird sie sofort live in der Produktion reflektiert. Diese Fähigkeit hat den Prozess erheblich erleichtert, was schnelle Updates und mehr Autonomie bei der Inhaltsverwaltung ermöglicht.

Technik#

Da es von Framer gehostet wird, ist keine Implementierung oder technischer Aufwand unsererseits erforderlich. Unsere Ingenieure brauchten nur etwa 10 Minuten, um es in den Rest unserer Website zu integrieren.

Unsere aktuelle Website besteht aus 20-30 Seiten; einige werden mit Framer entwickelt, während andere auf traditionellem Softwareentwicklungsweg erstellt werden. Wir sind dabei, die besten Werkzeuge für die Pflege unserer Seiten auszuwählen. Zum Beispiel, für Entwicklerdokumentationen, die sich mit Framer schwer verwalten lassen, ist es die optimale Wahl, ein entwicklerfreundliches Dokumentations-Framework zu verwenden, um deine Inhalte zu hosten. Zukünftig werden wir unsere Bedürfnisse bewerten und entscheiden, ob wir weiterhin auf eigene Faust hosten oder vollständig auf Framer umsteigen.

Wie es unseren Workflow verändert hat#

Wir haben unseren Workflow vollständig transformiert und die Erstellung von Marketing-Websites völlig mühelos gemacht. Es ist zuverlässig, wartbar und hochgradig effizient.

Ich habe diesen Blog geschrieben, um Best Practices zu teilen. Wenn du Erfahrungen mit Framer und dem Design von schönen Websites gemacht hast, würde ich gerne davon hören. Lass uns sprechen und voneinander lernen.

Jetzt ist es an der Zeit, unser Produkt auszuprobieren! Besuche uns auf logto.io.