UX Design in der Praxis

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.

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

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.

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.

»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.

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

UXDesignCCCSV16

Merken