Das externe Tool, das wir genau für diesen Anwendungsfall lange eingesetzt haben wurde irgendwann nicht mehr aktualisiert und war entsprechend nicht mehr zeitgemäss. Der Workflow war nicht mehr intuitiv und einfach zu nutzen und passte deshalb nicht mehr zu dem, was wir als Agentur mit der Vision "Wir vereinfachen den Menschen das Leben" vertreten. 

Also haben wir entschieden, die Sache selbst in die Hand zu nehmen und eine App zum Verwandeln von Papierskizzen in klickbare Prototypen zu bauen.

Wie so etwas bei uns abläuft – von der Idee über das Design bis zur fertigen App – haben wir in diesem Blogbeitrag über interne Produktentwicklung bereits beschrieben.

Warum eine eigene Lösung?

Wenn man als Digitalagentur Schüler*innen zeigt, wie gute Produkte entstehen, sollte das eingesetzte Werkzeug auch diesem Anspruch genügen. Die bisherige externe Lösung tat das nicht mehr. Wir wollten etwas, das wir selbst kontrollieren, nach unseren Vorstellungen und abgestimmt auf die Bedürfnisse der jungen Zielgruppe gestalten und langfristig weiterentwickeln können. Und eine Lösung, dank welcher die Schüler*innen ihre App-Idee am Ende des Tages auf ihrem eigenen Gerät mit nach Hause nehmen können.

Die Schüler*innen starten bewusst analog und zeichnen ihre App-Screens auf Papier. Das bietet einen einfachen und unmittelbaren Zugang, um Ideen zu visualisieren, ohne sich zuerst mit einem digitalen Gestaltungstool auseinandersetzen zu müssen. Mit Prototyper entsteht daraus innerhalb weniger Minuten ein interaktiver Prototyp. 

Dabei setzen sich die Nutzenden aktiv mit der Logik ihrer App auseinander und überlegen selbst, welche Screens es braucht, wie sie zusammenhängen, was bei einer Interaktion passiert und wo sie hinführt. Anders als bei Lösungen, die einen Prototyp automatisch generieren, müssen sie die Zusammenhänge selber definieren. So entwickeln sie nicht nur eine eigene App-Idee, sondern auch ein besseres Verständnis dafür, wie digitale Produkte aufgebaut sind und funktionieren.

Was die Prototyper App kann

Die Anforderungen waren auf den ersten Blick einfach. Auf den zweiten Blick gar nicht so trivial.

Die App richtet sich an Jugendliche, die (meistens) zum ersten Mal in ihrem Leben etwas prototypen. Sie haben keine Vorkenntnisse. Sie haben wenig Zeit. Und sie wollen am Ende etwas in den Händen halten, das sich ein bisschen anfühlt wie eine echte App.

Konkret bedeutet das: Nach einem kurzen Onboarding landen Nutzende auf einem Hauptscreen mit einer Projektübersicht. Wer noch kein Projekt angelegt hat, findet dort dank klaren Anweisungen innert Kürze den Einstieg: Projekt anlegen, Namen vergeben, loslegen. 

Papierskizzen werden fotografiert oder importiert, passend zugeschnitten und über frei definierbare Tippbereiche miteinander verknüpft. Für jede Interaktion lässt sich festlegen, zu welchem Screen sie führt und mit welchem Übergang dieser erscheint. Im Play Mode lässt sich der fertige Prototyp anschliessend direkt ausprobieren.

Die gesamte User Experience ist auf einen möglichst einfachen Einstieg und einen klaren Prozess ausgerichtet, so dass sich die Nutzenden auf Ihre Idee konzentrieren können, statt auf das Werkzeug.

Design zuerst

Bevor eine einzige Zeile Code geschrieben wurde, hat unser Designteam die komplette App in Figma durchgeplant. Vier grosse Bereiche standen im Mittelpunkt: das Onboarding, der Hauptscreen mit der Projektübersicht, die Projektverwaltung mit der Skizzenübersicht und der sogenannte Play Mode, in dem der fertige Prototyp getestet werden kann.

Das Ziel war, jeden Schritt so klar zu gestalten, dass er ohne Erklärung verständlich ist. Klare Labels, guter Kontrast, wenige Aktionen pro Screen.

Das Interface von Prototyper ist bewusst zurückhaltend gestaltet. Eine reduzierte Farbwelt, klare Typografie, viel Weissraum und wenige visuelle Elemente schaffen Orientierung, ohne mit den eigentlichen Inhalten zu konkurrieren: den individuellen App-Entwürfen der Nutzer*innen.

Technische Umsetzung

Die App ist eine native iOS-App, gebaut mit SwiftUI und Swift 6. Da die Erfahrung zeigt, dass ein Grossteil der Jugendlichen, die uns besuchen, auf iOS unterwegs sind, haben wir uns in einem ersten Schritt auf iOS konzentriert. Eine Android-Version ist für die Zukunft angedacht. Für die Projektverwaltung nutzen wir Tuist statt direkt in Xcode zu arbeiten, was die Projektstruktur deutlich wartbarer macht. Lokalisierungen kommen über Localise.biz rein, Texte werden also nie direkt im Code geändert, sondern immer über das Web-Interface gepflegt.

Eine der grösseren Herausforderungen in der Umsetzung war die Funktion zum Zuschneiden der Fotos. iOS bringt von Haus aus keinen Cropper mit, der gleichzeitig das richtige Seitenverhältnis erzwingt, freies Zoomen erlaubt und sich an unsere Designsprache anpassen lässt. Wir haben deshalb die Open-Source-Bibliothek SwiftyCrop integriert und sie mit unserer Brand-Palette konfiguriert. Das Ergebnis: Schüler*innen sehen beim Zuschnitt genau, wie die Skizze später auf dem Bildschirm aussehen wird.

Damit die App sich auch auf älteren Geräten flüssig anfühlt, haben wir viel Arbeit in die Bild-Pipeline gesteckt. Jedes Bild wird in zwei Versionen gespeichert, dem Original und einer zugeschnittenen Version, damit man später erneut zuschneiden kann, ohne an Qualität zu verlieren. Beim Laden erscheint zuerst eine Thumbnail-Version, dann schärft das Bild nach. Der Play Mode lädt das nächste Bild bereits im Hintergrund, bevor man überhaupt darauf tippt.

Die gesamte App funktioniert offline. Keine Accounts, keine Server, keine Datensammlung, keine Abhängigkeiten. Die erstellten Projekte bleiben lokal auf dem Gerät gesichert.

Was wir gelernt haben

Den Aufwand und die Zeit, die die Konzeption und Entwicklung eines Eigenproduktes in Anspruch nimmt, unterschätzt man leicht. Neben dem Tagesgeschäft und Projekten, die Priorität haben, ist es eine Herausforderung, nebenbei ein eigenes Tool zu entwickeln. Insbesondere wenn die Nutzenden Jugendliche sind, die wenig Geduld und eine kleine Fehlermarge haben - die Messlatte ist hoch. Trotzdem ist es befriedigend, ein eigenes Problem mit einem eigenen Tool zu lösen.

Der Entscheid, in diesem konkreten Fall zuerst zu designen und dann zu bauen, hat uns letztlich viel Zeit gespart. Nicht weil das zwingend die richtige Methode für jedes Projekt ist, sondern weil wir dadurch früh erkannt haben, wo die wirklich kniffligen Stellen stecken.

Wie es mit der Prototyper App weitergeht

Bisher konnten wir Prototyper bei ersten Schnuppertagen einsetzen und freuen uns darauf zu sehen, wie sich die App in grösseren Gruppen bewährt. Es ist besonders wertvoll, dass wir die Zielgruppe am Zukunftstag und an Schnuppertagen direkt bei der Nutzung der App beobachten können, unmittelbar Feedback erhalten und dieses in die Weiterentwicklung der App einfliessen lassen können.

Prototyper ist aus einem ganz konkreten eigenen Bedürfnis entstanden. Weil wir aber glauben, dass der einfache, spielerische Zugang zu Prototyping auch über unsere Zukunfts- und Schnuppertage hinaus einen Mehrwert bietet, haben wir die App öffentlich im App Store verfügbar gemacht. Wer Prototyper ausprobieren möchte, kann die iOS App hier herunterladen und direkt loslegen.
Und wer aus einem Prototypen ein vollumfängliches digitales Produkt machen möchte, findet in unserem Angebot mehr über Konzeption, Design und Entwicklung.