Helping hand
Durchführen einer Nutzungskontextanalse
Definieren von Nutzungsanforderungen
UI/UX-Design
Prototyp einer Mobile App
Übersicht des erstellten Prototypen
Vorab kann sich der gesamte Prototyp angesehen werden. Es werden der Onboarding Prozess und folgend die einzelnen Bestandteile des Prototypen gezeigt.
Folgend werden die Entwicklungsschritte des Projektes genauer erklärt und erläutert, welche Schritte des menschzentrierten Gestaltungsprozesses durchlaufen wurden.
Übersicht
Im Zuge der Vorlesung Objektorientierte Sytstementwicklung wurde uns die Aufgabe gestellt, einen interaktiven Prototypen einer mobilen Anwendung zu entwickeln. Es gab keine Einschränkungen bezüglich des Themas. Wir entschieden uns dazu, einen Prototypen zu entwickeln, welcher die freiwillige Nachbarschaftshilfe unterstützt und den generationsübergreifenden Austausch anregt.
Das Projekt wurde innerhalb eines Semesters bearbeitet. Grundsätzlich arbeitete jeder im Team an UX-Research, UX/UI-Design und Prototyping. Als Tool wurde Figma verwendet.
Nutzungskontext
Aufgrund von privaten Erfahrungen war uns von Anfang an klar, wie wichtig gegenseitige, freiwillige Unterstützung, egal in welchem Kontext, ist. Nach kurzer Recherche mussten wir feststellen, dass bezüglich dieser Thematik eine Marktlücke existiert, da es zum damaligen Zeitpunkt kein System gab, welches dieses freiwillige Engagement fördert.
Dieser Grundgedanke entwickelte sich aus dem Problem, dass vor allem viele ältere Menschen bei alltäglichen Aufgaben an ihre körperlichen Grenzen stoßen. Auch die Auseinandersetzung und der Umgang mit neuen Medien wie dem Internet, Smartphones oder Computern stellen viele ältere Menschen vor große Herausforderungen. Eine einfache Bedienung der Funktionen steht dabei im Vordergrund.
Unser System sollte sich vor allem auf die gegenseitige Unterstützung in der erweiterten Nachbarschaft konzentrieren. Existierende, physische Beispiele hierfür sind Wohnprojekte oder Generationenhäuser.
Durch Beobachtungen und Befragungen von Freunden und Bekannten wurden folgende Personas erstellt, um den Nutzungskontext festzulegen:
Demnach sind die primären Nutzer des Systems angemeldete Personen, die entweder die Hilfe anderer über das System annehmen oder selbst Hilfe über das System anbieten. Sekundäre Nutzer sind beispielsweise die Support- und Entwicklungsteams, welche das System regelmäßig updaten und Nutzerfragen beantworten. Indirekte Nutzer können Personen sein, die selbst nicht in der Lage sind, das System zu nutzen, und durch einen primären Nutzer, welcher als Mittelsmann fungiert, vom System profitieren und somit Hilfeleistungen entgegennehmen oder Hilfe anbieten. Die Aufgaben der primären Nutzer bestehen aus dem Anbieten und Entgegennehmen von Hilfeleistungen über das System, in Form von Inseraten. Zu den Ressourcen gehören Smartphones, das Programm in Form einer installierten App und die Fähigkeit, das System zu bedienen oder sich bei der Bedienung helfen zu lassen. Die physische Umgebung des Nutzungskontexts sind alle Umgebungen, in denen ein Smartphone benutzt werden kann. Die soziale Umgebung ist ein (Nachbarschafts-)Umfeld, welches offen für freiwillige Hilfe ist.
Annahmen über das Nutzungsumfeld
Es wurde angenommen, dass der Bedarf des lokalen Dienstleistungsaustausches besteht. Ferner wurde davon ausgegangen, dass dieser Austausch gewollt wird und dadurch die lokale Gemeinschaft gestärkt wird.
Außerdem wird angenommen, dass die potenziellen Nutzer des Systems ein Smartphone oder Tablet mit Internetverbindung besitzen. Des Weiteren besteht die Annahme, dass das System einen dauerhaften Support erhält. Dies wird in Form von Updates und Fehlerbehebungen gewährleistet. Es wird davon ausgegangen, dass mit der Zeit die Nutzerzahlen steigen werden und dies zur Stärkung des lokalen Zusammenhaltes beitragen kann.
Nutzungsanforderungen definieren
Für die Nutzungsanforderungen wurde ein eigenständiges Anforderungsdokument angefertigt, welches jeden Aspekt des Systems abdeckt. Um den Rahmen der Präsentation innerhalb dieser Arbeitsprobe nicht zu sprengen, werden exemplarisch nur die allgemeinen Anforderungen an die App aufgezeigt.
Die App soll im AppStore und im PlayStore kostenlos zur Verfügung stehen. Zum Download ist ein Account im jeweiligen Store notwendig.
Die App soll abwärtskompatibel sein .
HelpingHand soll maximal 200MB Speicher auf dem Endgerät für die Installation einnehmen.
Die standardisierte Ladezeit zum Aufrufen eines Screens beträgt 250 ms.
Beim erstmaligen Öffnen der App wird der Nutzer gefragt, ob die App Zugriff auf den GPS-Standort haben darf. Durch „Erlauben“ oder „Ablehnen“ kann er das entscheiden. Diese Entscheidung soll später widerrufbar sein.
Wenn die Internetverbindung abbricht oder nicht vorhanden ist, wird dies dem Benutzer angezeigt. Er kann die Aktion wiederholen, bis wieder Internetzugang besteht. Ist beim Start der App keine Verbindung vorhanden, wird der Benutzer sofort darauf hingewiesen.
Konzeptentwicklung
Nachdem der Name Helping Hand das erste Mal während der Ideenfindung fiel,konnten wir uns schnell auf diesen einigen. Er spiegelt genau das wider, was wir im Prototyp umsetzen wollten: Eine helfende Hand, welche entweder angeboten oder entgegengenommen werden kann. Bezüglich des Aufbaus der App schauten wir uns bestehende Apps an, die ähnlich wie unsere Idee funktionierten.
Vor allem von Kleinanzeigen ließen wir uns aufgrund der Möglichkeit, Dinge anzubieten bzw. zu suchen, inspirieren. Aber auch Websites wie Task Rabbit oder Nachbarschaftshilfe.de gingen in eine ähnliche Richtung wie unsere Ideen. Die grundlegende UI von Helping Hands wurde somit von Kleinanzeigen inspiriert und das prominente Filtermenü, welches in unserem System umgesetzt wurde, findet sich ähnlich bei Task Rabbit wieder.
Prototyping
Der interaktive Prototyp wurde über simple Wireframes zu einem High-Fidelity-Konzept ausgebaut. Vor allem die Konsistenz von UI- und Interaktionsdesign spielte eine große Rolle.
Login & Registrierung
Der Login- und Registrierungsprozess wurde ähnlich wie in vielen anderen Apps strukturiert. Der Nutzer hat die Möglichkeit, ein neues Konto anzulegen oder sich mit einem bestehenden Konto anzumelden. Des Weiteren wurde eine Möglichkeit zum zurücksetzen des Passworts umgesetzt.
Homescreen
Der Homescreen ist das Herzstück der App. Hier werden alle verfügbaren Inserate, getrennt in “Suche“ und “Biete“, aufgelistet.
Über das Suchfeld am oberen Bildschirmrand kann nach Stichworten oder Standorten gesucht werden. Rechts daneben befindet sich ein Location-Picker, mit dem über eine Karte ein Standort ausgewählt werden kann. Zusätzlich zum Suchfeld können die Inserate über die Filter angepasst werden. Die Buttons “Biete“ und “Suche“ filtern die Inserate nach diesen Kriterien. Über den “Inserat erstellen“-Button können eigene Inserate samt Titel, Kategorie, Standort und Beschreibung erstellt werden.
Die Inserate selbst zeigen das Profilbild des Erstellers, die Kategorie, den Namen und Standort des Erstellers, den Titel des Inserats und die Bewertung des Erstellers.
Die Navigationsleiste ist aufgeteilt in Home, Messenger, Profil und Einstellungen.
Inserat
Die Inserateseite selbst zeigt zu den auf dem Homescreen abgebildeten Informationen eine genaue Beschreibung des Inserats an.
Über den Button “Kontakt aufnehmen“ wird der Messenger geöffnet.
Über das Profilbild und den Namen des Profils oben gelangt man zum Profil des Inserenten.
Inserat Erstellen
Über den “Inserat erstellen“-Button auf dem Homescreen wird man auf diese Seite weitergeleitet.
Der Nutzer hat die Möglichkeit, ein eigenes Inserat zu erstellen und dieses zu veröffentlichen. Er kann Titel, Kategorie, Standort und Beschreibung hinzufügen.
Über den Button “Inserat Vorschau anzeigen“ kann der Nutzer sich eine Vorschau des Inserats anzeigen lassen und dieses im nächsten Schritt veröffentlichen.
Profile
Die Seiten der Fremd- und Eigenprofile sind grundsätzlich gleich aufgebaut und bieten eine Übersicht des jeweiligen Profils.
Das Fremdprofil zeigt das Profilbild, den Namen, das Alter, die Bewertung, die Beschreibung und die Kontaktmöglichkeiten. Außerdem gibt es die Möglichkeit, das Profil über einen Slider zu bewerten und einen Button, mit dem eine Kontaktanfrage an den Nutzer des Profils geschickt werden kann.
Auf dem Eigenprofil sind die Bewertungsfunktion und der “Kontaktanfrage senden“-Button nicht platziert. Dafür gibt es hier eine Übersicht aller Kontakte und die Möglichkeit, das Profil zu bearbeiten.
Messenger
Über die Nachrichtenübersicht, welche über die Navigationsleiste erreicht werden kann, können alle verfügbaren Chats geöffnet werden.
Der Chat selbst ist sehr rudimentär und bietet keine relevanten Unterschiede zu anderen üblichen Chatfunktionen.
Erweiterbarkeit
Das System kann durch mehrere Aspekte erweitert werden, um mehr Nutzer zu erreichen und weitere Anforderungen zu erfüllen.
Eine Möglichkeit hierfür wäre die Entwicklung einer Desktop-Version, um nicht durch den mobilen Markt eingeschränkt zu werden. Des Weiteren gibt es die Möglichkeit der Integration von Ausleihmöglichkeiten von verschiedenen Werkzeugen oder anderen Produkten. Außerdem können Werbebanner, die an Stelle von Inseraten platziert werden, die Weiterentwicklung des Systems bezahlen.