1&1 Internet SE Entwicklung eines Interview Tools für die maßgeschneiderte Erstellung von Websites
Technologien
Kundennutzen
- einfachere und zeitsparendere Websiteerstellung
- Erhöhung der Kundenzufriedenheit
- Erhöhung des Komforts und der Verbindlichkeit
Website-Baukästen erfreuen sich seit Jahren großer Beliebtheit, erlauben sie doch auch technologisch weniger versierten Anwender:innen, ihre Unternehmen und Ideen im Web zu präsentieren und ihre Reichweite so deutlich zu vergrößern. Gemeinsam mit der inovex GmbH hat 1&1, Europas führender Webhoster, seinen Web-Baukasten „1&1 MyWebsite“ um einen innovativen Design-Service erweitert, der Kund:innen und Webdesigner:innen in Echtzeit im Dialog verbindet.
Nutzer:innen von 1&1 MyWebsite können aus zahlreichen Templates mit Bild- und Textvorschlägen für mehr als 200 Branchen wählen. Durch Hinzufügen – per Drag & Drop in einem WYSIWYG-Editor (What You See Is What You Get) – oder Verändern einzelner Elemente wie Text, Farben und Bilder können die Website-Vorlagen individuell an die Wünsche der jeweiligen Nutzer:innen angepasst werden. Auf diese Weise erstellen Kund:innen auch ohne jegliche Kenntnisse von HTML, CSS und JavaScript schnell und einfach professionelle Websites, die dank Responsive Design auch optimal auf mobilen Endgeräten angezeigt werden.
Mit dem 1&1 Design-Service zur Wunsch-Website
Um das Erstellen der eigenen Website noch einfacher und zeitsparender zu gestalten, können Nutzer:innen von 1&1 MyWebsite einen Design-Service als Premiumdienstleistung in Anspruch nehmen. Dieser setzt Nutzer:innen in direkten telefonischen Kontakt zu Web-Expert:innen, die die Wünsche der Kund:innen aufnimmt und umsetzt.
Hier kommt inovex ins Spiel. Denn während der gestalterische Aspekt des Design-Services vormals lediglich unidirektional möglich war – die Kund:innen diktierte den Designer:innen ihre Wünsche – sollten in der neuen Version Kund:innen und Designer:innen visuell in Echtzeit gemeinsam das Gestaltungskonzept festlegen.
So basiert der neue Design-Service auf einem Web Interface, auf dem eine Session mit zwei Ansichten gestartet wird: Die Agent:innensicht für Designer:innen und die Sicht der Kund:innen, über die sich Nutzer:innen mittels eines sechsstelligen Codes mit den Designer:innen verbinden können.
Während die verbale Kommunikation weiterhin telefonisch abläuft, dient das Web Interface dazu, den Kund:innen mögliche Ausprägungen verschiedener Gestaltungsaspekte vor Augen zu führen. Dabei werden zunächst in Bildern Gegensatzpaare präsentiert, die beispielsweise den Stil der Website als ernst oder verspielt, statisch oder dynamisch, bunt oder gedeckt festlegen. Die so gefundenen Schlagworte werden in einer Tag Cloud dargestellt und priorisiert, die Typografie wird festgelegt und ein individuelles Farbschema bestimmt. Zuletzt wählen die Kund:innen aus einer Vorschau von vier prototypischen Website-Designs jenes aus, das am ehesten ihrer Vorstellung entspricht. Auf Basis dieses Templates und der zuvor geäußerten Wünsche der Kund:innen erstellen die Designer:innen dann ein Mockup, um sichergehen zu können, dass die Vorstellungen der Kund:innen richtig umgesetzt wurden.
Die optimale Customer Journey: einfache Kommunikation und mehr Verbindlichkeit
Nachdem sich die Kund:innen auf dem Web-Portal angemeldet hat, wird der gesamte Prozess von den Designer:innen gesteuert – die Kund:innen können sich also komplett auf die Umsetzung seiner Gestaltungswünsche konzentrieren. Lediglich beim Abschluss des Prozesses, nachdem die Kund:innen eine grobe Vorschau seiner Wunsch-Website präsentiert wurde, ist eine einmalige, aktive Bestätigung notwendig. Für 1&1 ergibt sich der Vorteil, dass die Kund:innen schon im Entstehungsprozess visuelles Feedback bekommt und Änderungswünsche nicht erst bei der Übergabe des Produkts kommunizieren kann – die Zufriedenheit der Kund:innen ist deutlich höher.
Je nach gewähltem Paket wird die fertig gestaltete Website den Kund:innen übergeben, die diese fortan selbst über den 1&1 MyWebsite Editor verwalten und Inhalte hinzufügen können, oder sie wird weiterhin von persönlichen 1&1 Web-Expert:innen verwaltet.
Technologische Umsetzung: JavaScript im Frontend und Backend
Den Dreh- und Angelpunkt des Design-Service bildet sein Frontend. Um eine hohe Performance zu gewährleisten und gleichzeitig ein robustes und bewährtes Framework zu nutzen, wurde dieses mit AngularJS implementiert. Als Single Page Application (SPA) muss der Browser sowohl für die Agent:innen als auch die Kund:innen während der gesamten Session nur eine einzige Website laden, eingegebene Daten werden dann dynamisch zwischen beiden Nutzer:innen übertragen.
Die Kommunikation wird nahezu in Echtzeit durch Socket.IO ermöglicht, eine JavaScript-Library für WebSockets mit zwei Komponenten: einer Browser- und einer Server-Komponente. Letztere setzt auf das verbreitete Express-Framework für den Node.js-Server auf.
Erweitert wird die Architektur durch PostgreSQL als Persistenzschicht, welche die Nutzer:innenwünsche im Design-Prozess sowie deren Daten speichert. Diese bleiben bis zu 50 Tage lang verfügbar, sodass die Gestaltung der Website auch über mehrere Sitzungen hinweg erfolgen kann. Die abschließende Ausgabe einer PDF-Datei, welche die Wünsche der Kund:innen übersichtlich zusammenfasst, erledigt die PDFKit-Bibliothek für Node.js.
Für horizontale Skalierbarkeit sorgt die In-Memory-Datenbank Redis, die als Session Store die Design-Sitzungen von Agent:innen und Kund:innen besonders schnell auf verschiedene Node.js-Server verteilen kann. Bewährt hat sich dies unter anderem bei der internationalen Expansion des Design-Services, der so ohne große Anpassungen neben Deutschland auch in den USA, dem Vereinigten Königreich, Spanien und Frankreich ausgerollt werden konnte.
Insgesamt ergibt sich also eine schlanke Architektur, die lediglich Node. js und PostgreSQL als Abhängigkeiten aufweist. Die Verwendung von JavaScript sowohl im Front- als auch im Backend ermöglicht einen Betrieb mit maximaler Effizienz, da dasselbe Personal ohne Mehraufwand die komplette Architektur warten kann.
Der Server-Betrieb
Da schon frühzeitig feststand, dass inovex nach der Entwicklung auch für den Betrieb der Design-Service-Server zuständig sein würde, erfolgte die Entwicklung durch ein crossfunktionales Team von inovex- und 1&1-Mitarbeiter:innen. Je nach Projektstand arbeiteten 10 bis 15 Entwickler:innen zusammen in einem agilen Projekt-Setup.
Nachdem Ende 2014 die erste Version deployt wurde, startete direkt die Phase-2-Entwicklung, in der Erkenntnisse aus dem Produktiveinsatz direkt umgesetzt wurden. Im Jahr 2015 folgten dann umfassende Anpassungen: Die User Experience wurde auf Basis der Kund:innen-Insights nochmals deutlich verbessert und in optimierter Form auf das Angebot des 1&1 MyWebsite Design-Services abgestimmt.
Da der Design-Service auf Servern von 1&1 gehostet wird, fiel keine aufwändige Integrationsarbeit an. Lediglich das Benutzer:innenmanagement für die Agent:innen (Designer:innen) musste an das vorhandene Intranet gekoppelt werden. Auch im Betrieb kommen die gängigen Routinen von 1&1 für Monitoring und Backups zum Einsatz.
Zusammenfassung
Die Weiterentwicklung des Design-Services stellte eine gute Gelegenheit dar, moderne Web-Technologien für den Produktiveinsatz zu implementieren. Dabei zeigte sich 1&1 offen für die Architekturvorschläge der inovex-Entwickler:innen. Das Resultat ist ein neues Web Interface zur Unterstützung des 1&1 MyWebsite Design-Service, das nicht nur ansprechend wirkt, sondern für Kund:innen wie auch Designer:innen deutlich mehr Komfort, eine höhere Verbindlichkeit und eine State of the Art User Experience bietet.
Die Zusammenarbeit mit inovex gestaltete sich sehr produktiv. Dank der Verwendung agiler Methoden konnte zeitnah auf neue Herausforderungen eingegangen werden und der offene, direkte Umgang miteinander machte die Kommunikation sehr angenehm.