Erzählwerkstatt App
Wireframes | Mockups | Prototyping | User Research & Testing
Entwicklung einer Spieleapp mit dazugehörender responsiven Webseite
Die Erzählwerkstatt ist ein Spiel, das die eigene Kreativität fördert und innere Bilder entstehen lässt. Mit der App soll eine digitale Version des Storytelling-Spiels angeboten werden, die jederzeit und überall schnell sowie unkompliziert gespielt werden kann. Über die dazugehörige Webseite wird das Spiel beworben. Zudem wird dort ein Mitgliederbereich bereitgestellt, der zusätzliche Materialien anbietet. Die Zielgruppe sind sowohl jüngere als auch ältere Menschen, die ihre Kreativität trainieren und einen Zugang zu ihren eigenen inneren Welten finden möchten.
Zeitraum
2026
Rolle
UX Designerin (Entwicklung der App und responsiven Seite vom Design bis zur Umsetzung)
Peter Dreißig: Spieleerfinder
Schwerpunkte
Papier und Digital-
Wireframe, Low und High-Fidelity Prototyping, Forschungsstudien, Informationsarchitektur, responsives Design der Webseite
Links
Herausforderung
Die Herausforderung bestand darin, ein bestehendes analoges Kartenspiel in eine digitale, auf Kreativität ausgerichtete Spiele-App zu überführen und zusätzlich eine responsive Webseite mit integriertem Mitgliederbereich zu entwickeln. Die App soll bewusst keinen Wettbewerbscharakter haben, sondern einen geschützten, inspirierenden Raum bieten, der Nutzerinnen dazu motiviert, dranzubleiben und fortlaufend eigene Geschichten zu entwickeln. Beide Angebote sollen ansprechend gestaltet sein, sodass Nutzerinnen dazu eingeladen werden, das Spiel auszuprobieren und regelmäßig zu nutzen.
01 Zieldefinition
Das bestehende analoge Kartenspiel wird in eine moderne, digitale Spiele-App überführt. Ziel ist es, eine ansprechende und einladende Anwendung zu entwickeln, die Kreativität auf spielerische Weise fördert und Menschen intuitiv begeistert. Die App soll den Aufbau einer Geschichtensammlung ermöglichen. Die Möglichkeit bieten Notizen in verschiedener Form zu machen. Eine Geschichte mit mehreren Nutzern gemeinsam zu entwickeln und eine Geschichte zu teilen.
02 Personas
Basierend auf den Recherchen zu dem analogen Kartenspiel und Interviews, haben sich folgende drei Personas herauskristallisiert. Diese sind stellvertretend für die Zielgruppe.
03 Wettbewerbsaudit
Das Ziel war einen Überblick zu bekommen, was es auf dem Markt an Kartenspielen zum Kreativitätstraining gibt und wie die Angebote aufgebaut sind.
Storydice – small gameplay to dial dices in a modern style
BeemGee – A platform that provides key steps for writing a story
StoriumEDU – A platform for teachers and students for writing a story in collaborative way.
Die meisten Wettbewerber befinden sich in englischsprachigen Ländern. In der deutschen Community gibt es bisher noch keinen Anbieter. Es handelt sich entweder um Privatpersonen (Speaker) oder kleinere innovative Firmen, die einen Beitrag zur Schule bieten möchten.
Competitive Audit (PDF)
Competitive Audit und Report (PDF)
Einige der identifizierten Möglichkeiten sind:
- Optimierung der App und Website hinsichtlich Barrierefreiheit durch Einbindung barrierefreier Farboptionen und Kompatibilität mit Bildschirmleseprogrammen. Wir sollten auch Sprachübersetzungsoptionen anbieten und andere Möglichkeiten in Betracht ziehen, um unsere Designs gerechter zu gestalten.
- Vereinfachung des Spiels und Einbeziehung nur der nützlichen Funktionen.
- Strategische Gestaltung der Informationsarchitektur der Website und der App, um sicherzustellen, dass sie den Bedürfnissen der Nutzer entspricht.
- Eindeutige Beschriftung von Schaltflächen und Symbolen.
- Entwicklung einer starken Markenidentität, die auf Desktop- und Mobilgeräten einheitlich ist.
04 Ideation & Wireframes
Basierend auf der bisherigen Recherche habe ich erste Skizzen auf Papier entwickelt und dann die Wireframes erstellt. Die Screens haben sich auf den Ablauf einer Spielrunde konzentriert.
05 Low-fidelity Prototyp
Für den ersten Nutzungstest wurden die digitalen Wireframes zu einem Low-Fidelity Prototyp verbunden. Der Userflow umfasste eine Spielrunde mit der Erzählwerkstatt.
06 Mockups & High-Fidelity-Prototyp
Auf Grundlage der Wireframes habe ich ein erstes Designkonzept ausgearbeitet. Die Farbgestaltung und das visuelle Erscheinungsbild der Karten sollen dabei unverändert übernommen werden. Auch die übrigen Bereiche der App sind in einem dunklen Blauton gehalten, analog zur Kartenbox, um ein stimmiges Gesamtbild zu schaffen.
Als besonderes Element sind Gamification-Mechanismen vorgesehen, die die Motivation der Nutzerinnen und Nutzer fördern und sie zur regelmäßigen Verwendung der App anregen. Zudem werden die Geschichten in einer integrierten Bibliothek übersichtlich gespeichert. Auf der Startseite erhalten die Nutzerinnen und Nutzer Zugriff auf vielfältige Inhalte und Materialien.
Mit dem dazugehörigen Prototyp konnte ich weitere Tests mit Nutzer und Nutzerinnen durchführen. In einer moderierten Nutzerstudie habe ich die Testpersonen die App mit ein paar von mir vorgegebenen Prompts testen lassen. Die Interviews wurden für die Dokumentation aufgezeichnet. Dieser Prozess hat noch einmal sehr viele wertvolle Erkenntnisse gebracht. Dadurch hat sich das Design und die Funktionalität der App sehr verändert.
07 Finales Design
Die Studie zeigte, dass die Gamification-Elemente von den meisten Nutzer*innen nicht positiv wahrgenommen wurden. Viele empfanden sie als Druck erzeugend und im kreativen Kontext als unpassend. Zudem äußerte die Mehrheit den Wunsch nach erweiterten Möglichkeiten zur Erstellung und Organisation von Notizen.
Darüber hinaus wurde die Startseite mit ihren zusätzlichen Informationen und Angeboten als überladen beschrieben. Die Nutzer*innen wollten sich dort primär über das Spiel informieren; weiterführende Inhalte würden sie an anderer Stelle erwarten. Positiv aufgenommen wurde hingegen die Idee, Geschichten teilen zu können – diesen Aspekt habe ich im weiteren Verlauf integriert.
Auf Grundlage dieses Feedbacks habe ich das Design wie folgt überarbeitet.
08 Ausblick
In weiteren Tests wurde die Premium-Option überwiegend kritisch bewertet. Vor diesem Hintergrund würde ich dieses Modell für die finale Version der App erneut überdenken und stattdessen einen einmaligen Kaufpreis für die gesamte Anwendung in Betracht ziehen.
Der nächste Schritt besteht nun in der technischen Umsetzung der App, wobei in diesem Zusammenhang auch der Einsatz einer KI-Lösung vorgesehen ist.
09 Responsive Webseite
Die responsive Website dient dazu, die App zu bewerben und zugleich grundlegende Informationen zur Erzählwerkstatt bereitzustellen. Perspektivisch ist die Einrichtung eines Mitgliederbereichs geplant, in dem Online-Workshops angeboten werden können.
Veranstaltungen sowie ein Blog eröffnen zusätzliche Möglichkeiten, sich mit Kreativität und inneren Prozessen auseinanderzusetzen. In sämtlichen Bereichen nimmt die Erzählwerkstatt dabei eine zentrale Rolle ein.
Im Folgenden die Sitemap:
Auch in diesem Fall habe ich als nächstes Papierskizzen angefertigt und anschließend einen digitalen Wireframe in Figma erstellt. Für den Mitgliederbereich nutzte ich die integrierte KI-Funktion von Figma, da sich damit eine entsprechende Beispielseite schnell und effizient generieren lässt.
Da für den Mitgliederbereich keine individuell neu entwickelte oder besonders innovative Lösung erforderlich war, sondern ein bewährtes, allgemein einsetzbares Grundprinzip, erwies sich die KI-gestützte Wireframe-Erstellung in Figma als gute Lösung. Damit konnte ich in den Designprozess starten.
Im Folgenden ein Einblick in das erste Design.
