-
Notifications
You must be signed in to change notification settings - Fork 0
/
blsmobil.shtml
146 lines (116 loc) · 15.3 KB
/
blsmobil.shtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<title>Break the Box - BLS Mobil</title>
<!--#include virtual="/snippets/headerforarticles.shtml" -->
<meta property="og:type" content="website">
<meta name="description" content="Seit April 2017 ist die neue öV-App der BLS in den App-Stores verfügbar und ermöglicht schweizweite Fahrplanabfragen und Ticketkäufe.<br/>
Oli von Break the Box durfte die unkonventionelle App von der Produktidee bis zum Release als Teil des Projektteams begleiten."/>
<meta property="og:description"
content="Oli von Break the Box berichtet, wie er die schweizweite Fahrplan- und Ticket-App BLS Mobil von der Produktidee bis zum Release als Teil des Projektteams begleiten durfte." />
<meta name="author" content="Oliver Schmid, Break the Box">
<meta name="twitter:creator" content="@breakthebox_ch">
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="BLS Mobil - die Entstehung einer App">
<meta property="og:site_name" content="Break the Box Lab" />
<!--<meta property="og:image" content="https://www.breakthebox.ch/img/blsmobil_sq.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />
-->
<meta property="og:image" content="https://www.breakthebox.ch/img/blsmobil.jpg" />
<meta name="twitter:image" content="https://www.breakthebox.ch/img/blsmobil.jpg">
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1000" />
<meta property="og:image:height" content="477" />
<meta property="article:published_time" content="2017-07-23T16:00:00">
<meta property="article:modified_time" content="2017-07-23T16:00:00">
<meta name="keywords" content="Produktinnovation, Konzeption, BLS Mobil, agile Entwicklung, Requirements Engineering, User testing, Prototyping">
</head>
<body itemscope itemtype="http://schema.org/Organization" class="article">
<!--#include virtual="/snippets/subsitenav.shtml" -->
<div class="bg-light">
<div class="container" >
<h1 style="margin-top: 2em;">BLS Mobil – die Entstehung einer App</h1>
<p style="text-align:right;margin-bottom: 1em; font-style: italic">23. Juli 2017</p>
<div style="text-align: justify;
text-justify: inter-word;">
<p style="margin-bottom: 2em; margin-top:2em;">
<b>Seit April 2017 ist die neue öV-App der BLS in den App-Stores verfügbar und ermöglicht schweizweite Fahrplanabfragen und Ticketkäufe.<br/>
Oli von Break the Box durfte die unkonventionelle App von der Produktidee bis zum Release als Teil des Projektteams begleiten.</b></p>
<div class="row">
<div class="col-xs-12 col-sm-12 detailImage">
<figure class="standalone">
<img src="img/blsmobil.jpg">
<figcaption>Bild: zur Verfügung gestellt von der <a href="http://www.bls.ch">BLS AG</a> </figcaption>
</figure>
</div>
</div>
<div class="row" >
<div class="col-xs-12">
<p><a href="https://www.bls.ch/de/fahren/fahrausweise/verkauf/online-mobile/bls-mobil">BLS Mobil</a> – so heisst die neue App der <a href="https://www.bls.ch">BLS AG</a>. Das Spezielle: Anstelle einer herkömmlichen Abfrage von Abgangs- und Bestimmungsort interagiert der Benutzer per Chat - einem sogenannten "Conversational User Interface" (CUI) – auf Deutsch, Französisch, Italienisch, Englisch und sogar <a href="http://www.20min.ch/schweiz/bern/story/27239321">Berndeutsch</a>.
Die persönliche Ansprache, die intuitive Interaktion aber auch die beinah unbegrenzten Erweiterungsmöglichkeiten dieser Art von Benutzerschnittstelle führten zu diesem Entscheid.</p>
<p><b>Rahmenbedingungen</b><br/>
Die vom <a href="https://www.voev.ch">Verband öffentlicher Verkehr (VöV)</a> in Auftrag gegebene öV-Plattform – einer zentralen Plattform zum Verkauf von schweizweit gültigen öV-Tickets – hat für Transportunternehmungen der Schweiz die technische Möglichkeit geschaffen, ihre Ticket-Verkaufskanäle direkt über eine standardisierte Schnittstelle anbinden zu können.<br/>
Aufgrund der stetig wachsenden Bedeutung der mobilen Kanäle beim öV-Ticketkauf wurde denn auch bei der BLS AG eine "mobile first" Strategie gewählt. Diese verfolgt das Ziel, dem Endkunden eine Alternative zu den bestehenden mobilen Ticketkanälen zu bieten.
</p>
<p>
<b>Machbarkeitsstudie</b><br/>
<figure class="col-xs-12 col-sm-6 right"><img src="img/blsmobil/ticketkauf.png" /><figcaption>Proof of Concept zur Überprüfung der technischen Machbarkeit</figcaption></figure>In einer frühen Phase des Projekts stand zuerst die Überprüfung der technischen Machbarkeit an. Wir entwickelten einen einfachen, webbasierten Client, welcher (mit z.T. vereinfachten / gemockten Backend-Komponenten) den Durchstich bis zu den Testsystemen der neuen öV-Plattform ermöglichte.
Neben der eigentlichen Machbarkeit konnten wir so bereits erste Erfahrungen mit der Schnittstelle sammeln, die angebotenen Funktionalitäten einschätzen und Abklärungen mittels Feedback und Fragen an das öV-Plattform-Projekt treffen.<br/>
</p>
<p><div style="font-style: italic;">Ist ein Projekt – wie dieses – stark vom Funktionsumfang eines Umsystems abhängig, so empfiehlt es sich, letzteres frühzeitig auf Einschränkungen zu testen und getroffene Annahmen zu überprüfen. Auch bedeutet der Kontakt mit dem Projektteam des Umsystems – insbesondere, wenn es sich noch in Entwicklung befindet –, dass allfällige Anforderungen und Verbesserungen noch einfliessen können oder gemeinsam nach anderen Umsetzungsmöglichkeiten gesucht werden kann.</div></p>
<div><p ><b>Initiale Anforderungserhebung</b><figure class="col-xs-12 col-sm-6 right"><img src="img/blsmobil/connection.png" /><figcaption>Prototyp zur Anforderungserhebung und -validierung</figcaption></figure>
Parallel zum Nachweis der Machbarkeit stand die Konzeption der App an. Dazu haben wir nach einer ersten Anforderungserhebung bei den verschiedenen Stakeholdern einen kleinen Prototyp erstellt, welcher grundlegende Fahrplan- und Ticketverkaufsfunktionen bot und es uns erlaubte, die erhobenen Anforderungen schnell zu integrieren und mit den jeweiligen Stakeholdern zu besprechen. Die unausgereifte visuelle Darstellung war dabei gewollt – das Erscheinungsbild als frühe, unfertige und veränderbare Version fördert die Bereitschaft Ideen für Funktionen wieder fallen zu lassen. Die eher rudimentäre Darstellung unterstrich zudem den äusserst wichtigen Fokus auf die gewünschte Funktionalität – nicht aber auf die Gestaltung von Komponenten oder der Interaktion.
</p></div>
<p ><b>Konzeption</b><br/>
Mit dem Wissen um die zu liefernde Grundfunktionalität ging es darum das Gestaltungskonzept der App zu definieren. Unter der Berücksichtigung der Unternehmenswerte "persönlich", "sympathisch" und "regional" haben wir Konzepte gesucht, welche es erlauben eine alternative Art einer Fahrplan- und Ticketkauf-App zu gestalten und möglichst offen für künftige Entwicklungen sind.
Nach einigen Iterationen stiessen wir dabei auf die Option, die Applikation als Conversational User Interface (CUI) – konkret in Form eines Chats – zu realisieren.
Eine Konversation in Form eines Chats entspricht dabei nicht nur den Werten "persönlich" und "sympathisch", sondern verbindet sich ausserdem hervorragend mit dem Fokus auf die Beratung der Kunden, welche die BLS unter anderem in ihren Reisezentren im persönlichen Gespräch pflegt.<br/>
Doch die Natur eines Chats erlaubt noch viel mehr: Aufgrund des Kontextes mit einem Chat pro Reise und dessen Verlauf ist es möglich bereits abgefragte Informationen leicht wieder auf den Bildschirm zu holen ohne eine neue Anfrage starten zu müssen. Weiter können aufgrund des bekannten Kontexts Informationen zur Reise sowie Zusatzfunktionen leicht integriert werden.
</p>
<p><b>Interne Kommunikation</b><figure class="col-xs-12 col-sm-3 right"><img src="img/blsmobil/carton.jpg" /><figcaption>Ein interaktiver Karton-Mockup für die interne Kommunikation</figcaption></figure>
Überzeugt vom Mehrwert des Chat-Konzepts sollte die Idee intern promotet werden um die notwendige Unterstützung in der Unternehmung zu erlangen. Zudem sollte im Projektteam ein gemeinsames Verständnis und eine Begeisterung für das zu erstellende Produkt entstehen. Zu diesem Zweck haben wir einen Karton-Mockup angefertigt, welcher mittels Papierrollen und gedrucktem Dialog die Funktionsweise des Chats aufzeigen sollte. Dieses etwas über einen halben Meter hohe ultra-low-tech "Smartphone" in BLS-Grün aus Karton, Papier und Holz wurde in Präsentationen, bilateralen Gesprächen und im Projektraum zu einem wichtigen und identitätsstiftenden Utensil. Die erwünschte Wirkung blieb nicht aus und ein motiviertes Projektteam erhielt das GO für die Umsetzung der ersten öV-Chat-App der Schweiz.
</p>
<p><div style="font-style: italic;">Um insbesondere den schwer fassbaren digitalen Produkten ein physisches Gesicht zu geben, ist das Mittel der "Product Box" ein gängiges und empfehlenswertes Tool: Das Team ist dabei aufgefordert, eine Verpackung herzustellen, wie sie in einem Regal eines Supermarktes vorkommen könnte und die wesentlichsten Vorteile/Features des Produktes präsentiert, welche einen Kunden zum Kauf veranlassen würden. Wenn auch nicht in Form einer Produktverpackung, so nahm in diesem Projekt das analoge Smartphone die Funktion der Visualisierung der wichtigsten Produkteigenschaften wahr.</div></p>
<p >
<b>Spezifikation und Umsetzung</b><figure class="col-xs-12 col-sm-3 right"><img src="img/blsmobil/app.png" /><figcaption>Die resultierende App BLS Mobil - erhältlich für <a href="https://play.google.com/store/apps/details?id=ch.bls.vbe&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1">Android</a> und <a href="https://itunes.apple.com/us/app/bls-mobil/id1146743800?ls=1&mt=8">iOS</a></figcaption></figure>
In der Spezifikations- und Umsetzungsphase haben wir gemeinsam mit UX-Spezialisten Mockups und Screens entwickelt und der App so nach und nach das Aussehen und die Dialoggestaltung gegeben, welche in der aktuellen Version resultierte. Dabei haben wir in kurzen Iterationen Screens und später auch Entwicklungs-Versionen sowohl mit internen als auch mit externen Benutzern getestet und auf deren Verständlichkeit, Usability und Akzeptanz geprüft.
Dank einer agilen Entwicklung gemeinsam mit dem App-Realisierungspartner konnten wir während dem Entwicklungsprozess auf neue Erkenntnisse sowie Änderungen bei den Umsystemen eingehen und daraus ergebende Features oder Anpassungen bei der Priorisierung und beim Scoping mit berücksichtigen.<br/>
</p>
<p ><b>Fazit</b><br/>
Die Gestaltung eines neuen Produkts ist Chance und Herausforderung zugleich: Die Anzahl der Möglichkeiten sind grenzenlos und umso schwerer fällt es, die für eine Realisierung notwendigen Entscheidungen zu treffen.
So ist es nicht nur enorm wichtig, Entscheidungsgrundlagen mittels einer gut strukturierten Anforderungsanalyse zu erarbeiten, sondern vor allem im Projekt und der Unternehmung den Rückhalt für das grundsätzliche Produktkonzept zu erreichen.
Da es während der Spezifikation / Entwicklung immer zu Kompromissen kommen wird und ein Feature (aus verschiedenen Gründen) nicht oder nicht wie gewünscht realisiert werden kann, ist es notwendig, das Vertrauen in das Konzept zu erhalten.
So kann dem Projektteam der Mut gegeben werden auch schwer fallende Entscheidungen zum Wohle des Produkts zu fällen und das Konzept auch als Richtlinie für die Weiterentwicklung gelten zu lassen.
Die verschiedenen Phasen in der Entstehung der App dienten deshalb nicht nur der Erarbeitung der Grundlagen für die App-Spezifikation. Ein verfolgtes Ziel war es auch, das Vertrauen in die Machbarkeit zu bilden und eine gemeinsame Vorstellung des Resultats zu vermitteln um trotz aller Entwicklungsagilität ein in sich konsistentes Produkt zu entwickeln.
</p>
<p>
Vielen Dank @BLS für die spannende und herausfordernde Aufgabe in einem tollen Projektteam!
</p>
</div>
</div>
<div class="author row">
<div class="col-xs-12">
<a href="mailto:oli@breakthebox.ch"><img class="img-circle"
src="https://s.gravatar.com/avatar/7d69ac318121023d70962f81f266e7e2?s=100"
alt="Oliver Schmid"></a><span><a href="mailto:oli@breakthebox.ch">Oli</a> besitzt kein Auto und nutzt deshalb den öffentlichen Verkehr häufig. Er mag es, wenn <a href="washingmachine.html">Geräte</a> und <a href="robot.html">Programme</a> mit ihm sprechen (insbesondere in Dialekt), sofern die Dialoge sinnvoll und nützlich sind. Sein Lieblingsfeature der App sind die gespeicherten Chat-Verläufe, welche ihm eine Menge Zeit sparen, weil er bei häufig gleichen Strecken nicht immer wieder die Stationen eingeben muss. Er schätzt aber auch das freundliche "bissoguet" bei einigen Eingabeaufforderungen und muss auch bei anderen berndeutschen Ausdrücken immer wieder etwas schmunzeln.</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p><b>Interessiert an der App?</b><br/>
<a href='https://play.google.com/store/apps/details?id=ch.bls.vbe&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Jetzt bei Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/de_badge_web_generic.png' style="height: 5em;"/></a>
<div style="font-size: 0.8em">Google Play und das Google Play-Logo sind Marken von Google Inc.</div>
<a href='https://itunes.apple.com/us/app/bls-mobil/id1146743800?ls=1&mt=8'><img src='img/blsmobil/apple_badge.svg' style="height: 5em; padding: 0.75em;"/></a>
<div style="font-size: 0.8em">Apple and the Apple logo are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc., registered in the U.S. and other countries.</div>
</p>
</div>
</div>
</div>
</div>
</div>
<!--#include virtual="/snippets/footer.shtml" -->
<!--#include virtual="/snippets/analytics.shtml" -->
</body>
</html>