Responsive Website für Swisscom-Kunden

Neele Wahnsiedler ist Projektleiterin, Patrik Senn ist Teamleiter, beide bei Swisscom. Thomas Memmel ist Business Unit Manager bei Zühlke. Online für einen Flug einchecken, einkaufen, Termine vereinbaren – dank sogenannter Self Services lässt sich heute vieles schnell, bequem und zeitlich flexibel erledigen. Auch die Unternehmen haben die Vorteile eines Online-Kundencenters entdeckt. Wer einen Swisscom-Login hat, kann zahlreiche Aufgaben gleich selbst erledigen, zum Beispiel Zahlungsfristen verlängern, den aktuellen Verbrauch einsehen, persönliche Daten anpassen oder das Abo wechseln. Mit der Verbreitung mobiler Endgeräte wächst auch der Bedarf nach mobilen Zugriffsmöglichkeiten, die auf das jeweilige Device hin optimiert sind. Nativ für das jeweilige Device entwickelte Apps bieten den Vorteil, dass das Benutzererlebnis optimal auf das jeweilige Betriebssystem abgestimmt ist. Grundsätzlich könnte für jedes Smartphone oder Tablet und für jede Bildschirmgrösse eine passende Seite gebaut werden. Da aber immer mehr verschiedene Geräte auf dem Markt sind, wäre der Aufwand enorm. Eine Lösung bieten HTML5, CSS3 und JavaScript. Auf deren Basis können mit einer einzigen Technologie sehr viele Kanäle gleichzeitig optimiert bedient werden. Das zugrundeliegende Technikkonzept nennt sich «Responsive Design» und bedeutet, dass die Darstellung der Webinhalte auf verschiedene Geräte und Bildschirmgrössen reagieren kann. Grösse, Breite und Höhe aller Bildschirmelemente passen sich an, und auch die Platzierung von Navigations- und Inhalts­elementen ist flexibel. Je nach Platz werden Inhalte vollständig oder verkürzt angezeigt.

Swisscom stellte bereits vor zweieinhalb Jahren die wichtigsten Funktionen in ihrer Kundencenter-Webseite über die nativ entwickelte App «My Swisscom» für iOS- und Android-Smart­phones zur Verfügung. Um das bisherige Online-Kundencenter für die mobilen Geräte zu optimieren, setzt das Unternehmen jetzt im zweiten  Schritt auf einen modernen Ansatz mit Responsive Design. Anfang März 2013 definierte der TK-Anbieter den Business Case und stellte gemeinsam mit dem Entwicklungspartner Zühlke ein schlagkräftiges Developer-Team zusammen. Ziel des Projekts war die Optimierung der Webseite für eine Vielzahl mobiler Geräte. Das Kundencenter basiert neben HTML5/CSS3 auf dem Twitter-Bootstrap-Framework. Letzteres unterstützt die Erstellung von responsiven Webseiten optimal. Die alten Tabellen-Layouts werden auf die CSS-Grids abgebildet. Damit lassen sich auch ältere Webapplikationen für die mobile Zukunft fit machen. Die Systemarchitektur bleibt dabei bestehen und es sind weder neue Server noch neue Lizenzen erforderlich. Nach der Erstellung von Prototypen in einer Proof-of-Concept-Phase entschied sich das Projektteam für einen pragmatischen Ansatz: Zuerst wurden die von den Kunden am häufigsten genutzten Funktionen auf responsive getrimmt und über mehrere Releases ausgeliefert. Der Kunde erhielt damit einen Mix von klassischen und für Smartphones optimierten Webseiten. Die Umsetzung erfolgte nach dem Baukastenprinzip. Insbesondere bei grösseren Applikationen ist dies unverzichtbar; die Erstellung von universellen Standardkomponenten ist der Schlüssel zum Erfolg. Hier sind in erster Line die Interaction Designer gefordert. Sie sollten wenn immer möglich in Standardkomponenten denken. Der Aufwand lohnt sich und bringt einige Vorteile mit sich: Standardseiten können deutlich effizienter umgesetzt werden und das Erscheinungsbild aller Seiten ist einheitlich. Schliesslich ist der Wartungsaufwand geringer, da zukünftige Designanpassungen einfacher werden. Lesen Sie auf der nächsten Seite: das erste Release

Mit dem ersten Release im September 2013 setzte das Projektteam einen Teil des Kundencenters mit Responsive Design um. Zudem gestalteten die Entwickler ein neues Menü für Smartphones und Tablets, das weniger Platz braucht und sich wie bei einer nativen App anfühlt. Damit hat der Kunde Zugang zu allen Seiten des Kundencenters. Das Menü wird je nach Gerät und Bildschirmgrösse anders dargestellt. Im November 2013 war die Optimierung aller Seiten, auf denen der Kunde aktuelle Kosten und Rechnungen kontrollieren kann, ab­geschlossen. Zudem standen die Funktionen zur Verwaltung des Abos für mobile Geräte zur Verfügung. So wurden gemäss der Transforma­tionsstrategie immer weitere Funktionen des Online-Kundencenters «responsive».

Für die Umsetzung kamen nur agile Methoden infrage. Die Anforderung «sieht auf allen Geräten gut aus und kann gut bedient werden» zu erfüllen, ist eine komplexe Aufgabe. Sie kann nur mit kurzen Feedback-Loops zwischen den verschiedenen Disziplinen in sinnvoller Zeit und innerhalb eines definierten Kostendachs gelöst werden. Deshalb kam Scrum zum Einsatz. In diesem Projekt ging es allerdings nicht um die lehrbuchmässige Umsetzung. Die Methodik musste dem Kontext des Unternehmens angepasst werden. Dabei half das regelmässige Reflektieren innerhalb des Projektteams über die Zusammenarbeit: «Was läuft gut? Was müssen wir verbessern?» Entscheidend für die erfolgreiche Umsetzung des Projekts waren zudem Zusammensetzung und Grösse des Teams. Um die Grundlagen für ein Kundencenter mit Responsive Design zu schaffen, wurde zuerst eine kleine, schlagkräftige Gruppe aus Experten zusammengestellt. Sie probierten Konzepte aus, entwickelten diese weiter und optimierten die Ansätze. In einer zweiten Phase, als Layout und Style Guide definiert waren, wurde das Team erweitert. Neu entwickelte Seiten wurden laufend von allen Projektbeteiligten auf diversen Geräten getestet und optimiert. Die enge Zusammenarbeit zwischen Product Owner (Projektleiter), Interaction Designer, Software-Ingenieur und Tester war entscheidend für den Erfolg. Als hilfreich erwies sich dabei eine entsprechende Sitzordnung mit allen Projektmitgliedern an einem grossen Tisch. Lesen Sie auf der nächsten Seite: die Zukunft ist responsive

Parallel zum Projekt «Responsive Webdesign» hat Swisscom das Kundencenter und die «My Swisscom App» näher zusammengeführt. Dabei wurde eine neue Funktion («Empfohlene Links«) in die App integriert. So erhält der Kunde direkten Zugang zu den wichtigsten responsive Seiten des Kundencenters und zu weiteren mobilen Webseiten, zum Beispiel zur Hilfeseite oder zur Support-Community. Das responsive gestaltete Kundencenter findet ganz offensichtlich Anklang: Vor dem Launch der ersten Version im September 2013 haben rund 5 Prozent der Besucher das Portal via Smartphone aufgerufen. Dieser Wert hat sich im Oktober auf 10 Prozent verdoppelt, bei steigender Nutzung auf allen Geräten. Swisscom plant deshalb, weitere häufig genutzte Funktionen in Richtung responsive zu entwickeln.

Das Projekt

! KASTEN !

! KASTEN !

! KASTEN !

Ressourcen: 20-köpfiges Team aus Swisscom- und Zühlke-Mitarbeitern

Zeitrahmen: 12 Monate

Dienstleister: Zühlke Engineering AG