Interaction Design in der Praxis

Das ist mal was anderes: In einem Meeting mit hochqualifizierten Ingenieuren sitzen, die für einen großen Industriekonzern arbeiten, um gemeinsam herauszufinden, wo die Probleme ihres neuen Produkts liegen. In dieser Situation fand sich ein Team der Hamburger Agentur deepblue networks Anfang des Jahres 2016 wieder. Das Unternehmen Bosch Connected Devices and Solutions (BCDS), eine Tochter des Bosch-Konzerns, die sich um Innovationen und das Erschließen neuer Geschäftsfelder kümmert, hatte deepblue kontaktiert und um Hilfe bei der Entwicklung und Optimierung eines neuen Produkts gebeten.

Dabei handelte es sich um den Transport Data Logger (TDL), ein Gerät, das verschiedene Sensoren sowie eine entsprechende Firmware zur Auslesung kombiniert und so den blinden Fleck beim Warentransport ausleuchten soll. Konkreter: Das Gerät misst Parameter wie Neigung, Feuchtigkeit und Temperatur, um anzuzeigen, welchen Einflüssen und Belastungen eine Lieferung ausgesetzt war – etwa wenn eine Maschine von Deutschland nach China transportiert wurde – und ob es dabei zu Unregelmäßigkeiten kam. Die gesammelten Daten übermittelt es über Bluetooth Low Energy (BLE) an eine zugehörige Smartphone-App.

Die neuartige Lösung entstand vor dem Hintergrund der Industrie 4.0 – auch vierte industrielle Revolution genannt. Auch Industrieunternehmen müssen sich der Digitalisierung stellen und die neuen Technologien und Vernetzungsmöglichkeiten für die Kommunikation mit ihren Kunden und den Anwendern ihrer Angebote nutzen. Hier spielt das Internet of Things eine große Rolle ebenso wie das Angebot von ganzen Servicesystemen statt einzelner »fertiger« Produkte. Die Anforderungen im Business-to-Business-Bereich unterscheiden sich dabei kaum vom Business-to-Consumer-Markt: Die Kunden erwarten verständliche, intuitiv nutzbare Produkte und Services sowie die Möglichkeit, direkt mit dem Hersteller zu kommunizieren. Nur Unternehmen, die sich dieser Herausforderung stellen, werden in Zukunft am Markt bestehen können.

Ein ziemlich komplexes Feld also, und auf den ersten Blick mag es verwundern, dass BCDS bei diesem Thema den Input einer Kommunikationsagentur einholte – auch wenn diese einen digitalen Schwerpunkt hat. Doch deepblue hat in den vergangenen Jahren ein schlagkräftiges Interaction-Design-Team aufgebaut, das etwa mit der Entwicklung der Einkaufsapp für den Schweizer Konzern Migros bewiesen hat, dass es für so eine Aufgabe bestens aufgestellt ist. Während BCDS die Sensortechnologie ihres TDLs zweifellos am besten selbst beurteilt und optimiert, ging es bei diesem Auftrag um den Brückenschlag zum User. »Wir schauen aus der Perspektive des Nutzers auf das Produkt und erkennen so Probleme bei der Anwendung«, erklärt Florian Liebold, Vorstand bei deepblue networks. »Wir denken an den Lagerarbeiter, der in einer dunklen, kalten Halle steht, dicke Handschuhe trägt und wenig Zeit und Lust hat, sich lange mit einer App herumzuschlagen.«

Herantasten an Kunde 
und Produkt

In einem ersten Chemistry Meeting ging es vor allem darum, sich gegenseitig kennenzulernen und den Kunden und das Produkt zu verstehen. Letzteres erwies sich als gar nicht so einfach, denn die erste Demo-App, die Bosch mit einem anderen Dienstleister entwickelt hatte, war sehr technisch und wenig auf Usability ausgerichtet. »Es gab ein User Manual für die Anwendung, und selbst dieses war schwer zu verstehen«, erinnert sich Daniel Kränz, Interaction Designer bei deepblue networks. »Das ist ein absolutes No-Go: Schließlich sollte eine App so intuitiv gestaltet sein, dass man sie ohne Bedienungsanleitung einfach nutzen kann.«

»Wir schauen aus der Perspektive des Nutzers auf das Produkt und erkennen so Probleme bei der Anwendung« Florian Liebold, Vorstand bei deepblue networks

Das Kennenlernen verlief positiv, sodass sich deepblue im nächsten Schritt zurückzog, um tiefer ins Thema einzusteigen und einen gemeinsamen Workshop mit dem Kunden vorzubereiten. »Wir haben uns zwei Wochen intensiv damit beschäftigt, was das Produkt kann und wie alles zusammenhängt«, so Kränz. Dabei konnte das Team auf Material von BCDS zurückgreifen, darunter Spezifikationen zum Device und Interviews mit potenziellen Kunden. Außerdem recherchierte Kränz gemeinsam mit Senior-Artdirektorin Lizbeth Sanchez und dem Interaction-Design-Praktikanten Lucas Köhler zum Thema Logistik und Transport, um ein Gespür für die Rollen und Bedürfnisse zu bekommen, die in diesem Kontext wichtig sind. Auf dieser Basis trug er Fragen und mögliche Probleme bei der Nutzung zusammen, die vor Ort gemeinsam mit dem Kunden geklärt werden sollten.

Da deepblue auch die Schnittstelle zwischen dem Transport Data Logger und der App programmieren sollte, war es wichtig, von Anfang an die Technikkompetenz im Team zu haben. »Wir sind kein Softwaredienstleister und mussten erst mal Vertrauen schaffen und zeigen, dass wir mehr können als Werbung«, erklärt Burkhard Müller, Executive Creative Director bei deepblue. »Nämlich dass wir in der Lage sind, konkreten Nutzwert zu schaffen und das Produkt rund zu machen.« Deshalb war bei dem Workshop neben Vertretern aus Beratung und Kreation auch ein auf Applikationslogik spezialisierter Entwickler dabei, der normalerweise erst im weiteren Projektverlauf hinzustößt.

Grundsatzfragen klären

»Wenn man sich als Interaction Designer in der Konzeptphase verrennt, kann das viel Zeit und Geld kosten« Daniel Kränz, Interaction Designer bei deepblue networks

Bei dem Workshop im Dezember 2016 präsentierte deepblue unter anderem eine Customer Journey anhand eines fiktiven Szenarios, um den Nutzungskontext greifbar zu machen. Daraus ergaben sich bereits erste wichtige Fragen: Für wen ist die App gedacht? Wer hat Interesse an den Informationen? Wer bedient die App? Was muss der Transport Data Logger leisten und was die App? So ist zum Beispiel der Versender derjenige mit dem Wissen über die Ware, der Logistiker jedoch derjenige, der den Transport durchführt (meist sind hier auch noch mehrere Unternehmen und Verkehrsmittel im Spiel). Der Empfänger wiederum ist derjenige, der die Daten auslesen und die Informationen eventuell an den Versender weiterleiten muss. Die vom TDL gemessenen Daten müssen also zwischen verschiedenen Personen und Rollen ausgetauscht werden.

Diese Fragen diskutierte das deepblue-Team gemeinsam mit BCDS, um die Marschrichtung für das Interaction Design festzulegen. Außerdem definierten die Workshop-Teilnehmer gemeinsam eine Vision, die den Kern des Produkts kurz und verständlich wiedergibt. »Das ist wie bei Kickstarter: Das Produktversprechen muss in eine Überschrift passen«, erklärt Burkhard Müller. Die Vision gemeinsam mit dem Kunden zu formulieren sei wichtig, damit alle das gleiche Verständnis haben, sich demselben Ziel verpflichten und sich involviert fühlen.

Das Ergebnis: Der Transport Data Logger ist ein loyaler Begleiter, der Güter vom Versand bis zur Auslieferung kontrolliert, alle Einflüsse misst, Verstöße registriert und sämtliche Informationen transparent aufzeigt. »Markenpositionierungen sind die Kernkompetenz von Werbeagenturen«, so Burkhard Müller. »Was für uns Brot und Butter ist, ist für Kunden jenseits des Marketings etwas komplett Neues.« BCDS war überzeugt von den ersten Ergebnissen des Workshops, fasste Vertrauen in die Kompetenz von deepblue und gab dem Team das Go für die Entwicklung.

Schritt für Schritt zum 
finalen Konzept

Basierend auf den Erkenntnissen der Rollenmodelle und möglichen Nutzungsszenarien begann Daniel Kränz damit, an einer Informationsarchitektur zu arbeiten, die er in einem Flowchart festhielt. Gemeinsam mit seinem Team entwickelte 
er diesen Entwurf immer weiter. Ziel war es, eine möglichst simple App mit so wenigen Interaktionen wie möglich zu entwerfen, die jedes denkbare Szenario abdeckt. Das bedeutete viel Ausprobieren. »Man muss sich Zeit nehmen, um wirklich intensiv über Use Cases nachzudenken«, erklärt Kränz.

»Wir machen Probleme ausfindig und legen den Finger in die Wunde« Burkhard Müller, Executive Creative Director bei deepblue networks

In diesem Stadium visualisierte Daniel Kränz seine Konzepte in einfachen Wireframes, das komplette Flowchart hing stets gut sichtbar an einer Wand im Projektraum. Bei der initialen Konzeption arbeitete deepblue bewusst unabhängig, um sich nicht durch die Sicht des Kunden beeinflussen zu lassen und um eigene Lösungen zu finden. So stieß das Team zum Beispiel auf das Problem, dass die einzelnen User unterschiedliche Zugangsrechte brauchen – andernfalls wäre es theoretisch möglich, dass der Logistiker Grenzwerte im nachhinein verändert, um Feh-
ler beim Transport zu kaschieren. Aus diesem Grunde integrierte deepblue eine PIN-Sperre in das Konzept. »Wir machen Probleme ausfindig und legen den Finger in die Wunde. Wichtig ist aber, dass man den Kunden nicht nur mit den Fehlern konfrontiert, sondern auch gleich einen Lösungsvorschlag parat hat«, erklärt Burkhard Müller.

Als das Konzept konkreter wurde, entwickelte das Team erste Klickdummys und testete diese intern mit Kollegen. Dafür setzte es zum einen die Webanwendung Flinto ein, mit der sich mehrere Wireframes verbinden und Interaktionen durchspielen lassen. »Die Prototyping-Phase ist der Lackmustest für ein Interaction-Design-Team«, sagt Florian Liebold. »Hierfür braucht es ganz neue Kompetenzen im Ökosystem Agentur, die es noch vor wenigen Jahren so nicht gab.«

Konzept, Design und Technik greifen ineinander

Neben der Arbeit an der Informationsarchitektur begann das Team mit den ersten Überlegungen zum Visual Design. Hier war vor allem Senior-Artdirektorin Lizbeth Sanchez verantwortlich, und Praktikant Lucas Köhler experimentierte viel mit den Datenvisualisierungen. Die Zusammenarbeit von Konzeption, Design und technischer Umsetzung verlief dabei fließend, die Disziplinen befruchteten einander.

Um das Look-and-feel und den Duktus der App zu definieren, arbeiteten die Designer mit Style Tiles, einer Art Designtemplates für das Visual Design, mit denen man Ideen schnell und konkret sichtbar machen kann. Schritt für Schritt näherten sie sich mit gestalteten Prototypen dem finalen Screendesign. Beim Erscheinungsbild bestand Bosch auf der Übernahme der eigenen Corporate Identity – allerdings relaunchte der Konzern diese während des Projektzeitraums. Daher ist die erste Version der TDL-App noch in den alten Unternehmensfarben Blau, Grau und Rot gehalten, für das finale Release passten die deepblue-Designer sie an die neue, buntere Farbwelt an.

Die Entwickler waren von Anfang an mit im Boot. Denn um das strenge Timing zu halten – eine funktionale Vorabversion sollte auf der Hannover Messe im April vorgestellt werden –, mussten sie die technischen Schnittstellen parallel zur Konzeptphase programmieren. Die Kreation bei deepblue arbeitet grundsätzlich eng mit den Entwicklern zusammen, um die Realisierbarkeit ihrer Ideen garantieren zu können. »Wenn man sich als Interaction Designer in der Konzeptphase verrennt, kann das viel Zeit und Geld kosten«, warnt Daniel Kränz. Für spezielle Kompetenzen wie iOS- und Android-Entwicklung arbeitet deepblue mit externen Spezialisten zusammen.

Zusätzlich zum internen Austausch wurde auch der Kunde regelmäßig für Feedback hinzugezogen. Am Anfang, als noch viele technische Details geklärt werden mussten, tauschte sich das Team mehrmals die Woche mit den Ansprechpartnern bei BCDS aus, darunter das Projektmanagement sowie der verantwortliche Entwickler der Firmware, die auf dem TDL installiert ist und mit der die App kommunizieren muss. Später gab es einmal pro Woche ein Update- und Feedback-Meeting – entweder vor Ort in Reutlingen oder virtuell via Google Hangout. Den aktuellen Stand präsentierte deepblue stets anhand von Prototypen in Flinto, im späteren Verlauf via HockeyApp, einem Tool zum Installieren von iOS- und Android-Apps vor deren Release in den App-Stores. »Bloß keine PowerPoint-Präsentationen!«, findet Burkhard Müller. »Am meisten lernt man, wenn man seinem Gegenüber unkommentiert einen Prototyp in die Hand drückt und guckt, wie er damit zurecht kommt.«

Erster Meilenstein: 
Hannover Messe

Im April 2016 war Showdown: Auf der Hannover Messe präsentierten BCDS und deepblue erstmals den Transport Data Logger. Dabei handelte es sich um ein Minimum Viable Product (MVP), also einen funktionsfähigen Prototyp, der noch weiterentwickelt wird. Dieses Vorgehen orientiert sich an der Denke von Start-ups: So schnell wie möglich eine Betaversion fertigstellen und diese von den künftigen Nutzern testen lassen. Danach kann das Produkt zielgerichtet optimiert werden. Das führt zu besseren Ergebnissen, als wenn Designer und Entwickler im stillen Kämmerlein für sich arbeiten.

»Am meisten lernt man, wenn man seinem Gegenüber unkommentiert einen Prototyp in die Hand drückt und guckt, wie er damit zurecht kommt« Burkhard Müller, Executive Creative Director bei deepblue networks

Für Aufmerksamkeit sorgte BCDS mit einem Versuchsaufbau, in dem ein Mini-Truck mit Sensorbox von A nach B fährt und dabei verschiedenen Einflüssen ausgesetzt wird. Das machte das Userszenario für die Messebesucher anschaulich und leicht verständlich. Das Interface der TDL-
App war auf einem großen Display zu sehen, damit mehrere Menschen gleichzeitig teilhaben konnten. Das Produkt weckte reges Interesse bei den Besuchern der Messe. »Das schwarze Loch in der Transportkette ist ein reales Problem für viele Industrieunternehmen«, so Daniel Kränz.

Nach dem erfolgreichen Auftakt integrierte deepblue weitere Features und passte den Look der TDL-App der neuen Bosch-CI an. Mit dem Projekt wagte sich deepblue in die Welt der Industrie 4.0, stieg in neue Themenfelder ein und bewies, dass gutes Interaction Design keine Frage der Branchenexpertise ist, sondern vor allem auf Empathie für den Nutzer sowie auf einer prozessualen Herangehensweise beruht. »Wir haben festgestellt, wie spannend B2B-Projekte sein können«, sagt Burkhard Müller. »Die Herausforderung bestand darin, die komplexen Prozesse so zu verpacken, dass sich die App genauso leicht bedienen lässt wie alle unsere Lieblingsapps auf dem Smartphone.« Da ist bei anderen Industriebranchen bestimmt auch noch viel zu tun!

Interaction Design: Die Problemlösung im Fokus

Beim Interaction Design geht es nicht um schicke Oberflächen – es geht darum, dass ein Produkt oder Service gut funktioniert, dass es leicht zugänglich ist und sich intuitiv bedienen lässt. »Interaction-Designer spüren Probleme bei der Nutzung auf und lösen diese so elegant wie möglich«, erklärt Burkhard Müller, Executive Creative Director bei deepblue networks. Dafür brauchen sie einen ganzheitlichen Blick und ein interdisziplinäres Berufsverständnis.

Interaktionsdesigner bewegen sich im Spannungsfeld von Konzept, Design und Entwicklung. Sie müssen all diese Perspektiven verstehen und in der Lage sein, diese harmonisch miteinander zu verbinden. Von der breit angelegten Informationssuche über die Verdichtung in ersten Hypothesen und Ideen bis zum Entwurf – in wiederkehrenden Schleifen nähert sich das Interaction-Design-Team bei deepblue networks Schritt für Schritt den richtigen Lösungen für die Probleme ihrer Auftraggeber und deren Kunden.

Auf dieses Verständnis achtet deepblue auch bei Bewerbern: Interessiert sich derjenige wirklich für Problemlösungen oder eher für schöne Designs? »Nur weil jemand gut mit Photoshop umgehen kann und ein tolles Behance-Portfolio hat, ist er noch lange kein guter Interaction Designer«, weiß Interaction Designer Daniel Kränz. »Viele Studierende fangen mit der Kür statt dem Problem an. So entstehen Konzepte, die gut aussehen und für die man gute Case-Filme drehen kann – aber nativ sind sie kaum zu bedienen, und in den Kundenbewertungen im App-Store werden sie abgestraft«, warnt Burkhard Müller. Die Kunst sei es, die konzeptionelle und die visuelle Ausrichtung nutzbringend zu kombinieren und bei der Gestaltung von Apps und Services immer den Nutzer und dessen Bedürfnisse mit Blick zu haben.

Alle weiteren PAGE-Connect-Artikel zum Thema Interaction Design finden Sie hier.

InteractionDesignCCCDB16

Merken

Merken

Merken

Merken

Merken