Logo Mittelstand Digital Zentrum WertNetzWerke
Blog

Von der Idee zum Prototyp: Wie aus Skizzen greifbare Lösungen werden

Prototyping

Vom ersten Klebezettel bis zum digitalen Click-Dummy: Am Beispiel eines Troisdorfer Start-ups zeigen wir, wie aus einer vagen Idee mithilfe von Prototyping ein greifbares, nutzerzentriertes Produkt entsteht. Schritt für Schritt – von der Papierskizze bis zum High-Fidelity-Prototyp – wird Innovation sichtbar und gestaltbar.

In Innovationsprozessen geht es meist darum, Probleme mit kreativen, zukunftsweisenden Lösungen zu adressieren. Methoden wie Brainstorming oder der Design Thinking-Ansatz tragen dazu bei, vielfältige Ideen zu entwickeln. Oft entstehen dabei unzählige bunte Klebezettel (mit teilweise schlecht lesbaren Handschriften), die erste Ideen und Konzepte festhalten. Doch die eigentliche Herausforderung beginnt erst danach: Wie wird aus einer losen, oft unvollständigen Idee ein greifbarer Prototyp, der nicht nur die Vision hinter der Idee vermittelt, sondern auch eine Grundlage für Feedback und Weiterentwicklung bietet?

Am Beispiel unseres Projekts mit dem Start-up flowbee, einem Hersteller von Nisthilfen für Wildbienen, lässt sich dieser Prozess gut nachvollziehen. Nach einer initialen Workshop-Phase mit dem Unternehmen, in dem wir gemeinsam eine Digitalisierungs-Roadmap entwickelten, stand die Kernidee fest: Wir wollten eine digitale und interaktive Karte gestalten, die die deutschlandweit verteilte Community der Nisthilfen visualisiert. Diese Karte sollte nicht nur die Standorte abbilden, sondern auch das Gemeinschaftsgefühl stärken und den gemeinsamen Wunsch, Insekten und Wildbienen zu unterstützen, fördern. Den Weg vom ersten Brainstorming zur Karten-Idee können Sie in unserem Blogbeitrag „Das Ziel klar vor Augen: Nisthilfenhersteller auf dem Weg zur Digitalisierungs-Roadmap“ nachlesen!

Prototyping mit Stift und Papier: Der kostengünstige erste Schritt

Die Idee zur interaktiven Karte stand, die Anforderungen der Stakeholder und des Teams wurden erhoben – hier setzte nun das sogenannte „Low Fidelity“-Prototyping an. Low Fidelity lässt sich mit „geringer Detailtreue“ übersetzen. In dieser Phase geht es darum, eine Idee so einfach und kostengünstig wie möglich darzustellen. Statt komplexer Software oder teurer Designprogramme setzen wir dabei bewusst auf Papier und Stift. Das mag zunächst altmodisch erscheinen, bietet aber entscheidende Vorteile: Eine schnelle Papierskizze ist nicht nur unkompliziert und flexibel, sondern wirkt durch ihr unfertiges Aussehen auch weniger einschüchternd. Andere Beteiligte fühlen sich dadurch ermutigt, ehrliches Feedback zu geben und eigene Ideen einzubringen. Schließlich ist sofort erkennbar, dass es sich nicht um ein fertiges Produkt, sondern um eine erste grobe Konzeptdarstellung handelt. Die erste Zeichnung unserer interaktiven Karte entstand daher in kürzester Zeit und diente als Diskussionsgrundlage für wichtige Entscheidungen.

Gemeinsam mit dem Team des Start-ups klärten wir Fragen wie:

  • Wo sollten Filter- und Suchfunktionen platziert werden?
  • Wie sollten die Nisthilfen auf der Karte dargestellt werden?
  • Was sollte passieren, wenn Nutzer:innen mit den Kartenobjekten interagieren?
  • Welche Informationen sollten dabei angezeigt werden?

Dabei zeigte sich, dass viele dieser grundlegenden Fragen erst durch das konkrete Arbeiten mit einem Prototyp greifbar werden. Es ist oft schwierig, solche Details allein durch Diskussionen oder abstrakte Konzepte zu lösen. Der Prototyp wird somit zum zentralen Werkzeug, um Ideen zu konkretisieren und Entscheidungen zu treffen.

Umsetzung mit Software-Unterstützung: Vom Papier auf den Computer

Nachdem die wichtigsten Fragen geklärt waren, konnten wir in die nächste Phase übergehen: das „Medium-to-High-Fidelity“-Stadium. In dieser Phase entwickelt der Prototyp mehr und mehr die Eigenschaften und das Erscheinungsbild, die dem finalen Produkt entsprechen. Für dieses Projekt wurde die Design-Software Figma genutzt, die sich ähnlich wie AdobeXD, Axure RP oder Sketch besonders für die Entwicklung digitaler Anwendungen eignet. Mit den Markenelementen des Start-ups, darunter Farben, Schriften und Logos, begannen wir, die interaktive Karte als sogenannten Click-Dummy zu gestalten. Dabei handelt es sich um einen (teilweise) interaktiven Prototyp einer Website oder Anwendung, mit dem das grundlegende Design, die Benutzeroberfläche und die Funktionalität getestet werden kann, bevor die eigentliche Entwicklung beginnt. Die Arbeit mit der Design-Software brachte viele Vorteile mit sich. Diese ermöglicht es, wieder verwendbare Komponenten zu erstellen, sodass Änderungen an mehrfach genutzten Elementen – wie Buttons oder Menüs – schnell und unkompliziert vorgenommen werden können. Durch die intuitive Verknüpfung von Elementen lassen sich zudem Animationen und Interaktionen erstellen, die das Gefühl einer echten Anwendung vermitteln. Schon früh im Prozess konnten wir so eine Version der Karte präsentieren, die zwar noch nicht vollständig funktional war, aber bereits die Benutzeroberfläche und grundlegende Interaktionen simulierte.

Dieser Medium-Fidelity-Prototyp wurde in mehreren Iterationsrunden verfeinert. Gemeinsam mit dem Start-up testeten wir die verschiedenen Funktionen und passten das Design an, bis es sowohl den gestalterischen Anforderungen der Marke als auch den Bedürfnissen der späteren Nutzer:innen entsprach. Durch die enge Zusammenarbeit und die iterative Herangehensweise konnten wir sicherstellen, dass der Prototyp nicht nur technisch umsetzbar war, sondern auch ein positives Nutzererlebnis bot.

Am Ende dieses Prozesses stand ein High-Fidelity-Prototyp, der in Aussehen und Funktionalität kaum noch vom finalen Produkt zu unterscheiden war. Der Prototyp diente nicht nur als Kommunikationswerkzeug, um die Idee zu präsentieren, sondern auch als direkte Grundlage für die Entwicklung. Dank des hohen Detailgrads konnten die Entwickler:innen des Mittelstand-Digital Zentrums WertNetzWerke und des EDIH Rheinlands viele der Designentscheidungen und Eigenschaften direkt aus dem Prototyp übernehmen. Dies machte die spätere Umsetzung effizienter und trug dazu bei, dass die grafische Benutzeroberfläche exakt den Vorstellungen entsprach.

Prototyping als Innovationsmotor: Fehler zulassen, Lösungen finden

Das Beispiel vom Start-up zeigt, wie wichtig Prototyping im Innovationsprozess ist. Es ermöglicht nicht nur, Ideen greifbar zu machen, sondern schafft auch eine gemeinsame Grundlage für Diskussionen, Entscheidungen und die Zusammenarbeit zwischen verschiedenen Teams. Vom ersten Low-Fidelity-Papierprototyp bis hin zum High-Fidelity-Click-Dummy durchläuft eine Idee mehrere Entwicklungsstufen, die es ermöglichen, sie Schritt für Schritt zu konkretisieren und zu verbessern.

Prototyping ist am Ende mehr als nur ein Werkzeug – es ist eine Denkweise. Es fordert dazu auf, frühzeitig zu experimentieren, Fehler zuzulassen und kontinuierlich zu lernen. Gerade in einer Welt, die von schnellen Veränderungen und komplexen Herausforderungen geprägt ist, bietet diese Herangehensweise Unternehmen die Möglichkeit, flexibel zu bleiben und innovative Lösungen zu entwickeln, die nicht nur auf dem Papier funktionieren, sondern auch in der Praxis überzeugen.


Copyright: Marius Nißlmüller für Fraunhofer FIT

Autor: Marius Nißlmüller, Fraunhofer FIT

Newsletter-Icon Kontakt-Icon Lupen-Symbol