fbpx

Design Sprint: Bau eines High-Fidelity-Prototypen in 8 Stunden

Design Sprint Rapid Prototyping
Design Sprint Rapid Prototyping

Teil des Design Sprint ist es, ein Prototyp innerhalb eines Tages zu erstellen und diesen am nächsten Tag mit den Kunden zu testen. Designer verstehen das als ‘rapid prototyping’.

Das erfordert eine ganze Menge Arbeit und kann auch sehr anstrengend werden. Deshalb sind eine gute Teamarbeit und eine detaillierte Vorbereitung hier besonders wichtig.

Wir haben bei AJ&Smart einen Prozess entwickelt, der es uns ermöglicht, diese Arbeitsbelastung auch innerhalb eines 8-Stunden-Arbeitstages zu meistern.

Das scheint für manche unvorstellbar zu sein, zumal man bei einigen Prototypen auf bis zu 20 Bildschirme kommt.

Hier erfahren Sie, wie dieser Prozess abläuft, welche Arbeitsteilung vorgenommen wird und worauf Sie besonders achten müssen. Ich habe den Artikel in drei Teile gegliedert:

  1. der Tag davor,
  2. der Prototyping-Tag und
  3. der User-Test-Tag

Viel Spaß beim Lesen.

Hinweis: Ein Beispiel eines High-Fidelity-Prototypen finden Sie hier.

(I) Der Tag davor

1. Das Storyboard

Das Storyboard ist ein sehr wichtiger Teil des Design Sprints, um den man nicht drum herumkommt. Es ist auch ein sehr schwieriger Teil.

Denn hier legen Sie das Together-Alone-Prinzip erstmal beiseite und kommen in der Gruppe zu einer regen Diskussion. Das fordert von allen Teilnehmenden, sowie dem/r Moderator/in, Konzentration und Disziplin.

Sie müssen hier sehr spezifisch und detailliert vorgehen, sodass diese Arbeit nicht erst am Tag des Prototyp-Baus anfällt. Dafür haben Sie dann auch nicht die Zeit. Lassen Sie außerdem alle Designer, die am Prototyp arbeiten, mit im Raum sein, wenn Sie das Storyboard angehen.

Überprüfen Sie die Sprintfragen und markieren Sie sich die wichtigsten Bildschirme, die für den User-Test bereit sein müssen.

2. Der Platzhalter

Die letzten 10 Minuten des Tages sollten Sie nutzen, um eine Prototyping-Arbeitsdatei für den Designer (oder auch Stitcher genannt) anzulegen. Das ist hier nur eine Skizzendatei mit sehr groben Platzhalter-Bildschirmen, die der Stitcher am nächsten Tag für den Bau des Prototyps verwendet.

Am besten machen Sie Fotos von jeder Zelle des Storyboards und setzen diese dann auf den entsprechenden Platzhalter in der Skizzendatei.

Und achten Sie bei der Benennung der Platzhalter-Bildschirme auf die korrekte Reihenfolge.

Ein kleiner Tipp: Wenn Sie den ersten Bildschirm 010, den zweite Bildschirm 020 usw. benennen, ist es einfach, zusätzliche Bildschirme hinzuzufügen, ohne die fortlaufende Nummerierung zu unterbrechen (drei zusätzliche Bildschirme nach 010 wären 011, 012 und 013).

Damit wäre der Tag auch schon zu Ende!

(II) Der Prototyping-Tag

1. Der Huddle

Den nächsten Tag starten Sie mit einer Wiederholung des Storyboards, was ca. 10-15 Minuten in Anspruch nimmt. In einer kleinen Gruppe versammeln sich vor dem Storyboard: der Stitcher, die Artists und die Collectors. Alles Begriffe aus dem Sprint Buch von Jake Knapp. Sie können gerne eigene Begriffe nutzen, bspw. Designer, Kleber, Künstler. (Ich gebe zu, auch nicht wirklich besser 😉

Der Moderator geht hierbei nochmal die Sprintfragen und das gesamte Storyboard durch. Somit wird sichergestellt, dass alle auf dem gleichen Stand sind und niemand aus den Augen verliert, was der Prototyp leisten muss.

Und wenn Sie es noch nicht am Vortag erledigt haben sollten, ist jetzt der Zeitpunkt, wo Sie die Bildschirme mit der hohen Priorität markieren sollten.

Daraufhin teilen Sie die Arbeit auf. Teile des Storyboards werden nun verschiedenen Teammitgliedern zugeordnet. Außerdem müssen Sie die Tester für den nächsten Tag miteinschließen. Das kann jemand übernehmen, der nicht direkt am Prototyping beteiligt ist.

2. Die Werkzeuge des Handels

Um einen Prototyp zu erstellen, müssen Sie nicht selbst programmieren können. Es gibt wunderbare Apps, die Ihnen hierbei behilflich sein können, wie z.B. Figma oder Marvel. Beide Tools bieten hervorragende Plug-Ins, um Ihre Designs direkt mit dem Prototyp zu synchronisieren. Dadurch sparen Sie sehr viel Zeit.

Wenn Sie, beispielsweise, Figma nutzen, können Sie alle in der Cloud an einer “Datei” synchron arbeiten. So entfällt die Synchronisierung.

Falls Sie in PowerPoint oder Keynote asynchron arbeiten (was ich nicht empfehle), sollten Sie dem Stitcher die Synchronisierung überlassen, da eine zuverlässige Synchronisation des Prototyps aus mehreren Dateien nicht garantiert ist.

Jeder im Prototyping-Team arbeitet an seiner eigenen Datei. Sobald ein Bildschirm fertig ist (oder gut genug, um als Version 1.0 betrachtet zu werden), fügt der Stitcher ihn der Datei hinzu, die mit dem Prototyp synchronisiert wird, wo er seinen Platzhalter ersetzt.

Die synchronisierte Prototyping-Datei wird Bildschirm für Bildschirm aufgefüllt.

Auf diese Weise kann der Hefter bereits mit dem Zusammenstellen des interaktiven Prototyps beginnen, auch wenn noch Bildschirme fehlen. Nach und nach wird die Prototypendatei gefüllt. Dadurch kann der Hefter auch eine zusätzliche Qualitätskontrolle und Korrektur durchführen, um Inkonsistenzen zu prüfen und sicherzustellen, dass der Fluss durch den Prototyp sinnvoll ist.

Bei diesem Arbeitsabschnitt sollten Sie auf einen sauberen Workflow achten!

Aber nochmals: Lieber in Figma oder ähnlichen Tools an einer gemeinsamen Datei in der Cloud arbeiten.

3. Prototypen ≠ Perfekt

Der Prototyp muss gut aussehen als es ein echtes, real-existierendes Produkt. Da die Zeit jedoch begrenzt ist, müssen wir einen Kompromiss eingehen: Wenn wir rechtzeitig zum Test fertig werden wollen, müssen wir uns auf das konzentrieren, was am wichtigsten ist: die Erstellung eines Prototyps, der es uns ermöglicht, klare Antworten auf die Sprintfragen zu erhalten.

Der Prototyp muss hierbei nicht perfekt sein.

Es ist lediglich ein Konzept, was Sie hier erstmal testen. Dass heißt, was das Farbschema, die Schrift, das Branding etc. betreffen, wird vorerst bei Seite gelegt.

Sie müssen nach dem Testen den Prototyp wahrscheinlich eh nochmal ändern und verbessern. Denken Sie daran, dass es sich um ein iteratives Vorgehen handelt. Im Design Sprint nähern Sie sich immer weiter der Lösung. Von daher gibt es auch keine gescheiterten Sprints.

Wählen Sie eine Schriftart und verwenden Sie sie in allen Ihren Prototypen. Entscheiden Sie sich für etwas, das lesbar und vielseitig ist. Wir verwenden gerne Source Sans Pro oder Roboto, weil sie viele Gewichte bieten und kostenlos bei Google Fonts erhältlich sind.

Verwenden Sie Vorlagen, das spart Zeit und Geld. Es ist nicht notwendig, einen Systemmeldungsbildschirm von Grund auf neu zu erstellen.

Bauen Sie “Frankenmocks”. “Frankenmocking” nimmt Teile von anderen, älteren Prototypen und schafft etwas Neues und Anderes. Bei AJ&Smart haben wir im Laufe der Jahre eine Vielzahl von Prototypen entwickelt und konnten hier und da auf unsere Galerie zurück greifen.

Sie müssen sich bei dieser Arbeit wirklich konzentrieren!

Verschwenden Sie keine Zeit damit, herauszufinden, wo der Benutzer seine Einstellungen ändern würde, wie die Anmeldung realistisch funktionieren würde oder ob Ihr Prototyp den Zugänglichkeitsnormen entspricht. Diese Dinge sind (vorerst) unwichtig.

Was zählt, ist die Beantwortung der Sprintfragen.

4. Die richtige Umgebung

Der Arbeitsaufwand am Prototyping-Tag ist sehr hoch. Jeder muss konzentriert und effizient arbeiten, um rechtzeitig fertig zu werden.

Diese Dinge können Sie tun, um ihren Designern die Arbeit zu erleichtern bzw. das Arbeiten so angenehm wie möglich zu gestalten:

  • Schaffen Sie eine störungsfreie Umgebung. Es ist gut, wenn das Prototyp-Team einen separaten Raum bekommt, wo kein anderer Zugang zu hat.
  • Lassen Sie das Team in Ruhe arbeiten. Kurze Besuche und Small-Talks führen zu Unterbrechungen in der Arbeit. Das lenkt die Designer ab. Es dauert dann bis sie sich wieder in ihre Arbeit einfinden und konzentriert arbeiten können. Ihnen sollten auch keine anderen Aufgaben übertragen werden, sonst werden sie nicht rechtzeitig fertig. Von Meetings etc. sind sie also befreit.
  • Kümmern Sie sich um Ihr Team. Das Team arbeitet sehr hat und hat nicht viel Zeit für eine längere Mittagspause. Da wäre es eine gute Idee, ihnen Mittagessen zu bestellen oder ihnen etwas von der Außenwelt mitzubringen.

5. Einchecken

Da jeder alles versucht, um so schnell wie möglich fertig zu werden, ist es wichtig, sich auf dem Weg auszurichten. Andernfalls werden Sie am Ende mit einem unzusammenhängenden Durcheinander des Prototyps enden.

Dafür gibt es zwei Check-ins. Vermeiden Sie übermäßiges Einchecken! Lassen Sie die Leute ihre Arbeit machen, zwei Check-Ins genügen.

Check-in 1 von 2: 12 Uhr

Das erste Check-in findet zur Mittagszeit statt. Das gesamte Team schaut sich an, was alle gemacht haben. Sie kombinieren dieses erste Check-in mit einem Team-Lunch für das gesamte Prototyp-Team. Sie stellen abwechselnd den Stand ihrer Arbeit auf einem Bildschirm für das gesamte Team dar.

Check-in 2 von 2: 16 Uhr

Das zweite und letzte Check-in findet um 16 Uhr statt. An dieser Stelle sollten sich die wichtigsten Bildschirme in einem Zustand befinden, in dem man sie vor den ersten Tester stellen kann. 16 Uhr hat sich als gute Uhrzeit erwiesen, weil Sie dann noch Raum bis zum Feierabend um 18 Uhr haben.

6. Nach 16 Uhr: Aufwischen

Nach dem zweiten Check-in sollte der Hauptteil des Prototyps vollständig sein oder zumindest kurz vor der Fertigstellung stehen.

Nun können Sie den Rest des Arbeitstages nutzen, um fehlende, nicht benötigte Bilder hinzuzufügen und einen letzten Durchlauf des Prototyps durchzuführen. So sollte jeder pünktlich nach Hause kommen und bekommt eine wohlverdiente Pause!

Hinweis: Senden Sie den Link zum Prototyp noch nicht an den Kunden. Behalten Sie Ihr Baby noch bei sich. Die Einschulung findet erst morgen statt.

(III) User-Test-Tag

Die ersten Tests laufen meistens noch etwas holprig. Es werden viele Unzulänglichkeiten des Prototyps deutlich: Probleme mit dem Ablauf, verwirrende Tastenbeschriftungen, fehlende Elemente, Tippfehler, Störungen. All dies ist normal und wirkt sich normalerweise nicht allzu sehr auf den Benutzertest aus.

Trotzdem wollen Sie diese Dinge in Ordnung bringen, damit die darauffolgenden Tester eine bessere Version vor sich haben.

Der Testablauf ist somit auch ständig ein Optimierungsprozess, wobei wirklich nur Kleinigkeiten verbessert werden sollten. Sie sollten nicht den Prototyp komplett umstrukturieren. Das erfolgt erst in der Iteration.

Des Weiteren sollten Sie einen einstündigen Abstand zwischen dem ersten und dem zweiten Test einplanen. Das gibt Ihnen eine zusätzliche Stunde Zeit, um alles zu reparieren, was repariert werden muss.

Priorisieren Sie die Korrekturen hierbei nach Dringlichkeit und Aufwand. Reparieren Sie zuerst das Wichtigste, und wenn es die Zeit erlaubt, die kleinen Dinge, die noch übrig sind (z.B. Tippfehler).

Synchronisieren Sie Ihre Änderungen. Stellen Sie sicher, dass Ihre Änderungen korrekt mit dem Prototyp synchronisiert sind, aber niemals während eines Tests. Das kann den Prototyp zerstören.

Design Sprint Rapid Prototyping

Fazit

Dieser kleine Einblick in den Vorgang der Erstellung eines Protototypen soll Ihnen zeigen, wie man alles innerhalb eines Tages ohne Überstunden fertigbringen kann.

Mit erfahrenen Designern, einem korrekten Workflow und einem unterstützenden Team wird alles leicht machbar!

PS: Welche Erfahrungen haben Sie bei der Erstellung eines Prototypen an einem Tag gemacht?

PPS: Herzlichen Dank für deine Mitarbeit, Vivien