PAGE online

UX Design in der Praxis bei Aperto

In Partnerschaft mit 
ihrem Mutterkonzern IBM entwickelte die Digitalagentur Aperto die App Elderly Care.  Mit ihrer Hilfe können Angehörige pflegebedürftiger Menschen deren Wohlbefinden 
im Blick behalten. Lesen Sie hier das Making-of!

Interface Designer Santiago Uribe, UX-Designerin Leticia Bialoskorski und DevOps Engineer Nico Neumann bei der gemeinsa­men Konzeption.

Demografischer Wandel, steigende Lebenserwartung, Zunahme chronischer Erkrankungen: In den meisten Industrieländern werden die Menschen immer älter – und sie wollen so lange wie möglich zu Hause wohnen. Das stellt Angehörige und Pflegedienste vor immer größere Herausforderungen. Wie kann ich sicher sein, dass Oma im Notfall möglichst zeitnah Hilfe erhält, auch wenn sie alleine zu Hause ist? Wie erkenne ich typische Anfangssymptome einer Demenzerkrankung, obwohl ich selten vor Ort bin? Die Antwort liegt in der Technik: Zuverlässige und bezahlbare Sensorik gepaart mit präziser Datenanalyse erfasst und interpretiert wichtige Informationen schnell und ermöglicht eine umgehende Reaktion.

Bei dem IT- und Beratungsunternehmen IBM arbeitet man an eben solchen Technologien, die Senioren, Kranken und Menschen mit Behinderung sowie ihren Betreuern den Alltag erleichtern sollen. Die Analysesoftware IBM Watson erlaubt zum Beispiel die Sammlung und Auswertung von Daten, die von diversen Sensoren erfasst werden – etwa zur Bewegung in der Wohnung oder zu Feuer und Rauch, Wasserfluss, Lichtverhältnissen oder offenen Fenstern. Die Aufgabe, daraus einen sinnvollen und nutzerfreundlichen Service speziell für Angehörige zu gestalten, übertrug IBM seinem Tochterunternehmen Aperto. Die Berliner Digitalagentur gehört mit ihren rund 400 Mitarbeitern seit 2016 zu IBM iX, der globalen Agenturfamilie des Technologiekonzerns. Am Projekt Elderly Care arbeitete ein interdisziplinäres Aperto-Team aus Business Owner, Project Owner, User Experience und User Interface Designer, Developer sowie QA & DevOps Manager.

Nutzerbedürfnisse eruieren: 
Recherche und Workshop

Leticia Bialoskorski ist User-Experience-Designerin bei Aperto und war von Anfang an am Projekt Elderly Care beteiligt. »Zum Einstieg haben wir uns mit der Sensortechnik vertraut gemacht und Benchmark-Forschung betrieben«, berichtet sie. Erste Programme für Pflegedienste, die mittels Sensordaten Informationen zur Aktivität von Gepflegten liefern, gab es bereits. Ziel von IBM und Aperto war aber eine Anwendung für die Angehörigen. »Die Herausforderung bestand darin, ein Gefühl von Sicherheit und Beruhigung anstelle von Überwachung zu vermitteln. Die Sensorik sorgt sich um den Bewohner, ohne dass ein Big-Brother-Eindruck entsteht«, erinnert sie sich.

»Die Herausforderung bestand darin, ein Gefühl von Sicherheit und Beruhigung anstelle von Überwachung zu vermitteln. Die Sensorik sorgt sich um den Bewohner, ohne dass ein Big-Brother-Eindruck entsteht« Leticia Bialoskorski

Bialoskorski gehört innerhalb der Agentur zu einem Expertenteam für Lean Service Creation, das in einem schlanken Prozess digitale Lösungen entwickelt. Dazu gehört nicht nur der konsequente Fokus auf den Nutzer, sondern auch die enge Zusammenarbeit mit dem Kunden. Um die Bedürfnisse und Wünsche aller Stakeholder zu ermitteln, organisierte das initiale Aperto-Team, zu dem neben Bialoskorski eine Designerin und ein Business Owner gehörten, einen zweitägigen Design-Thinking-Workshop mit dem Projektpartner IBM sowie potenziellen Nutzern. Hier klärten sie generelle Fragen wie: Was muss der Service leisten? Wie sieht die User Journey aus, und welche Probleme ergeben sich dabei? Das Briefing war zu dem Zeitpunkt noch recht offen und basierte lediglich auf der Idee, einen Service für Betreuer einer älteren Person zu entwickeln, der Sensordaten verwendet. Im Laufe des Workshops verfestigte sich dann die Vorstellung einer Smartphone-App für Angehörige – unter anderem deshalb, weil darüber im Notfall Push-Nachrichten versendet werden und die Nutzer schnell und unkompliziert kommunizieren können.

Als potenzielle User kristallisierten die Workshopteilnehmer zwei Personas heraus, also fiktive Personen mit konkreten Eigenschaften und Verhaltensweisen: Andrea hat die typischen Nöte einer Tochter, die zu weit von ihrer in die Jahre gekommenen Mutter entfernt wohnt, um sich um Arztbesuche oder dergleichen zu kümmern. Ihr Sohn Thomas wohnt deutlich näher und schaut regelmäßig bei seiner Oma vorbei. Beide sind sich manchmal unsicher über das Befinden der Seniorin. »Diese beiden Personas decken die Zielgruppe gut ab, wie wir in Gesprächen mit Betreuten und Angehörigen festgestellt haben«, so Bialoskorski.

Für diese potenziellen Nutzer entwarfen die Workshopteilnehmer Soll-Szenarien in Form von Storyboards, die sie wiederum in einzelne User Storys herunterbrachen. »Das sind im Grunde schon Feature-Beschreibungen für die spätere Anwendung – so formuliert, dass sie die Nutzerbedürfnisse beschreiben. Auf deren Basis zeichne ich erste Scribbles, die anschaulich machen, wie das Interface der App aussehen könnte«, erklärt Bialoskorski. In dem Workshop formulierte das Team zudem sogenannte Hills: Ziele, die es mit dem ersten Release der App erreichen wollte.

Ausprobieren: 
Prototyping und Testing

Nach dem Workshop priorisierte das Aperto-Team die gewünschten Funktionalitäten der App: Was sind die Kernfunktionen? Welche sind weniger wichtig und können warten? Wie sieht der Ablauf innerhalb der App aus? Dann machte man sich an den ersten Prototyp. UX-Designerin Bialoskorski fertigte in dem Designtool Sketch erste Skizzen an, Wireframes genannt, und verband sie in dem Prototyping-Tool InVision miteinander. User-Interface-Designerin Julia Lingertat gestaltete parallel die Oberflächen und Interaktionen. Der so entstandene Klickdummy zeigte bereits den User Flow und vermittelte ein Gefühl für das Look-and-feel der App. »Das visuelle Design spielte bei diesem Projekt von Anfang an eine wichtige Rolle, weil es sich um ein sehr emotionales Thema handelt. Es geht nicht nur um die Informationen, sondern auch stark darum, wie sie dargestellt werden«, erklärt Santiago Uribe, inzwischen der verantwortliche User Interface Designer für das Projekt. Ein rot blinkender Alarmbutton etwa löst schnell Panik aus – und im Notfall ist eher ein kühler Kopf gefragt.

»Das visuelle Design spielte bei diesem Projekt von Anfang an eine wichtige Rolle, weil es sich um ein sehr emotionales Thema handelt. Es geht nicht nur um die Informationen, sondern auch stark darum, wie sie dargestellt werden« Santiago Uribe

Mittels InVision lassen sich Prototypen auf mobilen Geräten testen. Sie fühlen sich dann schon an wie eine App, bevor die Funktionen tatsächlich entwickelt wurden. Die Designer verbinden die Screens über einfache Wenn-dann-Verknüpfungen miteinander, sodass sie die Abläufe mit dem Kunden und den potenziellen Nutzern testen können. Letztere brauchen dafür keinen eigenen InVision-Account, sondern können durch die Eingabe eines Passworts einfach den Prototyp auf einem Mobilgerät öffnen und drauflos klicken.

Beim User Testing arbeitet Aperto unter anderem mit dem Crowdtesting-Anbieter Applause zusammen. Dieser wählt aus seiner Datenbank von über 100 000 Menschen in Deutschland gemäß der von Aperto vorab definierten Zielgruppe Probanden aus und schickt ihnen den Link zum Klickdummy sowie einen von Aperto formulier ten Fragenkatalog: Verstehen Sie die App? Gefällt Ihnen das Design? et cetera. »Es ist enorm wichtig, so schnell wie möglich zu testen und Feedback von Nutzern einzuholen, da wir am Anfang ohne allzu viel Recherche auf der Basis von Personas und Hypothesen arbeiten. Nur durch User-Feedback können wir wissen, ob wir mit dem Prototyp auf dem richtigen Weg sind«, so Bialoskorski.

Den ersten Prototyp von Elderly Care testeten 25 Probanden – mit positiven Ergebnissen. Die eingeschlagene Richtung war also die richtige, eine weitere Prototyping-Schleife nicht notwendig. »Manche Nutzer teilten sogar persönliche Geschichten und lobten die Idee und Funktionen der App«, freut sich Bialoskorski. Ergebnisse des ersten Crowdtests waren zudem, dass der Begriff »Betreute« passender ist als »Betroffene«, dass das Design gut ankommt und das Thema Datensicherheit eine große Rolle spielt. Mithilfe des InVision-Prototyps holte Aperto außerdem das Feedback vom IBM-Team ein, das innerhalb der App direkt kommentieren konnte.

»Es ist enorm wichtig, so schnell wie möglich zu testen und Feedback von Nutzern einzuholen, da wir am Anfang ohne allzu viel Recherche auf der Basis von Personas und Hypothesen arbeiten. Nur durch User-Feedback können wir wissen, ob wir mit dem Prototyp auf dem richtigen Weg sind« Leticia Bialoskorski

Ein weiterer Vorteil des Tools: Sämtliche hochgeladenen Designs können sich die Entwickler später als Assets (Icons, Textfelder, Buttons und so weiter) herunterladen und nutzen. »Früher mussten Designer alles pixelgenau abmessen, Farbcodes und Fonts an die Entwickler weitergeben«, erklärt Nico Neumann, DevOps und Quali-
ty Assurance (QA) Engineer bei Aperto. »Heute können die Entwickler einfach ein Icon anklicken und die entsprechenden Informationen und Codeschnipsel herunterladen. Deshalb ist InVision ein gutes Tool für die interdisziplinäre Zusammenarbeit, die uns sehr wichtig ist.«

Kernfunktionen definieren: 
Warnen und beruhigen

Der Prototyp, mit dem Aperto in die Entwicklung startete, umfasste die wichtigsten Grundfunktionen. Dazu gehört vor allem der Registrierungsprozess. Dabei handelt es sich um eine Zwei-Faktor-Authentifizierung – immerhin geht es um sehr persönliche Daten. Dank eines automatisiert erzeugten und verschlüsselten Aktivierungscodes ist das Verfahren sehr nutzerfreundlich.

Auf dem Hauptscreen liest der Nutzer den aktuellen Status ab. Die App zeigt in den Farben Grün, Orange und Rot an, ob alles in Ordnung ist oder ob es Unstimmigkeiten gibt. Die Statusanzeige ist mit einer leichten Animation unterlegt, die die Ansicht interessant macht und emotional auflädt. »Idealerweise sieht man nur den grünen Screen der App – denn das bedeutet, dass alles in Ordnung ist und man nicht weiter aktiv werden muss«, sagt Bialoskorski. Gibt es aber Unstimmigkeiten (Orange) – wie zu lange laufendes Wasser in Kombination mit fehlender Bewegung über einen längeren Zeitraum –, kann der Nutzer sich die Sensordaten anzeigen lassen und daraufhin selbst entscheiden, ob er etwas tun muss. Sei es, kurz bei Oma anzurufen oder im Zweifel den Notdienst der Malteser einzuschalten. Ein roter Alarm geht allerdings direkt an den Notruf der Malteser, und nur diese können ihn wieder deaktivieren, nachdem sie nach dem Rechten gesehen haben.

»Idealerweise sieht man nur den grünen Screen der App – denn das bedeutet, dass alles in Ordnung ist und man nicht weiter aktiv werden muss« Leticia Bialoskorski

Für den Austausch unter den Nutzern gibt es außerdem eine Kommentarfunktion. So kann Thomas seine Mutter zum Beispiel darüber informieren, dass er auf eine Warnung hin zur Oma gefahren ist und dass dort alles in Ordnung ist. »Nutzer tauschen hier voraussichtlich lediglich kontextbezogene Informationen aus, wichtige Details oder Notfälle besprechen sie über andere Kanäle. Aber die Kommentarfunktion innerhalb der App war den Test-Usern sehr wichtig«, erklärt Bialoskorski. Nach der Definition dieser Kernfunktionen startete das Team in die App-Entwicklung.

Loslegen: Agile Entwicklung 
und Tools

An der technischen Umsetzung war neben Aperto auch ein Entwicklungsteam von IBM beteiligt, das zeitgleich das Backend aufbaute, von dem die App die Sensordaten bezieht. Das Projektteam besprach mit IBM die einzelnen Features (User Storys) aus dem Workshop und definierte die Bedingungen, die erfüllt sein mussten, damit eine Story als erledigt gelten konnte. Dann wurde »gepokert«: Dabei bekommen alle Mitarbeiter Karten mit Zahlen zwischen 1 und 13, mit denen sie die Komplexität einer Story schätzen. Ist die Authentifizierung eine Sieben – oder doch nur eine Drei? Erreicht eine Story die Maximalpunktzahl, wird sie in mehrere Storys unterteilt.

Bei der App-Entwicklung orientiert sich Aperto an der agilen Projektmanagementmethode Scrum, hat diese aber für sich spezialisiert und eine eigene Lean-Service-Creation-Methode entwickelt. Um deren Prozesse gut abzubilden, nutzte die Elderly-Care-Mannschaft das Workflow-Management-Tool JIRA, in das sie die einzelnen Aufgaben einspeiste und festlegte, welche sie innerhalb der Scrum-typischen Zeitintervalle von zwei Wochen, der sogenannten Sprints, erledigen wollte. Die einzelnen Aufgaben splittete das Team nach Disziplinen auf: UX Design, Interface Design, Development, Quality Assurance et cetera. Am Anfang jeder Story setzten sich meist UX, UI und oft auch Programmierer zusammen, um gemeinsam erste Lösungsansätze mit Stift und Papier zu scribbeln.

Eingangsbereich bei Aperto

Jeder Morgen begann mit einem Daily Stand-up Meeting, zu dem IBM per Telefon zugeschaltet wurde und in dem man gemeinsam besprach, was am jeweiligen Tag anstand. Solche Treffen sorgen für Transparenz im Arbeitsprozess und für reibungslose Abläufe. Hakt es bei einer Story, lässt sich schnell erkennen, wo das Problem liegt, und gemeinsam gegensteuern. Der Scrum Master überwacht den Prozess und kümmert sich darum, dass die Storys von oben nach unten abgearbeitet werden. »Bei traditionellen, nicht agilen Arbeitsprozessen ist jeder nur mit seinem Aufgabengebiet beschäftigt. Wir aber planen im Team, die Schätzung des Arbeitsaufwands gilt immer für uns alle. Außerdem reden wir mehr miteinander und inspirieren uns gegenseitig«, sagt Bialoskorski über das agile Vorgehen.

»Wir aber planen im Team, die Schätzung des Arbeitsaufwands gilt immer für uns alle« Leticia Bialoskorski

Den Projektverlauf dokumentierten die Aperto-Mitarbeiter außerdem mit der Kollaborationssoftware Confluence, einer Art Wikipedia für den Wissensaustausch intern sowie mit Kunden. Hier halten die Mitarbeiter ihre Arbeit an jeder Story in Bild und Text fest. Neben Bialoskorskis Wireframes samt Beschreibung fanden sich darin zum Beispiel die Ergebnisse aus den funktionalen Crowd-Testings, die der Quality-Assurance-verantwortliche Nico Neumann nach jedem Sprint durch den Crowdtesting-Service Applause durchführen ließ. Ergaben sich dabei neue Anforderungen oder Bugfixes, gingen diese als neue Storys in den JIRA-Plan ein – nachdem im Team besprochen wurde, wie wichtig sie sind und wie schnell sie erledigt werden müssen. Insgesamt nahm die Entwicklung vier Sprints in Anspruch und dauerte acht Wochen. Dann war das Minimum Viable Product (MVP) fertig, die erste marktfähige Version der App.

Eingang von Aperto – Bild: Aperto
1/19
Aperto Elderly Care Case – Making-of
Interface Designer Santiago Uribe und UX-Designerin Leticia Bialoskorski feilen gemeinsam am Look- and-Feel der Elderly-Care- App – unter anderem mithilfe von gescribbelten Storyboards. – Bild: Aperto
2/19
Aperto Elderly Care Case – Making-of
Interface Designer Santiago Uribe und UX-Designerin Leticia Bialoskorski – Bild: Aperto
3/19
Aperto Elderly Care Case – Making-of
Die Persona Andrea – Bild: Aperto
4/19
Aperto Elderly Care Case – Making-of
Erste Scribbles – Bild: Aperto
5/19
Aperto Elderly Care Case – Making-of
Erste Scribbles – Bild: Aperto
6/19
Aperto Elderly Care Case – Making-of
Erste Scribbles – Bild: Aperto
7/19
Aperto Elderly Care Case – Making-of
Storyboard – Bild: Aperto
8/19
Aperto Elderly Care Case – Making-of
Wireframe – Bild: Aperto
9/19
Aperto Elderly Care Case – Making-of
Wireframe – Bild: Aperto
10/19
Aperto Elderly Care Case – Making-of
Wireframe – Bild: Aperto
11/19
Aperto Elderly Care Case – App Scenes
Die finale App: : Die App signalisiert mittels Ampelfarben den aktuellen Status des Betreuten. Die Anzeige ist mit einer leichten Animation unterlegt, die die Ansicht interes- sant macht und emotional auflädt. – Bild: Aperto
12/19
Aperto Elderly Care Case – App Scenes
Die finale App – Bild: Aperto
13/19
Aperto Elderly Care Case – App Scenes
Die finale App – Bild: Aperto
14/19
Aperto Elderly Care Case – App Scenes
Die finale App – Bild: Aperto
15/19
Aperto Elderly Care Case – App Scenes
Die finale App – Bild: Aperto
16/19
Aperto Elderly Care Case – Making-of
Flowchart: Wenn A, dann B: Übersichtliche Flowcharts zeigen den Nutzungs- verlauf innerhalb der Elderly- Care-App. Bei der ersten Nutzung muss sich der User registrieren, danach gelangt er vom Start- screen direkt aufs Dashboard und kann von dort auf weitere Bereiche der App zugreifen. – Bild: Aperto
17/19
Eingang von ApertoAperto Elderly Care Case – Making-of
Fürs Workflow-Management nutzte das Elderly-Care-Team JIRA. In dem Tool hielten sie die einzelnen Aufgaben sowie die Zeiträume fest, in denen diese zu bearbeiten waren. – Bild: Aperto
18/19
Aperto Elderly Care Case – Making-of
So sieht die Oberfläche des Designprogramms Sketch aus, in dem Leticia Bialoskorski die Wireframes gestaltete. – Bild: Aperto
19/19

Implementieren: Erste Projekte und Feedback

Im Rahmen eines ersten Kundenprojekts wurden seit März 2017 in 50 Wohnungen in Berlin und anderen Metropolregionen diverse Sensoren installiert und die Malteser sowie die Angehörigen der Bewohner mit der Elderly-Care-App ausgestattet. Im Team ist man gespannt: »Was die Tester zu einer App vorab sagen, ist das eine. Was die User dann tatsächlich damit tun oder wie sie sie bewerten, das andere«, weiß Bialoskorski.

Aperto und IBM konzipierten die App als Whitelabel-Lösung, die IBM in Partnerschaft mit dem Malteser Hilfsdienst Versicherungen anbieten will. Dank des modularen Aufbaus können diese die App schnell an ihre eigenen Anforderungen anpassen und sie ihren Corporate-Farben entsprechend branden. Betreute und ihre Angehörigen erhalten das System bei ihren Versicherungen – inklusive Sensoren, IBM-Technik, Pflegedienst und App.

Projekte wie dieses werden laut Leticia Bialoskorski zukünftig vermehrt auf Aperto zukommen: nutzerzentrierte Services, die von IBM entwickelte Produkte und Technologien beinhalten. Auf diese Weise bekommen die UX Designer bei Aperto die Chance, mit innovativen Technologien vor allen anderen Marktteilnehmern zu arbeiten.

Produktfilm zur App Elderly Care:

 

Lean Service Creation

Apertos Arbeitsprozess vereint Design Thinking und agile Entwicklung. Im Zentrum steht dabei der User. Im Design-Thinking-Prozess recherchieren die Teams die Nutzerbedürfnisse, führen Marktanalysen durch und definieren ein konkretes Problem, das sie lösen wollen. Dazu sammeln sie Ideen, entwerfen User Journeys und entwickeln einen ersten Lo-Fi-Prototyp fürs Testing. Je nach Testausgang arbeiten sie auf diesem Prototyp weiter oder fangen noch einmal von vorne an.

Im Anschluss bauen die Aperto-Mitarbeiter im agilen Development den Prototyp immer weiter aus, wobei sie nach jeder Stufe erneute Usertests durchführen, um zu überprüfen, ob sie auf dem richtigen Weg sind. So ergeben sich mehrere iterative Schleifen, bis am Ende ein marktfähiges Produkt oder Servicesystem steht. Die Markteinführung selbst ist häufig ein weiterer Test: Wie kommt das Produkt an? Muss es verändert oder weiterentwickelt werden? Ein derart schlanker Prozess ermöglicht die schnelle Reaktion auf Kunden- und Userbedürfnisse und bindet den Auftraggeber eng mit ein. Die Agentur ist so nicht mehr bloßer Dienstleister, sondern vielmehr Berater auf Augenhöhe.

Hier klicken, um die Grafik größer zu sehen.

Alle weiteren PAGE-Connect Artikel zum Thema UX Design bei Aperto finden Sie hier.

Zum Download des PAGE Connect eDossiers »Das macht ein UX Designer bei Aperto – An IBM Company« geht’s hier.

[720] UXDesignCCCAP17

 

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Merken

Produkt: PAGE - Video - UX/UI Design – Digitale Produkte gestalten
PAGE - Video - UX/UI Design – Digitale Produkte gestalten
Videoaufzeichnung der PAGE Webinar Week »UX/UI Design« mit Daniel Kränz, Head of Interaction Design bei deepblue networks in Hamburg. Geballtes Know-how in 5 Lessons – bequem und einfach, wann immer Sie wollen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren