Wusste ich, was ich tat? Stimmt leider nicht so ganz!

Es ist ja nicht so, dass wir alles falsch gemacht hätten. Unser Design zum Beispiel war ziemlich gut. Hier hatten wir allerdings einen klaren Vorteil: Wir wussten, was wir tun. Wenn man ein Start-up gründet, ist dieser Zustand von ‘Ich weiß genau, was ich hier mache’ sehr selten. 90 Prozent der Dinge, mit denen man sich während oder direkt nach der Gründung beschäftigt, sind Neuland – ja ja, das Internet ist für uns alle Neuland.

Da ist es ganz schön, mal was zu machen, was man kennt. Seit Jahren entwickle ich Konzepte für Websites und Anwendungen, arbeite täglich mit Designern zusammen. Ich weiß, wann eine Website gut ist und wann nicht. Dachte ich zumindest.

Scribbles

Wir starteten mit Scribbles. Endrik machte die ersten Entwürfe in Powerpoint, später probierten wir viel auf Papier und auf einem Whiteboard aus. Da wir noch nicht wussten, wie unser Produkt aussehen sollte, probierten wir viele Varianten aus. Scribbles halfen dabei, die erste konzeptionelle Richtung zu definieren.

Wireframes und Clickdummy

Im nächsten Schritt konzipierten wir die gesamte Anwendung von vorne bis hinten in Form von Wireframes und einem Clickdummy. Beim Clickdummy handelt es sich eher um interaktive Wireframes, mit denen die grundsätzlichen Funktionalitäten abgebildet werden.
Das Tool unsere Wahl war Axure. Axure wird oft in Digitalagenturen eingesetzt, um komplexe Anwendungen und Websites ohne Kenntnisse von HTML oder CSS klickbar zu machen. Es ist nicht ganz billig (ab 289 US$), aber ein gutes Tool für alle, die nicht coden können.

Habe ich gesagt, dass ich wusste, was ich tat? Stimmt nicht so ganz. Axure hatte ich noch nie benutzt. LABELit bot die Gelegenheit, um mich mit dem Programm vertraut zu machen. Learning by Doing wird ja immer gefeiert, ist aber natürlich super anstrengend, weil man ständig zwischen ausprobieren, Tutorials schauen und neumachen hin- und herspringt. Heute kenne ich wahrscheinlich jede Funktion in Axure.

Der Clickdummy stellte zum ersten Mal den grundsätzlichen Aufbau der Website und der Browser-Extension dar. Er zeigte uns, an welchen Stellen die User Experience litt, welche Interface-Elemente gut funktionierten und welche nicht.

Und mit dem Clickdummy hatten wir die Möglichkeit, das Konzept zu testen. Im Nachhinein hätten wir diese Testphase viel ausführlicher nutzen müssen. Anstatt intensiv mit unterschiedlichen Personen alle relevanten Funktionen zu testen, zu verbesseren und wieder zu testen, machten wir lediglich kurze Checkups. Wir wussten ja, dass es funktionieren würde.

War natürlich totaler Quatsch im Nachhinein. Ausführliches Testing in dieser Phase ist essentiell. Gerade, wenn man etwas baut, für das es keine Vorlage gibt, muss man das gesamte Interface regelmäßig auf den Prüfstand stellen und kritisch hinterfragen.

Testing im Bekanntenkreis kostet kein Geld und das Konzept ist ohne großen Aufwand überarbeitet. Wie so oft bei der Entwicklung von LABELit sind wir einfach davon ausgegangen, dass die Dinge genau so funktionieren, wie wir uns das vorgestellt haben. Tun sie aber natürlich nicht. Tun sie nie.

Da wir also dachten, wir hätten den heiligen Gral in unseren Händen, starteten wir mit dem Visual Design.

Design

Wir wollten E-Commerce machen, Mode, Lifestyle, ein Consumer-Product. Es musste super aussehen. Nicht nur ganz ok. Also fragte ich Nora, ob sie uns beim Design von LABELit unterstützen konnte. Nora ist eine der besten Designerinnen, die ich kenne und wir hatten bereits einige Projekte in Agenturen zusammen gemacht. Sie hat darüber hinaus viel E-Commerce und Fashion-Erfahrung – und sie ist eine Frau. In einem rein männlichen Gründerteam für ein Fashion-Thema sicherlich keine schlechte Entscheidung.

Und Nora enttäuschte uns nicht. Gleich ihre ersten Entwürfe waren ein Volltreffer. Jetzt ging es um Details: hell oder dunkel, zwei- oder dreispaltig, welche Logovariante. Wir entschieden uns für ein helles Design. Die Bilder machten schließlich den Großteil des Looks aus, da sollte sich das Interface Design entsprechend zurückhalten.

Das Logo sollte etwas verspielter sein, daher wählten wir die Variante mit den bunten Pixeln, das Schild mit dem kleinen Band nahm die Label-Metapher auf und setzte sie visuell um.

Die Farben aus dem Logo finden sich in den Farben der einzelnen Labels wieder. Bäm! Fanden wir ganz geil so.

Ganz nebenbei entwickelten wir mit Noras Hilfe ein ziemlich starkes Corporate Design. Neben den Layouts für die wichtigsten Seiten wie die Home, Profilseite, Contentseite und die Labels wurden die UI-Elemente (Schrift, Farben, Buttons, Button-Zustände, Logo) von Nora definiert.

Mit diesem Set konnten wir die nächsten Monate arbeiten. Alle neuen Seiten, UI-Elemente und Zustände richteten sich nach den definierten Vorgaben. So hatten wir zum einen den konsistenten Look, der sich durch das komplette Interface zog, zum anderen waren wir unabhängig genug, um das Design selbstständig weiterzuentwickeln.

Learnings

Also alles in Butter? Fast alles. Man darf nicht vergessen, dass dieser Prozess vor zwei Jahren stattfand, also technologisch fast schon in der Steinzeit. Heute würde ich einiges anderes machen. Und zwar so:

1. Definition von Features und Bereichen, z.B. per Post-its
2. Grobe Scribbles auf Papier
3. Hausfrauentest: Freunde und Familie fragen, die mit dem Thema noch nichts zu tun haben, ob sie das Produkt verstehen. Wichtig: Hier geht es nicht primär darum, grundsätzliches Feedback zur Idee einzuholen, sondern darum, ob das Produkt verstanden wird.
4. Funktionaler Prototyp: Der Prototyp sollte gecoded sein, also kein Clickdummy mit Axure oder Balsamiq oder so. Wichtig auch hier: Nicht gleich das ganze Produkt prototypen, sondern einzelne Features isoliert betrachten, bauen, testen und verbessern.
5. Visual Design: Ok, kritischer Punkt. Ich sehe den Design-Begriff etwas breiter. Design ist essentiell für ein Produkt. Aber Design bedeutet nicht nur bunt und hübsch, es bedeutet vor allem: funktional und verständlich. Design startet mit der Definition der Features und den ersten Scribbles. Das ist das User Experience Design.

   Dennoch: Ein starkes Interface-Design ist unerlässlich. Entweder designt man hier direkt im Code, dafür braucht man jedoch Frontend-Entwickler, die gleichzeitig starke Designer sind. Eine seltene Kombination.

   Einfacher ist das Design in einem Layoutprogramm, hierfür empfehle ich derzeit Sketch. Der Artikel Designing the new Foursquare ist spannend zu diesem Thema.

6. Die Umsetzung erfolgt dann in HTML und CSS (oder womit auch immer programmiert wird). Kleine Anpassungen und Weiterentwicklungen können dann einfach direkt im Code vorgenommen werden.
7. Programmierung: Kann nicht isoliert als letzter Schritt vorgenommen werden, sondern fängt beim Prototyping an. Design, Konzept und Entwicklung müssen im Team zusammenarbeiten (aber dazu mehr in einem anderen Artikel).

Trotzdem, auch mehr als zwei Jahre nach unserem Design-Prozess mag ich den Look von LABELit immer noch. Hat Bock gemacht. Und ist geil geworden.

Siehe auch: “Unser Start-up ist tot – und es ist alleine unsere Schuld”

Zur Person
Nicolas Kittner entwickelt digitale Produkte und Services. Er ist Creative Director bei der Digitalagentur Liquid Campaign und Gründer der Startup Plattform Silicon Pauli. Davor gründete er das Social Commerce Startup LABELit und das Service Design Studio What Happened to the Future?