Sechste Woche: Mehr User Stories, mehr Skizzen und Figma


Mehr User Stories

In der fünften Woche haben wir zu Beginn der Vorlesung in unseren jeweiligen Gruppen weiter an unseren User Stories gearbeitet.

So haben wir in meiner Gruppe unsere bisherige Persona weiter ausgearbeitet und Pains sowie Gains für diese formuliert:

Zudem haben wir Ergebnisse aus den User Stories des Geschichtsbegeisterten geschlossen:

Anschließend haben wir uns eine weitere Persona überlegt:

Für diese haben wir ebenfalls User Stories geschrieben:

Dann haben wir auch aus diesen User Stories Ergebnisse gezogen:

Mehr Skizzen

Nach Besprechung der Ergebnisse der verschiedenen Gruppen im Kurs, sollten wir basierend auf unseren neuen Entdeckungen weiter an unseren Skizzen arbeiten. Im Folgenden sind die neuen Skizzen meiner Gruppe zu sehen.

Home-Seite mit prominenter QR-Code-Funktion

Erweiterte Filter für die weiterführenden Objekte

Neue Zeitleisten-Seite

Figma

Um uns auf eine erneute Exkursion zum Museum in der nächsten Woche vorzubereiten, setzte sich meine Gruppe am Wochenende gemeinsam zusammen, um einen Prototypen der App mit der Design-Plattform Figma zu erstellen.

Material Design

Wir entschieden uns dafür Material Design als Designsystem für die Tablet-App zu verwenden. Material Design ist das meistverwendete Designsystem und bietet viele vorgefertigte Komponenten für verschiedene Plattformen an. Dadurch wird Zeit beim Entwickeln gespart und eine Benutzererfahrung ermöglicht, die sich konsistent zu anderen Apps verhält. Komponenten von Material Design finden sich in vielen Apps wieder und Nutzer*innen können sich durch die bereits bekannten Komponenten sofort in unserer Tablet-App zurechtfinden. Zudem ist Material Design das offizielle Designsystem von Android. Die Tablets im Museum werden wahrscheinlich Android-Tablets sein. Durch die Verwendung von Material Design können die Besucher*innen des Museums also eine möglichst native App-Erfahrung genießen.

Die Tablet-App soll mit Flutter beziehungsweise FlutterFlow entwickelt werden. Sowohl Material Design sowie Android als auch Flutter stammen von Google. Das bietet bei Verwendung des Material-Design-Designsystems den zusätzlichen Vorteil, dass die Material-Design-Komponenten direkt in Flutter beziehungsweise FlutterFlow integriert sind.

Material Design bietet ein Design-Kit für Figma an, das es ermöglicht einfach Material-Design-Komponenten in Figma-Designs einzubinden. Dieses haben wir für unsere Designs benutzt.

Zusätzlich bietet Material Design einen Theme Builder für Figma an, der es erlaubt ein Theme für Material-Design-Komponenten zu definieren, um beispielsweise das Farbschema anzupassen. Für den Start haben wir vom Theme Builder ein Farbschema generieren lassen, dass auf dem Farbcode der roten Farbe im Logo des Museums basiert (#BC1321).

Designs

Im Folgenden sind unsere erstellten Figma-Designs zu sehen.

Home-Seite

Weiterführende-Objekte-Tab der Home-Seite

Weiterführende-Objekte-Tab der Home-Seite mit geöffnetem Dialog

Zeitleiste-Seite

Gästebuch-Seite

Gästebuch-Seite mit geöffnetem Dialog

QR-Code-Seite

Objekt-Detailseite

Handschrift-Detailseite

Prototyp

Hinterher habe ich die einzelnen Designs, die von Lukas, Nico, Nils und mir erstellt wurden, in Figma miteinander verknüpft, um einen klickbaren Prototypen zu erstellen. Hier geht es zum Prototypen!