1&1 Internet SE: Entwicklung eines Interview Tools für die maßgeschneiderte Erstellung von Websites auf Basis modernster Web-Technologien

Website-Baukästen erfreuen sich seit Jahren großer Beliebtheit, erlauben sie doch auch technologisch weniger versierten Anwendern, 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 (www.1und1.info), seinen Web-Baukasten „1&1 MyWebsite“ um einen innovativen Design-Service erweitert, der Kunden und Webdesigner in Echtzeit im Dialog verbindet.

Nutzer 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 des jeweiligen Nutzers angepasst werden. Auf diese Weise erstellen Kunden 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 von 1&1 MyWebsite einen Design-Service als Premiumdienstleistung in Anspruch nehmen. Dieser setzt den Nutzer in direkten telefonischen Kontakt zu einem Web-Experten, der die Kundenwünsche aufnimmt und umsetzt.

Hier kommt inovex ins Spiel. Denn während der gestalterische Aspekt des Design-Services vormals lediglich unidirektional möglich war – der Kunde diktierte dem Designer seine Wünsche – sollten in der neuen Version Kunde und Designer 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 Agentensicht für den Designer und die Kundensicht, über die sich der Nutzer mittels eines sechsstelligen Codes mit dem Designer verbinden kann. 

Während die verbale Kommunikation weiterhin telefonisch abläuft, dient das Web Interface dazu, dem Kunden 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ählt der Kunde aus einer Vorschau von vier prototypischen Website-Designs jenes aus, das am ehesten seiner Vorstellung entspricht. Auf Basis dieses Templates und der zuvor geäußerten Wünsche des Kunden erstellt der Designer dann ein Mockup, um sichergehen zu können, dass die Vorstellungen des Kunden richtig umgesetzt wurden.

Die optimale Customer Journey: einfache Kommunikation und mehr Verbindlichkeit

Nachdem sich der Kunde auf dem Web-Portal angemeldet hat, wird der gesamte Prozess vom Designer gesteuert – der Kunde kann sich also komplett auf die Umsetzung seiner Gestaltungswünsche konzentrieren. Lediglich beim Abschluss des Prozesses, nachdem dem Kunden 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 der Kunde schon im Entstehungsprozess visuelles Feedback bekommt und Änderungswünsche nicht erst bei der Übergabe des Produkts kommunizieren kann – die Kundenzufriedenheit ist deutlich höher.

Je nach gewähltem Paket wird die fertig gestaltete Website dem Kunden übergeben, der diese fortan selbst über den 1&1 MyWebsite Editor verwalten und Inhalte hinzufügen kann, oder sie wird weiterhin von einem persönlichen 1&1 Web-Experten verwaltet. 

Architektur
Architektur

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 den Agenten als auch den Kunden während der gesamten Session nur eine einzige Website laden, eingegebene Daten werden dann dynamisch zwischen beiden Nutzern ü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 Nutzerwünsche im Design-Prozess sowie die Nutzerdaten 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 Kundenwünsche ü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 und Kunde 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 cross-funktionales Team von inovex- und 1&1-Mitarbeitern. Je nach Projektstand arbeiteten 10 bis 15 Entwickler 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 Kunden-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 Benutzermanagement für die Agenten (Designer) 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. Das Resultat ist ein neues Web Interface zur Unterstützung des 1&1 MyWebsite Design-Service, das nicht nur ansprechend wirkt, sondern für Kunden wie auch Designer 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.“ 

Roman Okon, Product Manager My Website

Verwendete Technologien:

Frontend

  • AngularJS
  • Socket.IO

Backend

  • Node.js
  • Express
  • Socket.IO
  • Redis
  • PostgreSQL
  • PDFKit

Sie haben Fragen oder möchten zu diesem Thema beraten werden?

Dann rufen Sie uns an unter +49 (0)721 619 021-0 oder schreiben Sie uns eine E-Mail. Wir freuen uns auf Ihre Nachricht!

Weitere Themen:

Tobias Joch

Ich freue mich auf Ihre Nachricht!

Tobias Joch

Head of Application Development

inovex Blog

Tech-Artikel im inovex Blog

Unsere Mitarbeiter schreiben regelmäßig Fachbeiträge in unserem Blog. Aktuelle Themen: Redis, Elasticsearch, Docker, Angular 2, Project Tango uvm.

Zum inovex Blog

Organisation

Research & Development bei inovex

Im „inovex Lab“ kümmern wir uns systematisch um die Früherkennung, Erprobung und Bewertung neuer Technologien, IT-Trends und Anwendungsmöglichkeiten in allen Themenfeldern der Digitalen Transformation.

Mehr lesen

inovex Content Pool

Aktuelle Vorträge, Whitepaper, Fachartikel & Videos

Hier geht's zum Content Pool

Über uns

Unsere Technologie-Partner

Wir kooperieren mit Partnern, die unseren Kunden einen echten Mehrwert bieten: Cloudera, Elastic, Hortonworks, Liferay, MapR, Microsoft, Red Hat, Quobyte und UID.

Mehr Infos

Arbeiten bei inovex

inovexperts erzählen ...

Was es konkret im Alltag bedeutet, bei inovex als "inovexpert" zu arbeiten, erklären die Kolleginnen und Kollegen in unseren inovexpert-Videos. Wir wünschen Ihnen viel Spaß beim Ansehen!

Jetzt inovexperts-Videos ansehen