UX Beispiele

Themenfindung

Erstes Brainstorming

3 Ideen - erstes Konzept + Beispielapps

1) WildLIVE

WildLIVE ist eine App mit der UserInnen die Biodiversität in ihrer Umgebung spielerisch entdecken können. Neben einer Sammelfunktion gibt es auch Fakten zu der lokalen Flora und Fauna.

2) bleibFIT

BleibFit ist eine App die hauptsächlich ältere Menschen ansprechen soll. Durch alltägliche Übungen leitet sie die UserInnen zu einem gesünderen Lebensstil, sowie kann sie damit helfen altersbedingte Krankheiten vorzubeugen.

3) Bappel

Bappel ermutigt UserInnen Dialekte näher kennenzulernen sowie sich mit ihnen auseinanderzusetzen . Der Aufbau erinnert an eine klassische Sprachlern-App und versucht durch einen spielerischen Ansatz die UserInnen zu motivieren weiterzulernen.

Zielgruppe, Wettbewerb & Funktionsammlung

Zielgruppe

Wettbewerbsanalyse

Funktionssammlung - 3 Ansätze

Interviews & Funktionsreduzierung

Reduzierte Funktionsliste

UserInnen-Interview

Ziel: Nutzen einzelner Funktionen / Wünsche + Interessen UserInnen herausfinden

Ratingfragen:

1= Nein, auf gar keinen Fall, 

2= Nein, eher nicht, 

3= Neutral/keine Meinung, 

4= Ja, würde ich wahrscheinlich nutzen, 

5= Ja, würde ich auf jeden Fall nutzen

ExpertInnen Interview

Finale Zielgruppe, Why, How, What - Zieldefinition & Personas

Finale Zielgruppe:

junge (naturinteressierte) Menschen zwischen 16 und 24 Jahren

Sinus-Milieu der Zielgruppe

Zieldefinition

Personas & Schwartz Wertemodell

User Story & User Journey - Vortrag

Vortrag

Template

User Journey & Use Cases / User Stories

User Journey

User Stories

Paper Prototyp

Use Cases:

1) Informationen zu lokal aktuellen Vogelbeobachtungen erhalten + Sichtung dokumentieren (bis 00:14)

• UserIn möchte sich aktuelle Sichtungen auf der Landkarte ansehen und selbst eine Sichtung auf der Karte hinzufügen

2) Vogelart per Foto bestimmen + Sammelkarten anschauen (00:14 - 00:38)

• UserIn möchte die Vogelart per Foto bestimmen und nutzt hierfür ein Foto aus seiner / ihrer Galerie
• die anschließend freigeschaltete Sammelkarte möchte der / die UserIn im Profil ansehen und einen Überblick über seine / ihre aktuelle Liga erhalten

3) Vogelart per Fragen bestimmen (ab 00:38)

• UserIn möchte die Vogelart per Fragen bestimmen
• UserIn hat den Vogel im Wald gesehen, der Schnabel war länglich und spitz, der Vogel wurde am späteren Nachmittag gesichtet

Wireframes

Artenbestimmung per Fragen:

Artenbestimmung per Foto:

Sammelkarte und Artenportrait ansehen:

Karte betrachten und Beobachtung zur Karte hinzufügen:

User-Testing Feedback

• Sammelkarte auch bei Fragenbestimmung erhalten

• Möglichkeit zwischen Foto- & Fragenbestimmung einfach wechseln zu können

• Plus (Hinzufügen einer Sichtung) auf Landkarte präsenter

• Standort auf Karte eindeutiger erkennbar machen

• Fun Facts auch später noch anschauen können

Sammelkarten

(auch verwendet in unserer Studie in Designforschung)

Überarbeitung & Ergänzung Wireframes

Fragenbestimmung:

• Hinzufügen Ladebalken & Zurückpfeil

• konkrete Kategoriebenennung

Kalenderfunktion & Übersicht + Sichtung im Kalender eintragen:

Moodboards

Homescreen designt nach Moodboards - Festlegen des finalen Stiles

Anpassen der Sammelkarten

Finaler Prototype (gestylt)

Screencast

Epics

 1) 00:00 - 00:55

User:in möchte eine Vogelart per Foto bestimmen und erhält eine Sammelkarte 

2) 00:56 - 01:29

User:in möchte eine Vogelart per Foto aus der Galerie bestimmen und möchte mehr über die gefundene Art erfahren 

3) 01:30 - 02:11

User:in möchte eine Vogelart per Fragenbestimmung bestimmen 

4) 02:12 - 03:28

User:in möchte auf der Landkarte nach einer Vogelart suchen und anschließend eine Sichtung der entdeckten Art hinzufügen

5) 03:29 - 04:33

User:in möchte sich seine / ihre Kalenderübersicht anschauen und schließend eine Sichtung eintragen

(6) 03:34 - 04:50

User:in möchte durch seinen / ihren Kalender klicken)

(Kalender Jahresübersicht nur Slider geprototypt)

7) 04:51 - 06:14

User:in möchte im Lexikon stöbern

8) 06:15 - 06:48

User:in möchte durch sein / ihr Profil stöbern

Styleguide

Figma-Link

Prototype: 

https://www.figma.com/proto/hiKzeurfp5MkCVWDXHM3p8/UX-Ideensammlung?page-id=515%3A380&node-id=1376-7454&viewport=-2515%2C6222%2C1.28&t=TtWkfusSd4FkiAcd-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1376%3A7454&show-proto-sidebar=1

Figma Board:

https://www.figma.com/design/hiKzeurfp5MkCVWDXHM3p8/UX-Ideensammlung?node-id=515-380&t=WfBwuaYFT5cQ19iJ-1

Birdify in Use

Aufgabenverteilung

Zusammen: Brainstorming, drei App-Ansätze, Zielgruppe, Wettbewerbsanalyse, Funktionssammlung, UserInnen-Interview, Finale Zielgruppe, Why, How, What-Modell/Zieldefinition, Personas, Schwartz-Modell, Paper-Prototyp, User-Journey & User Stories (+ Referat), User-Testing, Sammelkartendesign, Festlegung finaler Style

Jasmin: UX-Beispiel Maus, Wireframes Artenbestimmung per Fragen & Kalenderfunktion, Moodboard 1, Ausarbeitung, Styling & Prototyping von der Kalenderfunktion sowie der Fragenbestimmung, Styleguide, Incom-Dokumentation, Screencast der jeweils ausgearbeiteten Use Cases

Finn: UX-Beispiel Federhalter, Wireframes Artenbestimmung per Foto & Karte betrachten, Moodboard 2, Ausarbeitung, Styling & Prototyping der Kartenfunktion sowie der Foto- & Kamerabestimmung, Screencast der jeweils ausgearbeiteten Use Cases

Hannah: UX-Beispiel lingscars.com, ExpertInneninteview, Wireframes Artenpotrait & Sammelkarte ansehen, Sammelkarten-Illustrationen, Moodboard 3, Ausarbeitung, Styling & Prototyping der Artenpotraits sowie des Profils, Screencast der jeweils ausgearbeiteten Use Cases, Schnitt Screencast