Umsetzungsvorschlag M322 Benutzerschnittstellen entwerfen und implementieren
Die Lernenden erarbeiten anhand einer vorgegebenen Idee einen Prototyp für eine App. Das Vorhaben heisst z.B.: «Neue App für einen Zoo-Besuch». Durch einfache Benutzertests, mit mindestens fünf Benutzern, soll die Lösung jeweils validiert und anschliessend optimiert werden. Dabei sollen mindestens zwei Iterationen des Human-Centered-Design-Prozesses durchlaufen werden.
Der Auftrag wird in einer Gruppenarbeit zu etwa 4 Personen durchgeführt.
Collaborative UX Design. Lean UX und Design Thinking: Teambasierte Entwicklung menschzentrierte Produkte (Steimle & Wallach, 2018. dpunkt.verlag)
| Lektionen | Themen | Kompetenzen | Tools |
|---|---|---|---|
| 1 (1) | Überblick Modul und Einführung ins Thema: Design Thinking / Human Centered Design / Notwendigkeit und Vorteile im Entwicklungsprozess (frühe Anpassungen = weniger Kosten, etc.) | A | |
| 1 (2) | Das Zusammenspiel von verschiedenen Berufen aufzeigen (Entwickler:in, UX-Research, Business Analysten, etc.) insbesondere die Unterscheidung zwischen Visual Design und UX-Design: Klärung, dass dies unterschiedliche Disziplinen sind. | A | |
| 1 (3) | Auswahl (vorgegebener) Case: «Neue App für ein Zoo-Besuch»: Neuartige App, die den Besuch im Zoo erleichtern und verbessern soll. z.B. für Familien, Einzelpersonen, Gruppen, Tickets kaufen, Touren sehen, Wo ist was, News, etc. | A | |
| 2 (5) | Analyse der User (Proto-)Personas und deren Aufgaben: Welche Nutzergruppen haben wir und was ist deren primäre Aufgabe bzw. Bedürfnis? (z.B. Familien mit 2 Kindern an einem Samstag Nachmittag im Zoo) | A | Theydo.io |
| 2 (7) | Ableitung von Kunden/Nutzer, Probleme, Lösungsansätze, Metriken, Stakeholder, Randbedingungen, Risiken («Problem Statements») | A | |
| 1 (8) | Annahmen/Hypothesen auflisten und priorisieren: Von welchen Annahmen in Bezug auf die App bzw. die User gehen wir aus? Wie sicher sind wir uns dabei und was wäre die Auswirkung, wenn dem nicht so ist? Grundlage für späteres User Testing z.B. User wollen Tickets digital kaufen | A | |
| 1 (9) | Ist-Zustand des heutigen Flows erstellen (= “Journey-Map”): Wie funktioniert ein Besuch im Zoo heute? | A | Miro |
| 2 (11) | Mögliche Chancen zur Optimierung identifizieren in der Journey-Map identifzieren anhand von bekannten Informationen (= «Opportunity Areas»): Wo gibt es heute Probleme und Herausforderungen? An welchen Stellen im Flow besteht Potential für Verbesserung bzw. Innovation? | A | |
| 1 (12) | Mittels Kreativitätsmethode (z.B. 6-3-5) mögliche Lösungsansätze generieren | B | |
| 2 (14) | Visualisierung der Lösungsansätze auf Pen & Paper, Bewertung in der Gruppe und Priorisierung (= “Design Studio”), Ideenkatalog zusammenstellen | B | Papier und Bleistift |
| 2 (16) | Soll-Zustand des Flow erstellen: Ziel, Aufgaben, Teilaufgaben (=“User Story Map”) | B | |
| 2 (18) | Prototyp der Key Screens entwerfen (z.B. «Paper-Prototyp») anhand der formulierten User Story Map | B | Figma oder Balsamiq |
| 2 (20) | Bildhafte Darstellung des Flows mittels den Key Screens (= “User Journey”) | B | Papier und Bleistift |
| 2 (22) | Erste Validierung der Key Screens (z.B. Hallway Testing, Expertreview) Aufzeigen, dass bereits mit diesem Stand wichtige Learnings gewonnen werden können. Rückführung in Prototyp | B | |
| 2 (24) | Ausarbeitung bzw. Umsetzung des Prototypen in einem clickable Low-Fi Prototyp | C, D | Figma oder Bubble |
| 2 (26) | User Test vorbereiten: Kritische Stellen im Prototyp identifizieren, dafür auch die Annahmen-Map zur Hilfe nehmen Konkrete Fragestellungen und Aufgaben für den User Test ableiten | C, D | |
| 2 (28) | User Test durchführen mit mind. 5 Personen (Nielsens 5 User Regel) Findings festhalten z.B. in einem Excel-Sheet o.ä. | C, D | MS Teams, Zoom, Solid User Tests Excel oder PowerPoint |
| 2 (30) | Prototyp gemäss den Findings aus dem User Test anpassen | C, D | |
| 2 (32) | Sensibilisierung auf das Thema Accesbility Überprüfen der Elemente im Prototyp auf Barrierefreiheit | E | Microsoft’s Inclusive Design Toolkit / Userway / spezifische Plug-Ins für Figma |
| 2 (34) | Optimierung der Elemente und Aufzeigen der Anpassungen bzgl. Barrierefreiheit. | E | |
| 2 (36) | Abgabe und/oder Präsentation und Bewertung der Lernprodukte z(usammen mit den Lernenden) |
[20%] Zwei Kurzprüfungen (Checkpoints)
[40%] Projektdokumentation
[40%] Klickbarer Prototyp