Kategorie-Archiv: Making of

Motion Design in der Praxis

Im bunten Studio von DELI Creative Collective mitten im Hamburger Schanzenviertel entstand ein Projekt für die Stadtwerke Düsseldorf, das alle Aspekte des Motion Designs in sich vereint.

Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf

Vogelperspektive: Vom oberen Stockwerk aus lässt sich das bunte Treiben in dem ehemaligen Schafstall beobachten.

Ein lebensgroßes Schaf aus Hart­plas­tik ist der einzige Hinweis darauf, dass die­ses Gebäude mal vor langer, langer Zeit ein Schafstall war. Heute ist die Halle direkt ne­ben der Bullerei von Starkoch Tim Mälzer eine Hochburg des Motion Designs, nämlich das sympathische Studio von DELI Cre­ative Collective. In dem durch verschie­denfarbige Wände auf den ers­ten Blick ziemlich wild gegliederten Raum – hin­ter dem sich ein ausgeklügeltes Farb­kon­zept von Interior Designer Ole Grön­woldt verbirgt – arbeiten insgesamt 24 Festangestell­te. Dazu kom­men oft Freelancer, wenn viel zu tun ist.

Hoch über dem Erdgeschoss schwe­ben Flächen, auf denen auch Regisseur Michael Reissinger und Kreativdirektorin Yvonne Inlund arbeiten. Hier entstan­den die ers­ten Entwürfe für ein Projekt, das mit spa­ßigen kleinen Charakteren, Low-Poly-Figu­ren, 3D- und Fotoelementen, Realbildern, 2D- und 3D-Typoanimation geradezu archetypisch für die Arbeit eines Motion De­signers steht, wie Michael Reissinger uns erklärt. Der gelernte Grafikdesigner ist seit den Anfangstagen für die Kreation des auf Post-, Digital- und Tonproduktion spezialisierten Studios ver­antwortlich.

»Es ist ganz wichtig, immer auf Machbarkeit zu achten. Sonst geht es einem wie den Machern von ›Life of Pi‹, die bei der Oscar-Verleihung verkündeten, dass sie bankrott sind« Martin Klauder, Geschäftsführer bei DELI Creative Collective in Hamburg

Bei DELIs so vielseitigem Motion-Design-Projekt ging es um eine praktische App der Stadtwerke Düsseldorf, die nicht nur mit Energieberatung, sondern auch mit einem bunten Mix aus Informationen übers Düsseldorfer Stadtleben aufwartet, von Kultur bis Fußball. Auch Hilfe bei der Park­platzsuche wird geboten. Ein animier­ter Werbeclip sollte möglichst kurzweilig die vielen Features der Stadtwerkzeug-App erklären.

Briefing und erste Ideen

Wie häufig bei derartigen Produktionen waren nicht die Stadtwerke selbst DELIs Auftraggeber, sondern deren Düsseldorfer Kre­ativagentur Butter – Werbeagenturen arbeiten in solchen Fällen meist mit spezia­lisierten Motion-Design-Studios zusammen. Eine der ersten Ideen des Teams: Ein Mann sitzt auf einer Bank, zückt das Handy und zeigt all die tollen Funktionen der Stadtwerke-App, als würde er die zahlrei­chen Werk­zeuge eines großen Schweizer Taschenmessers vorführen. »Wir haben der Agentur erste Entwürfe dazu vorgelegt, aber es war bald klar, dass die Person im Spot viel zu wichtig würde«, so Reissinger. »Also besannen wir uns auf den klassischen konzentrierten Look vor grünem Hintergrund, mit dem Butter auch sonst für die Stadtwerke arbeitet.«

 

Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf

Die Kreativen von DELI entwickelten ers­te Styleframes, in denen Smartphone und App im Mittelpunkt stehen. Das Handy scheint wie ein überbordendes Allzweck­werkzeug aufzuploppen, heraus schwebt das Fortuna-Stadion, aus dem ein Fußballer dem User entgegenspringt, um einen gekonnten Fallrückzieher zu landen. Im Vor­dergrund wandert ein wie von Hand illustrierter Ticker durchs Bild. Der Ansatz gefiel Butter, sodass DELI weitere Bildide­en für andere Features entwickelte: Veranstaltungstipps, Parkplatzfinder, Energieberatung. Daraus entstand ein Storyboard, das auf der Stelle inhouse ge­zeich­net wurde – und zwar von Motion Designer Pascal Reitz.

»Wir brauchen Allrounder. Premiere, After Effects, Cinema 4D und Illustrator zu beherrschen, ist Voraussetzung« Martin Klauder, Geschäftsführer bei DELI Creative Collective in Hamburg

Dabei mussten die Gestalter von vornherein an unterschiedliche Anwendungen des Spots denken. Außer auf Regionalsen­dern, im Kino, im Düsseldorfer Fußballstadion und auf der Stadtwerke-Website sollten einzelne Abschnitte auch im Fahrgast-TV von Straßen- und U-Bahnen funktionieren. Was aus dem Telefon rausgeflogen kam, musste also auch immer dort wieder verschwinden, um kurze, in sich ab­ge­schlos­sene Vignettenfilme entstehen zu lassen.

Eine zu­sätzliche Herausforderung: Auf den Mo­nito­ren der U-Bahn sowie im Stadion sollten die Clips ohne Ton laufen – sie mussten also so plakativ sein, dass sie auch stumm funktionierten. Zudem soll­ten Motive aus den Filmen auf City-Light-Pos­tern zum Einsatz kom­men. Also galt es für die Motiondesigner schon während der Arbeit daran zu denken, dass die entstehenden Bilder druckfähig sein mussten. Denn normalerweise arbeiten sie mit sehr viel niedriger aufgelösten Dateien, als dies im Print­bereich der Fall ist.

Motion Designer von Anfang an dabei

Schon in der Konzeptionsphase des Stadtwerkzeug-Clips gab es erste Animationstests mit Cinema 4D. Fünf Motiondesigner lieferten die Zutaten für die Styleframes, die Yvonne Inlund und Michael Reissinger für die Präsentation beim Kunden bauten. Wichtig war hier DELIs Produktionsexpertise: Nur Profis können abschätzen, ob die Entwürfe auch innerhalb des Budgetrahmens umzusetzen sind. »Als Mood zei­gen Kunden einem manchmal Filme, die zehnmal so viel gekostet haben, wie sie selbst ausgeben können«, sagt Martin Klau­der, einer der beiden Geschäftsführer bei DELI Creative Collective und als Producer fürs Projektmanagement zuständig. »Es ist also wichtig, immer auf Machbarkeit zu achten. Sonst geht es einem wie den Machern von ›Life of Pi‹, die bei der Oscar-Verleihung verkündeten, dass sie bankrott sind.«

Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf

Auf dem Filmset: Kreativdirektorin Yvonne Inlund und Regisseur Michael Reissinger beim Dreh im Studio von Impossible Filmproductions.

Designvorgaben gab es keine – außer der Hausfarbe der Stadtwerke, die die Mar­kenverbindung herstellt. Und so konnte DELI »einen Kessel Buntes an­rühren«, so Reissinger, »ein Potpourri, das auch visuell die Vielfalt der App unterstreicht. Typo­gra­fisch haben wir eine wilde Mischung aus Grotesk- mit Schreibschriften und 3D-Typo zusammengestellt, für die Type-Gestalter einem sonst bestimmt auf die Finger hauen würden. Aber da alles auf dieser grünen Bühne spielt, gibt es immer eine visuelle Klammer.«

Besonderen Charme geben dem Spot die trickrei­chen Verbindungen zwischen der Animation und den Händen der Models. So fährt etwa ein Auto einer Fin­ger­bewegung folgend eine Parkhausrampe hoch und findet – natürlich dank App – einen schönen Parkplatz. »Beim Dreh muss man schon wissen, was für eine Interaktion da stattfindet«, erklärt Martin Klau­der. »Na­türlich ist die Animation dann noch nicht fertig, es gibt nur ein Rohgerüst, damit man weiß, wann das Model welche Fingerbewegung machen muss. Auch vom Timing her müssen die Bewegun­gen auf die Länge der Vignette passen.« Gedreht wur­de bei Impossible Films, einer Hamburger Filmproduktion, mit der DELI öfter zusammenarbeitet.

»Da alles auf dieser grünen Bühne spielt, gibt es immer eine visuelle Klammer« Michael Reissinger, Geschäftsführer bei DELI Creative Collective in Hamburg

Insgesamt dauerte die Arbeit rund acht Wochen. 19 Leute waren in wechselnden Konstellationen am Werk inklusive Kame­ra­mann, Beleuchter, Producer und Stylis­tin bei Impossible Pictures. Besonders die fünf beteiligten Motion Designer waren gut ausgelastet. »Einer baut das Stadion, das an­schließend wiederum animiert wer­den muss«, zählt Michael Reissinger am Beispiel Esprit arena auf. »Dazu kommt je­mand, der das Stadion auf die Hände der Person trackt, die es bewegt. Die Spieler wer­den in Cinema 4D gebaut und geriggt, das heißt mit einem Skelett versehen, damit sie sich bewegen und zudem den Ball kicken können. Das macht wieder eine an­de­re Person. Und dann gibt es noch je­man­den, der diese ganzen Dinge zusammenbringt, also das Compositing und not­wendige Retuschen macht.«

Technische Voraussetzungen

Videoschnitt, 3D-Animationen, Special Effects, Com­positing – Motiondesigner müs­sen viele ausgesprochen komplexe Softwarepakete beherrschen. »Wir brauchen Allrounder«, sagt Martin Klauder. »Pre­mie­re, After Effects, Cinema 4D und Illustrator zu beherr­schen, ist Voraussetzung.« Hinzu kamen bei dem Projekt für die Stadtwerke Düsseldorf noch die Visual-Effects-Programme Autodesk Flame und Nuke, die DELI fürs Compositing einsetzt. Schließlich müssen die unterschiedlichen Animationen und Spezialeffekte noch in ein Bild montiert werden – da ist viel Rechenleistung im Spiel.

Zur Abnahme kommen die allermeist­en Kun­den persönlich vorbei. Letzte Än­de­rungswünsche kann der Motion Designer direkt vornehmen und dank leis­tungs­star­ker Rechner gleich ausspielen. Ganz schnell und unkompliziert, sodass keine weiteren Abnahme-Termine nötig sind. Und dazu gibt’s noch ein Mittagessen von der hauseigenen Köchin. Kein Wun­der, dass die Kunden gern bei DELI vorbeischauen.

Tools und Einblicke: Ausschnitte aus der Arbeit der DELI-Motion-Designer am Stadtwerkzeug-Spot

Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf Motion Design, Motion Designer, Deli Creative, App, Stadtwerke Düsseldorf

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

 

 

MotionDesignCCCDC16

Corporate Design in der Praxis

Für das DRIVE. Volkswagen Group Forum in Berlin entwickelte Strichpunkt eine eigene Corporate Identity. Dabei musste die Designagentur die Balance zwi­schen der Nähe zum Volkswagen Konzern und einem individuellen Markenauftritt halten.

Corporate Design, Strichpunkt

Alle an einem Tisch: Das hält die Hierarchien flach und sorgt dafür, dass auch mal projektfremde Menschen einen Blick auf Entwürfe werfen können.

 

Der Umbau in der Berliner Friedrich­stra­ße 84/Unter den Linden war bereits in vol­lem Gange, als die Volkswagen AG die De­signagentur Strich­punkt nach ei­nem Pitch mit der Entwicklung und Reali­sie­rung der CI sowie des CDs für das DRIVE. Volkswagen Group Forum in Berlin beauftragte. Im Jahr 1999 hatte das Automobil Forum, wie es damals hieß, seine Türen als eine Art Showroom für einige der Au­tomarken des Konzerns geöffnet. 2014 war es Zeit für einen Neuanfang: Das Gebäude wurde kom­plett umgebaut, der Name wan­delte sich zu DRIVE. Volkswa­gen Group Forum, und auch die inhaltliche Ausrichtung sollte sich ändern.

 

Kommunizieren statt präsentieren

 

Zunächst setzte sich das Strichpunkt-Team mit der Frage nach Rolle und Auf­gabe des künftigen Volkswagen Group Forums auseinander. Wofür sollte das DRIVE in Zukunft stehen? Um eine Identität zu entwi­ckeln, muss man die richtigen Fragen stellen. Schau­fenster oder Ort der Begegnung? Autohaus oder Bot­schaft? Repräsentativ oder relevant?

Die Erkenntnis nach diesem Prozess: Das DRIVE soll Antworten geben auf alle Fragen rund um das Thema Mobilität. Durch die Vielfalt der unterschiedli­chen Marken. Und mit einer Stimme. Kurz: Im DRIVE wird die Welt der Volkswagen Group erlebbar.

»Die Aufgabe des DRIVE besteht eben nicht nur in der Präsentation der Konzern­marken, sondern auch darin, Themen rund um Mobilität zu kom­munizieren«

erklärt Tobias Nusser, Creative Director und Leiter des Standorts Berlin bei Strichpunkt. »Alle drei Monate gibt es eine neue Ausstellung, die jedesmal eine andere Marke und einen anderen The­­menschwerpunkt in den Mittelpunkt der Kommunikation rückt.«

Zurzeit beispielsweise gibt Porsche unter dem Ti­tel »Faszination Sportwagen – The Future of Performance« Einblick in die Unter­neh­mens­tradition und stellt zugleich seine Vision des zukünftigen sportlichen Fahrens und Denkens vor.

 

Mobilität visualisieren

 

Wie leitet man aus diesen Erkenntnissen ein Cor­po­rate Design ab? Die Kreativen ver­t­ieften sich intensiv in das CD des Volkswa­gen Konzerns, um herauszufinden, wie sich durch den Umgang mit bestehenden Elementen und die Addition zusätzlicher Bausteine ein Markenauftritt gestalten lässt, der trotz aller Individualität auch Ver­wandt­schaft zum Konzern-Corporate-Design zeigt.

Corporate Design, Strichpunkt, DRIVE

Mahlzeit! Teil des Auftrags war die Gestaltung des Auf­tritts der beiden Restaurants Brotzeit und Zeitgeist, die zum DRIVE Forum gehören.

»Rund um das Thema Mobilität haben wir sehr viel ausprobiert und uns dabei im­mer wieder gefragt: Was ergibt ein schlüssiges Gesamtkonzept und wie lässt sich das angemessen visualisieren?«, berichtet Strichpunkt Senior Art Director Nils Jaedicke.

»Es geht ja nicht nur um die Automo­bilität, sondern auch um die Beweglichkeit im Kopf. Wir arbeiten gerne mit Assoziationsfeldern – Bewegung, Veränderung, Wandel – und nähern uns über solch einen assoziativen Weg einer visuellen Lösung.«

Tobias Nusser, Nils Jaedicke und Strich­punkt-Grafikerin Johanna Schumacher, die inzwischen zum Team hinzugestoßen war, skizzierten viele Ansätze, um Bewegung, Beweglichkeit, Mobilität und Vielfalt darzustellen und gleichzeitig die Verwandt­schaft zum Konzern zu behalten. Irgendwann kamen sie auf den Pfeil – ein schlüssiges Symbol für alles rund um das Thema Mobilität. Und so gibt es – den zwölf Marken im Konzern entsprechend – genau zwölf unterschiedliche Pfeile, die das Kernsymbol des DRIVE-Corporate-Designs bilden.

Corporate Design, Strichpunkt, DRIVE Corporate Design, Strichpunkt, DRIVE Corporate Design, Strichpunkt, DRIVE Corporate Design, Strichpunkt, DRIVE Corporate Design, Strichpunkt, DRIVE

 

Zwischen Freiheit und Vorgaben

 

Das Briefing schrieb fest, dass das DRIVE die Hausschriften des Volkswagen Konzerns, TheSans und Utopia, und möglichst auch die Farben verwenden sollte. Daran hielt sich Strichpunkt, veränderte jedoch den Umgang mit diesen Bestandteilen. Wie, erklärt Nils Jaedicke: »Wir ge­brau­chen nur TheSans, die wir statt in Grau in Schwarz setzen. Hinsichtlich der Farben sind wir ganz dicht drangeblieben, die Blau- und Grautöne entsprechen den Kon­zernfarben, die wir um ein leuchtendes Mint und ein nicht minder leuchtendes Gelb ergänzten.«

»Wir arbeiten bei Strichpunkt gerne mit Assoziationsfeldern – Bewegung, Veränderung, Wandel – und nähern uns über solch einen assoziativen Weg einer visuellen Lösung« Nils Jaedicke, Senior Art Director bei Strichpunkt in Berlin

Wichtig war den Gestaltern, dem Kunden zu erklären, warum das Corporate De­sign des DRIVE vom sehr zurückhal­ten­den Erscheinungsbild des Volkswagen Kon­zerns ab­­wei­chen muss. Denn damit es im lauten, quirligen Berlin überhaupt wahr­­genommen wird, braucht das DRIVE einen höheren Aufmerksamkeitsgrad, schließ­­lich will man auch Menschen, die auf der Straße am DRIVE vorbeigehen, zum Reinschauen bewegen. Das gelingt nicht, wenn man zurückhaltend auftritt.

»Mit dem Gesamtauftritt sind wir nah am Volks­wagen Konzern, aber ein biss­chen lauter«, fasst Tobias Nusser zusammen. »Der Pfeil ist ein eigenständi­ges Element, wel­ches das DRIVE als Symbol besetzen kann – so wie jedes gute Corporate Design nicht nur aus einem Logo oder Signet, sondern auch aus dessen Zusammenspiel mit ei­nem klaren Gestaltungsprinzip sowie Farbe, Typogra­fie und Bildsprache besteht.«

 

Brotzeit- und Zeitgeist-Assoziationen

 

Zum DRIVE gehören zwei hausinterne Gas­tronomien, die ebenfalls auf den Pfeil setzen. An einer großen Wand in der Agentur eröffneten Nils Jaedicke und Johanna Schu­macher eine Mindmap und sam­melten dort Wörter, die sie mit den Namen »Brotzeit« und »Zeitgeist« assoziierten. Von die­sen ausgehend, entwickelten sie Ideen in ganz verschiedene Richtungen, setzten zu­nächst mehr auf Quantität und brachen diese gemäß Design-Thinking-Methoden immer weiter herunter.

Stets präsent waren dabei folgende Fra­gen: Wen wollen wir mit den Restaurants be­geistern? Wie nah müssen sie beieinander sein und wie weit können sie auseinan­dergehen? »Brotzeit und Zeitgeist sprechen unterschiedliche Zielgruppen an und müssen deshalb anders kommunizieren«, erläutert Johanna Schumacher. »Brotzeit ist eher Café oder Deli und muss fröhli­cher da­herkommen, damit Laufkundschaft von drau­ßen aufmerksam wird. In das hochklassige Restaurant Zeitgeist geht man da­ge­gen geplant. Dort ist daher in der Inter­pre­tation der Corporate-Design-Bau­stei­ne Eleganz gefragt.«

Corporate Design, Strichpunkt, DRIVE

Der Pfeil steht im Mittel­punkt des Corporate Designs. Auch auf den Geschenktüten aus dem DRIVE Shop und in den Erscheinungsbildern der beiden Restaurants Zeitgeist und Brotzeit.

 

Dementsprechend fallen die Pfeile im Brotzeit sehr bunt aus, außerdem zeichnete Johanna Schumacher eine Reihe von Illustrationen, um das dortige Angebot zu visualisieren. Im Zeitgeist tauchen die Pfei­le als verbindendes Element ebenfalls auf, aber viel dezenter und eleganter. Als Schrift kommt in beiden Restaurants TheSans zum Einsatz, im Brotzeit tritt sie etwas fet­ter und in Stempeloptik auf. Im Zeitgeist geht es genau in die andere Richtung, die Typo zeigt sich hier in einem dünneren Schnitt als der Regular.

Auch das Thema »Naming« ist im Übri­gen häufi­ger Be­standteil komplexer Corpo­rate-Design-Projekte. So stand der Name »Brotzeit« schon seit Längerem fest, der Name »Zeitgeist« entstand dagegen während der Arbeit am Corporate Design für die beiden Restaurants bei Strichpunkt. Die sprachliche Verwandtschaft schafft ne­ben der visuellen ­eine zweite Ebene der Ver­bindung zwischen den Restaurants.

»Ideen müssen heute medien­über­greifend entstehen. Sie finden sich nachher auf so vielen Medien – vielleicht auch auf welchen, an die man anfangs noch gar nicht gedacht hat« Tobias Nusser, Creative Director bei Strichpunkt in Berlin

 

Direkter Draht zum Kunden

 

Vor allem in der Abstimmungsphase, als es darum ging, festzulegen, wie nah das DRIVE-Corporate-De­sign am Auftritt des Volkswagen Konzerns sein muss und wie weit es sich entfernen darf, bezog Strichpunkt den Kunden häufig mit ein. »Bei so einem komplexen Thema ist es sinnvoll, den Kunden regel­mäßig und immer wieder einzubinden, wir schaffen dafür gerne eine Art Workshopatmosphäre«, sagt Crea­tive Director Tobias Nusser. »Beispielswei­se gehen wir gerne mit dem Kunden gemeinsam an unsere Pinnwand, brainstormen mit ihm, scribbeln im Meeting auch schon mal was und kleben Sachen zusammen. Kurz, wir arbeiten aktiv zusammen.«

In diesem Fall war das kein Problem, weil das DRIVE quasi direkt um die Ecke der Agenturräume liegt. So gab es bei diesem Projekt überdurch­schnitt­lich viele per­sönliche Treffen und insgesamt einen sehr direkten, offenen Austausch mit viel Vertrauen auf beiden Seiten. Aber auch wenn der Kunde weiter weg zu Hause ist, stimmt Nusser gerne so viel wie möglich persönlich ab.

»Die Erfahrung hat gezeigt, dass Abstimmungen per E-Mail fast immer zu irgendwelchen Missverständnissen führen. Für mich ein klares Indiz fürs In-die-Augen-Schauen.«

 

Print und Web Hand in Hand

 

Parallel zum gedruckten Erscheinungsbild und der Kommunikation im Raum entstand die DRIVE-Web­site im Responsive Design mit großflächigen Bildern und Illustrationen. Zum digitalen Auftritt gehören zudem zwei Apps: In der einen können Besucher auf iPads im DRIVE Shop stöbern. Diese Modellauto-App informiert über die mehr als 500 Fahrzeuge aller Kon­zernmarken. Wer will, kann das zugehöri­ge Modellauto im Shop kaufen. Die andere App versorgt Mitarbeiter des DRIVE mit relevanten Informationen über die Marken des Volkswagen Konzerns.

Corporate Design, Strichpunkt, DRIVE

Neben einem gedruckten Kundenmagazin entwarf Strichpunkt auch den Digitalauftritt von DRIVE sowie zwei Apps.

Das gesamte Digitalkonzept entstand bei Strichpunkt, von der Struktur über die Wireframes bis zum fertigen Layout. Damit ist klar: Als Corporate Desig­ner bei Strichpunkt muss man in allen Medien zu Hause sein. »Ideen müssen heute zwingend medien­übergreifend entstehen«, sagt Tobias Nusser. »Sie fin­den sich nachher auf so vielen Medien – vielleicht auch auf welchen, an die man anfangs gar nicht dach­te oder die es zum Zeitpunkt der Gestaltung noch gar nicht gab –, da ist die Me­­dienneutralität der Idee ungemein wich­tig.« Der Pfeil erfüllt dieses Kriterium, weil es bei ihm nicht auf ein bestimmtes Format ankommt. Er lässt sich in fast allen Medien adaptieren.

Ohnehin macht man als Corporate Designer bei Strichpunkt nicht nur und ausschließlich Corporate Design, denn so scharf trennen lassen sich die unterschied­lichen Bereiche gar nicht. »Wenn wir an einer Marke arbeiten, schwappt natürlich ein Teil des Jobs in andere Disziplinen: Kommunikation im Raum beispielsweise, Corporate Publishing oder auch Produkt­kommunikation. Für das Ergebnis ist es besser und für den Gestalter spannender, wenn man eine Marke aus unterschiedlichen Perspek­tiven betreuen kann«, berichtet Nusser.

 

Alle an einem Tisch

 

Auch nicht wirklich trennscharf ist bei Strichpunkt die Abgrenzung zwischen den einzelnen Aufgaben. Tobias Nusser, Nils Jaedicke und Johanna Schu­macher sitzen in einem Raum an einem sehr langen Tisch mit noch rund einem Dutzend weiterer Kre­ativer.

»Wir arbeiten sehr eng und in­­tegriert zusammen, scribbeln viel, kleben viel zu­sammen und hängen extrem viel an den Wänden auf – auch und gerade bei digitalen Projekten.

Danach überlegen wir gemeinsam und entwickeln verschiedene Routen«, beschreibt Johanna Schu­macher die Arbeitsweise des Strichpunkt-Teams.

Der Vorteil des langen Tischs: Man kann auch mal projektfremde Menschen um eine Einschätzung bitten. Denn die Erfahrung der Mitarbeiter hat vielfach gezeigt, dass allein vor sich hin zu gestalten normalerweise nicht gerade zur besten Lösung führt.

Auch die Hierarchien sind im Arbeits­alltag recht flach. Der Creative Director hat die Idee, der Art Direc­tor sorgt dafür, dass es schön aussieht, und der Gra­fiker muss alles umsetzen – so funktioniert es bei Strichpunkt eben nicht. Eigenverant­wor­tung heißt die De­vise, und so geht der Grafiker, wenn es Sinn macht, schon mal selbst zur Abstimmung mit dem Kunden. Stille-Post-Effekte und Missverständnisse lassen sich auf diese Weise vermeiden.

»Ich kam im Dezember 2014 zu Strich­punkt, und das DRIVE war mein erstes Projekt«, erzählt Johanna Schu­macher. »Von Anfang an hat­te ich ziemlich viel Verantwortung, bin mit zu Kundenterminen gegangen oder habe mit den Zuliefe­rern zusammengearbeitet. Als es etwa beim Leitsystem darum ging, wie und wo was angebracht werden soll, bin ich oft auf die Baustelle gefahren, habe mir das direkt vor Ort angeschaut und Entscheidun­gen anschließend mit dem Dienstleister, der das Leitsystem pro­duziert, und zudem mit dem Kunden abgestimmt.«

Trotzdem machen natürlich nicht alle alles, Nils Jaedicke kümmert sich darum, dass das Corporate Design medienübergreifend eingehalten wird und stringent bleibt. Auch stößt er einzelne Medien an und entwickelt sie weiter. Tobias Nusser nimmt eher eine Helikopterperspektive ein, die auf das Thema Kundengesamtent­wicklung abzielt. Und Kreativbombe Johanna Schumacher feuert Ideen am laufen­den Band heraus. Dazu kommen Kollegen aus den Bereichen Beratung, Strategie und Projektmanagement. Aber in der Ausarbeitung des Corporate Designs, da sind sich die drei einig, sind sie im Team alle etwa gleich nah dran.

Corporate Design, Strichpunkt, DRIVE Corporate Design, Strichpunkt, DRIVE Corporate Design, Strichpunkt, DRIVE Corporate Design, Strichpunkt, DRIVE

 

Lebendige Marke

 

Das werden sie auch noch eine Weile bleiben, denn das umfangreiche Projekt geht in die nächste Runde: »Always beta« ist ein Schlagwort, das auch für ein zeit­ge­mä­­ßes Corporate Design Gültigkeit hat.

Seit Kur­zem hat das DRIVE auch ein eigenes Printmagazin. »Motor« liegt alle drei Monate, jeweils zu Beginn einer neuen Aus­­stellung, im DRIVE und an wichtigen Hotspots in Berlin aus. Das Heft in­for­miert über Inhalte der Ausstellungen, über Veranstaltungen im DRIVE und enthält News zu den Volkswagen-Mar­ken. Es über­setzt das Corporate Design in ­ei­ne zeitge­mäße Magazinsprache.

»Hier können wir noch etwas freier sein, weil ›Motor‹ ja noch weniger ein offiziel­les Kon­zern­me­dium ist«, so Nils Jaedicke. »Dementsprechend dür­fen wir die Themen freier interpretieren und auf­merksamkeits­stär­ker auftreten, dem Medium Magazin und seiner Auf­gabe entsprechend.«

Die Marke DRIVE ist lebendig und entwickelt sich ständig weiter. Sicher ein Grund für den Erfolg, das DRIVE wird gut angenommen. Für Strichpunkt ist es eine schöne Chance und eine kreative Herausforderung, derart umfassend an der Marke arbeiten zu können und stets dafür Sorge zu tragen, dass sie insgesamt stringent auftritt.

»Wir haben«, sagen Tobias Nusser, Nils Jaedicke und Johanna Schumacher ein­stimmig, »da richtig große Freude dran.«

Corporate Design, Strichpunkt, DRIVE

Das Team: Und wieder an einem Tisch: Grafik­desig­ne­rin Johanna Schumacher, Art Director Nils Jaedicke (Mitte) und Creative Director Tobias Nusser


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

 

CorporateDesignCCCSP16

Merken

Merken

Merken

Interaction Design in der Praxis

Mit dem Launch einer Transportbegleiter-App für Bosch Connected Devices and Solutions betraten die Interaction Designer von deepblue networks unbekanntes Terrain – und überzeugten mit ihrer Expertise …

Interaction Designer Daniel Kränz scribbelt viel und nutzt Post-its für den schnellen Überblick

Interaction Designer Daniel Kränz

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.

Interaction Designer Daniel Kränz scribbelt viel und nutzt Post-its für den schnellen Überblick Die Projetkfremden Interaction Designer Fabian Orthen, Benedikt Bochshecker und Christoph Siebelt geben Feedback zum Konzept. Die Interaction Designer Daniel Kränz (links) und Fabian Orthen (rechts) besprechen gemeinsam mit Interaction-Design-Praktikant Lucas Köhler erste Entwürfe zur Informationsarchitektur. Senior-Artdirektorin Lizbeth Sanchez arbeitet am Visual Design in Photshop. Hingucker: Mit der Transport-Data-Logger-App können sich die Nutzer anzeigen lassen, ob es in den Bereichen Temperatur, Feuhctigkeit, Neigung und Erschütterung Grenzwertverletzungen gab. Auf der Hannover Messe demonstrierten deepblue und Bosch die Funktionsweise in einem Versuchsaufbau. Hingucker: Mit der Transport-Data-Logger-App können sich die Nutzer anzeigen lassen, ob es in den Bereichen Temperatur, Feuhctigkeit, Neigung und Erschütterung Grenzwertverletzungen gab. Auf der Hannover Messe demonstrierten deepblue und Bosch die Funktionsweise in einem Versuchsaufbau.

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.

Variationen: Die Designer bei deepblue tasteten sich in mehreren Variationen an das finale Design heran. Variationen: Die Designer bei deepblue tasteten sich in mehreren Variationen an das finale Design heran. Variationen: Die Designer bei deepblue tasteten sich in mehreren Variationen an das finale Design heran. Variationen: Die Designer bei deepblue tasteten sich in mehreren Variationen an das finale Design heran. Das (vorerst) finale Design der TDL App: Zuerst sucht die App nach einem Datenlogger in der Nähe. Sobald dieser gefunden ist und eine BLE-Verbindung besteht, kann der Nutzer entscheiden, was er tun möchte: TDL konfigurieren, Daten ansehen, Set-up oder PIN ändern et cetera. Das (vorerst) finale Design der TDL App: Zuerst sucht die App nach einem Datenlogger in der Nähe. Sobald dieser gefunden ist und eine BLE-Verbindung besteht, kann der Nutzer entscheiden, was er tun möchte: TDL konfigurieren, Daten ansehen, Set-up oder PIN ändern et cetera. Das (vorerst) finale Design der TDL App: Zuerst sucht die App nach einem Datenlogger in der Nähe. Sobald dieser gefunden ist und eine BLE-Verbindung besteht, kann der Nutzer entscheiden, was er tun möchte: TDL konfigurieren, Daten ansehen, Set-up oder PIN ändern et cetera. Das (vorerst) finale Design der TDL App: Zuerst sucht die App nach einem Datenlogger in der Nähe. Sobald dieser gefunden ist und eine BLE-Verbindung besteht, kann der Nutzer entscheiden, was er tun möchte: TDL konfigurieren, Daten ansehen, Set-up oder PIN ändern et cetera. Überblick: Im nächsten Schritt wird dem User übersichtlich angezeigt, ob und in welchem Bereich es Probleme beim Transport gab. Die Daten kann er sich dann genauer anzeigen lassen. Leicht verständliche Infografiken helfen bei der schnellen Orientierung. Je nach Dauer des Transports können die Daten im Monats-, Tages- und Stundenverlauf abgerufen werden. Überblick: Im nächsten Schritt wird dem User übersichtlich angezeigt, ob und in welchem Bereich es Probleme beim Transport gab. Die Daten kann er sich dann genauer anzeigen lassen. Leicht verständliche Infografiken helfen bei der schnellen Orientierung. Je nach Dauer des Transports können die Daten im Monats-, Tages- und Stundenverlauf abgerufen werden. Überblick: Im nächsten Schritt wird dem User übersichtlich angezeigt, ob und in welchem Bereich es Probleme beim Transport gab. Die Daten kann er sich dann genauer anzeigen lassen. Leicht verständliche Infografiken helfen bei der schnellen Orientierung. Je nach Dauer des Transports können die Daten im Monats-, Tages- und Stundenverlauf abgerufen werden. Überblick: Im nächsten Schritt wird dem User übersichtlich angezeigt, ob und in welchem Bereich es Probleme beim Transport gab. Die Daten kann er sich dann genauer anzeigen lassen. Leicht verständliche Infografiken helfen bei der schnellen Orientierung. Je nach Dauer des Transports können die Daten im Monats-, Tages- und Stundenverlauf abgerufen werden.

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

UX Design in der Praxis

Ein E-Commerce-Angebot schaffen, das den lokalen Handel stärkt und dem User gleichzeitig alle Bequemlichkeiten des Online-Shoppings bietet – diese Aufgabe stellte sich Scholz & Volkmer selbst.

UX Design, UX Designer, Scholz & Volkmer

Analoge Anmutung: Projektmanagerin Edina Sejmen mit Fotos der teilnehmenden Läden

Wie jedes Jahr in der Vorweihnachtszeit war im November 2013 das Sekretariat von Scholz & Volkmer in Wiesbaden vollge­stellt mit Paketen von Amazon, Zalando, Toys”R”Us und Co, die die Mitarbeiter online bestellt hatten. Einige der Gaben landeten unter dem Christbaum, viele davon wur­den zurückgeschickt. Das weckte die Auf­merk­samkeit von Geschäftsführer Michael Volk­mer und User-Experience-Desi­g­ne­rin Nan­na Beyer. Sie fand heraus, dass in Deutschland täglich rund 800 000 On­line­be­stel­lungen retourniert werden. »Dass dabei enorm viel CO2 freigesetzt wird und dass das der Umwelt nicht guttut, liegt auf der Hand«, sagt sie.

»Problematische Punkte zu erkennen und zugunsten einer stolperfreien User Journey zu optimieren, ist eine klassische UX-Aufgabe« Nanna Beyer, User-Experience-Designerin bei Scholz & Volkmer in Wiesbaden

Aber das war nicht der einzige Grund, das Thema E-Commerce aus einem anderen Blickwinkel zu betrachten: »In Wiesba­den haben wir eigentlich alles vor der Tür. Wir müssten nur ein paar Hundert Meter laufen und könnten vieles, was wir online bestellen, bei einem Händler vor Ort kaufen«, so die UX-Designerin. »Wenn wir wollen, dass diese Vielfalt erhalten bleibt und unsere Innenstadt nicht ausstirbt, müssen wir an unserem Konsumverhalten etwas ändern.«

Da Beyer mit Scholz & Volkmer einen Arbeitgeber hat, der sich intensiv um das Thema Nachhaltigkeit kümmert, blieb es nicht bloß bei einem Gedan­ken. Nach und nach verfestigte sich die Idee, einen Onlineshop zu entwickeln, der genauso bequem ist wie E-Commerce-Angebote, dabei aber den lokalen Handel stärkt.

Angesiedelt wurde das Projekt in dem von Nanna Beyer geleiteten Shared-Value-Team. Die zehnköpfige Unit ist dafür zuständig, Ideen zu bündeln, mit denen man die Welt ein bisschen besser machen kann – und zwar mithilfe der Kernkompetenz der Agentur: der Entwicklung digitaler Services. Hier sind auch Plattformen wie Zeit statt Zeug, Bilder der Zukunft und die Initiative Radwende Wiesbaden entstanden. Ab und zu arbeitet das Shared-Value-Team im Auf­trag von Kunden, meist geht es jedoch um eigene Projekte. So startete im Frühjahr 2014 das Projekt Kiezkaufhaus. Auf den Namen kamen die Macher im informellen Austausch mit den Kollegen von Scholz  & Volkmer in Berlin.

Kick-off: Intensive Recherche am Ort des Geschehens

Die Verantwortung für das Projekt lag zu Beginn bei einem Dreierteam aus Nanna Beyer und den Design­studenten Gloria Ki­son und Tobias Heinemann, die sich des Themas für ihre Bachelorarbeit im Stu­dien­fach Kommunikationsdesign an der Hochschule RheinMain annahmen. Später kamen dann noch drei Pro­grammierer, ein Fotograf und eine Redakteurin für die Con­tentpflege dazu. Um die Kreativdirektion kümmerte sich Michael Volkmer höchstpersönlich.

Kison und Heinemann entwickelten im Rahmen ihrer Bachelorarbeit zunächst das Gerüst für einen Webshop, der recht klassisch daherkam: mit Produktkacheln und Videos, die die möglichen Händler vorstellten. Mit Nanna Beyer schrieben sie auch einen Businessplan, denn ursprünglich wollten sie einen externen Geldgeber für das Kiezkaufhaus finden. Doch als die drei ihre Konzepte Michael Volkmer und Peter Post, den Geschäftsführern der Agen­tur, immer wieder präsentierten, kam im Sommer die Ansage: »Wir machen das selbst. Wir nehmen das nötige Geld in die Hand und programmieren einen Prototyp. Wir wollen wissen, ob das funktioniert.« Schon hier war klar, dass sich das Kiezkaufhaus vom Standard-E-Shop unter­schei­den sollte.

UX Design, UX Designer, Scholz & Volkmer

Geteilter Wert: Mithilfe ihres Shared-Value-Teams setzt sich Scholz & Volkmer für Nachhaltigkeit, Umwelt und ein soziales Miteinander ein. Das Kiezkaufhaus ist Teil dieser Haltung

 

Das nächste Ziel war also ein funktions­fähiger Prototyp und damit enormes Wissen in Sachen User Experience gefragt. Dafür startete das UX-Team in die User Research: Es sammelte die eigenen Kassenbons und Einkaufszettel, um zu sehen, welche Händ­­ler für das Projekt überhaupt interessant sein könnten. Um sich ein Bild von den möglichen Usern zu machen, erstellte es Personas: viel arbeitende Wiesba­dener, Lohas, junge Mütter, ältere Menschen. Für sie entwickelten die UX-Designer Use Cases, zum Beispiel die Suche nach einem Geschenk, mit deren Hilfe wie­derum das Sortiment des Kiezkaufhauses zusammengestellt wurde.

Ein wichtiger Teil des UX-Prozesses war zudem die Recherche in den Geschäften. Dort hörten sich Beyer und ihre Kollegen an, welche Fragen bei der Kundschaft auftauchten. Sie beobachteten und führten kleine Workshops durch, in denen sie sich gemeinsam mit den Händlern deren Produktpaletten vorknöpften und sie anhand der Personas und Use Cases überprüften.

Überraschende Anforderungen: Fax und analoge Öffnungszeiten

UX Design, UX Designer, Scholz & Volkmer

Gesicht zum Kunden: Wer im Kiezkaufhaus bestellt, bekommt seinen Einkauf in einer umweltfreundlichen Pfandtasche und CO2-frei per Fahrradkurier geliefert. Seine Erfahrungen fließen in die Optimierung der Liefer­kette ein.

Je konkreter der Onlineshop wurde, desto stärker ging es darum, eine Bestell- und Lie­fersystematik zu entwickeln, bei der kei­ne Informationen auf der Strecke bleiben. Dazu arbeitete das Team mit einer Methode aus dem Methodcards-Set zum Design Thinking von IDEO. Beim sogenannten »Informancen« (eine Kombination von »In­formative« und »Performance«) verteilten sich die Teilnehmer, stellvertretend für die einzelnen Stationen, in unterschiedli­chen Räu­men und spielten die Weitergabe der Informationen anhand von Zetteln durch, um die zeitversetzte Kommunikation zu simulieren: Der Kunde bestellt. Die Bestel­lung geht an ein digitales System bei Scholz & Volkmer. Dieses verschickt eine Bestellliste an die einzelnen Händler, die wiederum ihre Waren an den Kiezkaufhaus-Fahrer weitergeben und so weiter. »Schwierigkeiten tauchten dort auf, wo man sie zuerst gar nicht vermutet«, erinnert sich Nanna Beyer. Zum Beispiel bei der Übermittlung an die Händler: »Viele der kleinen Geschäfte arbeiten im Alltagsgeschäft gar nicht mit E-Mails. Bei den meis­ten ist Fax das Medium der Wahl«, wie die UX-Designerin bei der Recherche in Geschäften herausfand.

Auch die üblichen Gepflogenheiten im E-Commerce brachten die UX-Designer ins Grübeln – etwa die Öffnungszeiten. »Einen Onlineshop schließt man normalerweise nicht um eine bestimmte Uhrzeit oder gar für ganze Tage«, so Beyer. »Beim Kiezkaufhaus aber müssen wir das tun und sogar sehr individuell, da jeder Händler an unterschiedlichen Tagen geschlossen hat.« Die Herausforderung bestand darin, den digitalen Service so aufzubauen, dass der Kunde den Sachverhalt versteht und trotzdem wiederkommt.

User Tests zwischen Webservice und analoger Welt

Lösen konnten Beyer, Kison und Heinemann das Problem über einen konsequen­ten Stil in Naviga­tion und Gestaltung: Wer die Seite  www.kiezkaufhaus.de  besucht, der sieht sofort, dass er hier nicht auf Ama­zon oder einem anderen herkömmlichen Shopping-Portal gelandet ist. Die Navigation ist ausschließlich über die einzelnen Händler möglich. Sortiert in die Kategorien »Food« und »Non Food«, kann man sie über Kacheln auswählen und sich auf der entsprechenden Unterseite durch ihre Regale klicken. Einzelne Produktseiten mit Details gibt es nicht. Visuell erinnert die Präsentation an die analoge Auslage im Laden. Hängt vor dem digitalen Ladenregal ein »Wir machen Ferien«-Schild, kann man die Ware zwar anschauen, aber nicht in den Einkaufskorb legen.

Schon während der Recherche vor Ort zeichnete sich ab, dass ein Großteil der Kunden das Sortiment ihres Händlers ken­nen und ihm nicht wegen einzelner Produkte oder Preise die Treue halten, sondern wegen des Ge­samtpakets. Es reichte also, im Shop nur einen Teil der Ware abzubilden, was aufgrund der fehlenden Wa­renwirtschaftssys­teme der kleinen Läden ohnehin nicht anders machbar wäre.

Nicht gezeigte Produk­te können die Nutzer über das Feld Produktwunsch bestellen. Die fehlende De­tailansicht ebenso wie die noch nicht vorhandene Suchfunktion sind allerdings auch dem kleinen Budget des Projekts geschuldet, wie Beyer einräumt. User-Tests mit Kollegen und Familien über einen Klickdummy in PowerPoint zeigten jedoch, dass die schlanke Navigation gut funktioniert. Um die Prozesse weiter zu optimieren, arbeitete das Team mit Wireframes in Axure. Der Klickdummy, der so entstand, kam später in der Projektübergabe an die Programmierer zum Einsatz. Nach wie vor handelt es sich beim Kiezkaufhaus um einen Prototyp beziehungsweise ein Minimum Viable Product, das weiterentwickelt wird.

UX Design, UX Designer, Scholz & Volkmer UX Design, UX Designer, Scholz & Volkmer UX Design, UX Designer, Scholz & Volkmer UX Design, UX Designer, Scholz & Volkmer UX Design, UX Designer, Scholz & Volkmer UX Design, UX Designer, Scholz & Volkmer UX Design, UX Designer, Scholz & Volkmer UX Design, UX Designer, Scholz & Volkmer

Der Look: So analog und real wie möglich

Der visuelle Stil des Kiezkaufhauses spiel­te während der Entwicklung immer in die Überlegungen der UX-Designer mit hinein. Die Informationsarchitektur und die haptisch anmutende Darstellung der Ware gehen Hand in Hand. Wie für viele Projekte in ihrer Disziplin üblich, waren die UX-Spezialisten gleichzeitig für das Interface Design zuständig.

»Bei uns stellt der Händler selbst das Sortiment zusammen, das von ihm im Kiezkaufhaus angeboten wird« Nanna Beyer, User-Experience-Designerin bei Scholz & Volkmer

Michael Volkmer habe schon zu Beginn des Kiezkaufhaus-Projekts darauf gepocht, dass der Shop »irgendwie anders aussehen und der User das Gefühl bekommen solle, er stünde wirklich beim Bäcker, im Bio­laden oder in der Bergkäsestation«. Da­mit meinte er nicht etwa einen 3-D-animier­ten Onlineshop, sondern ein Look-and-feel, das statt einzelner Produkte das gesamte Sortiment eines Händlers in den Fo­kus stellt. Der User soll sich auf der Web­site bewegen, als gehe er wie beim Einkaufsbummel in der Stadt in einen Laden nach dem anderen. Daraus ergab sich die Idee der Regalansicht.

Nanna Beyer erklärt: »Viele unserer lokalen Händ­ler haben kein digitales Warenwirtschaftssystem, und es wäre schier unmöglich, alle ihre Produkte online abzubilden. Trotzdem müssen wir dem User natürlich den gleichen Service bieten wie der Händler vor Ort – zum Beispiel eine Antwort auf die Frage nach einem Produkt, das gerade nicht in der Auslage liegt.« Für den Fall, dass ein abgebildetes Produkt ausverkauft sein sollte, stellen die UX Designer dem User im Bestellvorgang die Frage, ob er eine Alternative wünsche oder lieber ganz verzichte. Ähnlich werden die Preisschwankungen bei abzuwiegen­den Waren wie Käse oder Wurst gehandhabt (siehe »Die User Journey durchs Kiez­kaufhaus«).

E-Commerce light: Die Software entschlacken 

So viel steht fest: Das Kiezkaufhaus unterscheidet sich stark von anderen E-Commerce-Angeboten. Auch in der Kom­mu­ni­­kation mit den Entwicklern sei das eine große Herausforderung gewesen, berichtet Nanna Beyer. Das Team arbeitete iterativ mit den Technikern, erklärte ihnen die Prozesse im direkten Gespräch und setzte dafür den Axure-Klickdummy ein. Die De­veloper programmier­ten den Prototyp des Kiezkaufhauses basierend auf dem Open-Source-Shopsys­tem PrestaShop.

UX Design, UX Designer, Scholz & Volkmer

Online trifft Offline: Die E-Bikes, mit denen die Kurierfahrer die Bestellungen ausliefern, sind ein wichtiges Markenzeichen des Kiezkaufhauses – weil sie die Umwelt schonen, aber auch, weil sie das Kiezkaufhaus ins Stadtbild integrieren.

»Wir haben die Software vor allem stark eingedampft, weil wir Funktionen wie die Verknüpfung mit PayPal oder die Option ›Kauf auf Rechnung‹ gar nicht brauchten«, berichtet Senior Web Developer Fabian Kretschmer, der von Anfang an die technische Leitung innehatte. Zudem musste er im Backend eine Fax-API integrieren und das Content-Management-System so umbauen, dass das Team veränderte Öffnungs­zeiten und andere aktuelle Laden­in­fos ohne Aufwand eintragen kann. Im Frontend arbeitete Kretschmer mit HTML, CSS und nativem JavaScript sowie mit der freien JavaScript-Bibliothek jQuery und der freien Frontend-Library Bootstrap.

Bei sämtlichen kniffligen Aufgaben und Schwierigkeiten, mit denen die UX Designer bei der Erweiterung des lokalen Han­dels in einen Onlineshop zu kämpfen hatten, gab es aber auch Punkte, an denen der Vorsprung dem herkömmlichen E-Commerce gegenüber ganz deutlich zutage trat. »Die große Frage des E-Commerce lautet doch: Wie bekomme ich die Beratungs­kom­p­etenz des Fachhändlers in meinen Shop?«, erklärt Nanna Beyer. »Genau das bieten wir mit dem Kiezkaufhaus: Bei uns stellen nicht irgendwelche Produktmanager das Sortiment zusammen, sondern der Bäcker oder der Buchhändler selbst. Die UX-Lösung dafür ist vergleichsweise banal: die prominent platzierte Telefonnum­mer des Händ­lers. Sie vermittelt: ›Das ist derjenige, der gleich deine Tasche packen wird. Du kannst ihn einfach an­rufen und dann alles fragen, was du wissen willst.‹«

»Der Shop sollte irgendwie anders aussehen und dem User das Gefühl geben, als stünde er wirklich beim Bäcker, im Bioladen oder in der Berg­käse­station« Michael Volkmer, Geschäftsführer bei Scholz & Volkmer in Wiesbaden

Das Ziel: Kiezkaufhäuser in ganz Deutschland

Derzeit kommen pro Tag circa zehn Bestel­lungen im System an. Dreißig müssten es sein, damit sich das ambitionierte Modell trägt – und zwar künf­­tig als Genossenschaft. Die Macher glauben fest an den Erfolg. Rund 150 000 Euro haben sie bisher investiert und mit Inga Ellingen eine Produktmanagerin für das Kiezkaufhaus eingestellt. Sie entwickelt das Sortiment weiter und kümmert sich ums Marketing. Momentan ist sie auf der Suche nach öffentlichen Geldern oder einem Social Investor, mit dessen Hilfe aus dem Prototyp eine eigene Software entwickelt werden soll, die auch andere Städte nutzen können. Für den laufenden Betrieb ist Edina Sejmen verantwortlich, die Kunden- und Händler­anfragen sowie einen kleinen Kiezkaufhaus-Shop in der Agentur managt und die Fahrer organisiert.

Besonders am Herzen liegen den Machern die Verknüpfung mit der Offline-Welt – der Kon­takt mit den Fahrern, deren Erfahrun­gen extrem wichtig für die Op­timierung der User Experience sind, aber auch mit den Kunden, etwa auf Kiez­kauf­haus-Fes­ten im Hof von Scholz & Volkmer. Um diese Events und um Social Media kümmert sich Daniel Sieben. Nanna Beyer nimmt sich indes weiterhin aller anfallen­den UX-Fragen an und betreut zudem den Roll-out des Projekts: Demnächst soll es auch Kiezkaufhäuser in Freiburg, Mainz und Berlin geben.

UX Design, UX Designer, Scholz & Volkmer

User Research: UX-Designe­rin Nanna Beyer (links) und Projektmanagerin Sandra Freudenreich sortieren Kassenbons.

 


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

UXDesignCCCSV16

Merken