Interface

POS Kassensystem: Leuchtturm 






Aufgabe des Kurses war es, sich ein bestehendes Kassensystem einer Lokalität in Schwäbisch Gmünd azuschauen, und für diese Lokalität ein neues Kassensystem, mit dem Focus Interface/ Userexperience, zu entwickeln. Wir entschieden uns für den Leuchtturm, welcher aus Bowlingbahn, Sportslounge und Musik besticht. 







Recherche






Die Recherche bestand aus Besuchen des Lokals:
Hier interviewten wir Mitarbeiter, fassten ihre Routinen auf, schauten uns das bestehende Kassensystem an.
 
 ︎ ︎






Keyfindings






  1. Erster Kritikpunkt war es, dass nicht alle Bereiche des Leuchtturms im aktuellen Bezahldevice zu bedienen waren. 
  2. Auch eine teilweise unverständliche Einteilung der Produkte sowie die Anordnung der Buttons, waren negativ-Punkte. 
  3. Ein weiterer Wunsch der Mitarbeiterinnen war es, dass es möglich sein sollte, den Preis des Produkts im Auswahl-Menü zu sehen, sowie Informationen über die Inhaltsstoffe bei Bedarf abrufen zu können. 
  4. Der letzte Punkt auf der Liste stellt ein fehlendes „das Essen ist fertig“ Signal im Gerät dar.

︎ ︎







Grundriss






Der Grundriss der Lokalität spielte eine große Rolle in der Konzeption unserer Anwendung: Den Angestellten sollte es möglich sein, jeden Bereich mit einem Device zu bearbeiten. Wie man sehen kann, besitzt der Laden eine Vielzahl an getrennten Bereichen, mit unterschiedlichen Angeboten. Es galt: Alles muss in ein System integriert werden.






Wireframes






Login

Zu Beginn der Schicht meldet sich jede Bedienung per Passwort und nutzername, oder durch Fingerscan an.

Nach dem Login kann die Bedienung auf ihre Arbeitsdaten zugreifen (rechtes Bild).






Bereiche

Um dem Grundriss gerecht zu werden, gibt es für jeden Bereich einen Screen. Durch swipen nach links oder rechts kann man zwischen den verschiedenen Bereichen navigieren.

︎ ︎







Indikatoren

Um möglichst viel Information für die Bedienung auf kleinem Platz unterzubringen, entschieden wir uns für eine Cachelansicht, welche mit verschiedenen Indikatoren ausgezeichnet ist  

︎ ︎







Tisch/Produktauswahl

Wählt man eine Tischkachel aus, so gelangt man in die Übersicht des Tisches. Nun ist es möglich, Speisen und Getränke auf einen Platz, oder auf den ganzen Tisch zu Buchen.
Wählt man also Platz oder Tisch aus, gelangt man anschließend zur Produkt-Übersicht. Je nach Bereich in dem sich der Tisch befindet, passt sich die Karte an. Durch scrollen kann man weitere Produkte sehen.

︎ ︎






Produktindikator

Wie auch die Tische, besitzen die Produkt-Cacheln Indikatoren. Prägend hierfür waren unsere Keyfindings.






Buchung & Bezahlung

Das gebuchte Produkt findet sich in der Liste wieder, und kann per Plus und Minus vervielfacht oder stoniert werden.
Drückt man den Abrechnungs-Button, kommt man zur Bezahlmöglichkeit. In diesem Beispiel wird ein Coupon zur Bezahlung verwendet, daher öffnet sich die Kamera um den QR-Code einzuscannen.

︎ ︎







Farbcodierung

Um schnelle Unterscheidung der Kategorien zu gewährleisten, wurden die Produkte mit einem Farbindikator versehen:

  • Gelb: alkoholfrei
  • Orange: alkoholisch
  • Rot: Essen
  • Violett: Extras
        







Info

Das Semesterprojekt wurde
von Thomas Techert betreut.
Team

- Jona Maletic
- Janik Freisinger
- Corinna Hirt 
Projekt

- Interface / Usabilty 1
- 2.Semester
- HfG Schwäbisch Gmünd

Mark
Invention Design

Future Coworking Konzept






Die Grundidee des Kurses ist es, etwas Neues zu erfinden oder bestehende Technologien auf eine neue, noch unbekannte Weise zu nutzen. Unser Konzept basiert auf einer Zukunftsvision des Coworkings.










Prozess






Um eine Zukunftsprognose für unser Projekt treffen zu können, mussten wir Experten im aktuellen Geschehen, betreffend der Coworking Thematik, sowie allen aktuellen und zukünftigen Technologien werden.

︎ ︎








Videotelefonie






Bei unserer Recherche ist die Wichtigkeit der Videotelefonie/Konferenz aufgefallen. Sie ist essentieller Bestandteil von Zusammenarbeit. Sie ermöglicht zwar Kommunikation, ist jedoch meilenweit von einem realen Meeting entfernt.






Userstory






Um den Arbeitsalltag mit Videokonferenzen greifbar zu machen, illustrierten wir eine Userstory, welche auf die Problemstellung des Projekts
aufmerksam macht.

︎ ︎




Produkt






Für das oben aufgezeigte Problem haben wir eine futuristische Lösung entwickelt. Es trägt den Namen HoloKit, und stellt aus technischer Sicht eine Kombination aus Tiefensensor, 3D-Mikrofon und
Farbkamera dar. Es gibt vier einzelne Segmente. pro Wand wird ein Segment angebracht. Man erhält ein 3D Bild, welches an eine AR-Brille gestreamt wird. Somit spricht man Hologramm-ähnlich mit seinen Partner. Es wird eine authentische Gesprächssituation geschaffen.






Userstory mit Produkt





Im zweiten Teil der Userstory wird der Arbeitsalltag mit unserem Produkt aufgezeigt.

                                                          ︎ ︎




Prototyp






Um die Realitätsnähe unseres Projektes aufzuzeigen, machten wir uns an einen Prototypen. Es ist uns gelungen, ein 3D Abbild zu genererien, jedoch haben wir es zeitlich nichtmehr geschafft, das Bewegtbild-Material an einer AR/VR-Brille zu streamen.








Info

Das Semesterprojekt wurde
von Prof. Jörg Beck betreut.
Team

- Maximilian Härle
- Paul Schänzlin
Projekt

- Invention Design
- 3.Semester
- HfG Schwäbisch Gmünd

Mark
 Interaktive kommunikationssysteme

Die Entwicklung der Schrift





Ein interaktives Ausstellungsexponat soll die Entwicklung der Schrift, sowie die kulturellen Aspekte der jeweiligen Epoche näher bringen. Die Anwendung ist für Schulen oder Museen vorgesehen.

                                    





Struktur






Für die Umsetzung dieses komplexen Themas erarbeiteten wir drei Ebenen:

Die erste sollte Kontext zwischen Kultur und der jeweilligen Schrift schaffen. Die zweite Ebene diente der tieferen Informationsvermittlung. Die dritte sollte die Schrift, trotz ihres Alters greifbar machen.

Prozess






Mit unserer Grundidee vollzogen wir mehrere Iterationen von Konzeptskizzen, um diverse Ideen auszuprobieren. Nach der Festlegung des Konzeptes machten wir uns an die Screens.

Hierfür nutzten wir Papierprototypen, um verschiedene Bestandteile flexibel austauschen zu können, ohne jedesmal neu zu beginnen.


                                               
︎ ︎
                     




 

Bestandteile






Ebene 1

Um den kulturellen Aspekt mit dem Schriftzeichen zu transportieren, entschieden wir uns neben den Schriftzeichen als Hero, für den Mensch ausgewählter Epoche, dessen Architektur, sowie Örtlichkeit des Geschehens.

Navigation

Durch Swipe der Schriftzeichen arbeitet man sich im Alphabet der jeweiligen Epoche voran. Das “+” direkt darunter bringt den Nutzer auf die passende Infoebene (Ebene 2). Der rote Button unten links bringt den Nutzer zur Nachzeichnen-Ebene (Ebene 3). Desweiteren wird unter dem Schriftzeichen eine Timeline angedeutet, sechs Punkte für sechs Epochen. Der rote Punkt zeigt an wo man sich befindet, durch einen Klick gelangt man zur nächsten Epoche.



︎ ︎









Ebene 2

Hier wird dem Nutzer ermöglicht, tiefer in das Thema einzutauchen, und das nötige Hintergrundwissen zu erlangen.

Navigation

Über das Close-Icon oben rechts kann man die zweite Ebene verlassen, und landet wieder auf der Ebene 1.
︎ ︎









Ebene 3
Das Schriftzeichen wird in der Nachzeichnen Ebene segmentiert, und das Segment welches nachzuzeichnen ist, leuchtet rot auf. Ist das Segment nachgezeichnet, wird es wieder weiß. Links daneben kann man andere Schriftzeichen aus der Epoche zum Nachzeichnen auswählen.

Navigation

Wie auch in der vorherigen Ebene, kann man durch das Close-Icon zurück zur Ebene 1 gelangen.
       



                




Info

Das Semesterprojekt wurde von
Fabian Schröbel betreut.

Team

- Maximilian Härle


 Projekt

- Interaktive Kommunikationssysteme 1

- 2. Semester

- HfG Schwäbisch Gmünd

Mark
Application 1


DRK Erste Hilfe: Redesign




 
In Application 1 soll eine beliebige App im Appstore ausgesucht, und redesigned werden. Das redesign Umfasst nicht nur das visuelle Gewandt, sondern auch die Struktur. Wir haben uns für die DRK-Erste Hilfe App entschieden, da Erste Hilfe ein sehr wichtiges Thema ist, und die App mehrere Mängel aufweiste.







Interview






Zu Beginn des Projekts verabredeten wir uns mit dem DRK zu einem Interview. Thema des Gesprächs war die Erste Hilfe. Dabei kamen einige interessante Infos zu Tage, wie zB. dass oft nicht geholfen wird, da Angst besteht, etwas falsch zu machen. Die Ziele für das Redesign sind rechts gesammelt.







Analyse






Nutzerbedürfnisse:

  • in Notsituation das Richtige zu tun

  • durch die Notsituation geführt werden

  • Leben retten

  • sich keine Fehler erlauben

  • Möglichst viele Infos in kürzester Zeit

Nutzungskontext:

  • sehr variabel

  • leichte bis schwere Unfälle

  • immer wenn Personen Hilfe brauchen

Bestehende Funktionen:

  • Erste Hilfe Voice Asisstant

  • Notruf Assistent

  • Lebensretter: Kleines Lexika über die Vorgehensweise bei verschiedenen Gefahrensituationen

  • Infos zum DRK - Termine, Niederlassungen etc.


Bestehender Flow:

  • Erste Hilfe: Nutzer wird mit Stimme durch verschiedene Fragebögen geleitet, unterstützt durch Stock Images

  • Notruf Assistent: Infos zeigen, was wichtig ist beim Anruf, und man kann direkt anrufen

  • Lebensretter: Nutzer sieht ein Überblick-Menü, kann dann ein Themengebiet wählen, und gelangt dann zur Detailansicht des ausgewählten Themas

Konkurrenzanalyse:

  • Erste Hilfe IFCR App, ähnlicher Aufbau, anschaulichere, und verständlichere Animationen
Probleme:

  • schlechte Übersicht

  • Ungeeignet für Notsituationen

  • keine guten Animationen

  • schafft eher Chaos als Hilfe

  • ingesamt schlechtes Auftreten





Ausgangspunkt






Erste Hilfe:

Kleiner Lebensretter:






Styleguide






Da es bereits einen eigenen Styleguide vom DRK gibt, nutzten wir diesen, um möglichst authentisch zu arbeiten. Nur notwendige Elemente wurden für unser App-Redesign genutzt.
 

︎ ︎







Struktur






Die erste Hilfe-Funktion vermittelte einen unübersichtlichen Abfragestrang, und war zum großen Teil mit Fragen versehen, welche nicht von fataler Bedeutung für eine Notsituation waren. Also kürzten wir den Abfragestrang auf die Quintessenz der Lebensrettung, welche wir beim Interview erfahren hatten.




Redesign






Erste Hilfe:
Kleiner Lebensretter:








Info

Das Semesterprojekt wurde
von Prof. Hartmut Bohnacker betreut.
Team

- Jona Maletic
Projekt

- Application 1
- 3.Semester
- HfG Schwäbisch Gmünd

Mark



Robin Bork 2019 — Schwäbisch Gmünd, Baden-Württemberg