inovex · inovex Case Study 1&1 Internet SE Entwicklung eines Interview Tools für die maßgeschneiderte Erstellung von Websites auf Basis modernster Web-

inovex Case Study

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

© inovex GmbHAugust 2016

inovex Case Study: 1&1 Design Service

inovex GmbH · Ludwig-Erhard-Allee 6 · 76131 Karlsruhe · Tel. +49 721 619 021-0 · [email protected] · www.inovex.de

2

Website-Baukästen erfreuen sich seit Jahren großer Beliebtheit, erlauben sie doch auch technologisch weniger versierten Anwendern, ihre Unterneh-men 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 Webdesi-gner 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-WebsiteUm 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.



3

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 VerbindlichkeitNachdem 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.



4

Technologische Umsetzung: JavaScript im Frontend und BackendDen 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.

AgentApp

PostgreSQL

Redis

Pub/Sub

Storage

socket.io ClientApp



5

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-BetriebDa 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.

ZusammenfassungDie 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



6

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 Herausforderun-gen 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

Über inovexinovex ist ein IT-Projekthaus mit dem Schwerpunkt „Digitale Transformation“. Über 200 Berater und IT-Ingenieure unterstützen Unternehmen bei der Digitalisierung ihres Kerngeschäfts und bei der Realisierung von neuen Wertschöpfungsmodellen.

Zum Portfolio von inovex gehören Digital Consulting, Web und Mobile Development, Business Intelligence, Big Data und Search, Data Center Automation und Cloud-Infrastrukturen sowie Trainings und Coachings.

inovex ist in Karlsruhe, Pforzheim, München, Köln und Hamburg ansässig und bundesweit in Projekte involviert.

Nehmen Sie Kontakt auf› Haben Sie Fragen rund um das Thema Application Development? › Suchen Sie einen Partner, der Sie bei der Implementierung Ihrer

Web- oder Mobile-Anwendung unterstützt? › Möchten Sie mehr über inovex und unser Portfolio für die digitale

Transformation erfahren?

Ihr AnsprechpartnerTobias JochHead of Application Development0173 31 81 [email protected] www.inovex.de

Documents

inovex · inovex Case Study 1&1 Internet SE Entwicklung eines Interview Tools für die maßgeschneiderte Erstellung von Websites auf Basis modernster Web-