Incom ist die Kommunikations-Plattform der Hochschule Anhalt Fachbereich Design

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Hochschule Anhalt Fachbereich Design mehr erfahren

ParentsAID

Suche dir ein Alltagsproblem und entwickle dafür ein Appkonzept. Stelle dir Fragen zu Relevanz und Intention. Entwickle ein konkretes und verständliches Design und baue spannende Animationen ein. Machs geil!

Why? [Relevanz]

Noch immer gibt es viele junge Eltern, welche gerade zu Beginn der Elternzeit mit harmlosen Krankheitsbildern/ -symptomen, die die Kinder aufweisen, teilweise überfordert und unsicher sind. Oftmals wenden sich Eltern dann an Kinderkrankenhäuser und Kinderarztpraxen, um Aufklärung zu erhalten. Da Kinderkrankenhäuser meist die erste Anlaufstelle sind, kommt es nicht selten zu dem Fall, dass diese überfüllt und ausgelastet sind.

Dem wollen wir mit unserem Konzept entgegenwirken und Abhilfe schaffen.

Recherchen

Um sich genauer mit dem Thema auseinander zu setzten, haben wir uns zu aller erst Kinderkrankheiten etwas genauer angesehen. Dabei hat uns das Buch „Gesundheit für Kinder - Kinderkrankheiten verhüten, erkennen und behandeln“ grundlegend wichtige Informationen geliefert.

Um in Erfahrung zu bringen wie die aktuelle Lage zu unserer Thematik ist, sprachen wir mit einer Kinderärztin. Diese bestätigte uns die teilweise kritischen Situationen in den Krankenhäusern und Arztpraxen.

IMG_6698.jpgIMG_6698.jpg
IMG_6697.jpgIMG_6697.jpg
IMG_6699.jpgIMG_6699.jpg
IMG_6700.jpgIMG_6700.jpg
IMG_6701.jpgIMG_6701.jpg
IMG_6702.jpgIMG_6702.jpg
IMG_6705.jpgIMG_6705.jpg
IMG_6706.jpgIMG_6706.jpg
IMG_6707.jpgIMG_6707.jpg

What? [Intention]

Unsere App soll vorrangig besonders jungen Eltern zur Aufklärung über häufig und aktuell auftretende Kinderkrankheiten informieren. Durch Kontextualierung und Personalisierung der App, gelangen die Elternteile auf einfachem und schnellem Weg zu aktuellen und für das Kindesalter relevanten Artikeln. Wir wollen, dass die App die Nutzer:innen beruhigt und diese sich besser aufgeklärt fühlen.

How? [konkretes Design]

Wir entschieden uns dazu die wichtigsten Informationen, welche Erziehungsberechtigte zu Beginn an wissen sollten, in Artikel zu verpacken. Die Artikel sollten kurz und knapp, aber auf den Punkt gebracht, erläutern um welche Kinderkrankheit es sich handelt und was in der jeweiligen Situation zu tun ist. 

Um die Anforderungen an unsere App auch im Design umsetzten zu können, haben wir uns im Vorfeld Werte definiert. Die App sollte klar strukturiert, reduziert und ruhig sein, zudem sollte sie einen persönlicheren Touch aufweisen.

Auf Grundlage dieser Werte entwickelten wir die Gestaltungskriterien:

Durch die Kacheln, in welchen sich die Artikel befinden, wollen wir eine Einheitlichkeit und klare Struktur schaffen. Als Typografie wählten wir die Helvetica Now Display, da diese seriös und nicht ablenkend wirkt, viele Schriftschnitte zum Variieren besitzt und auf das Wichtigste reduziert ist - so wie auch unsere App sein sollte. Die Farbauswahl fiel recht schnell auf die warmen, aber gedämpften Orange-, Blau- und Grautöne, welche im Einklang lebendig, freundlich, aber dennoch ruhig wirken.

Screenshot 2023-01-27 at 22.10.36.pngScreenshot 2023-01-27 at 22.10.36.png

Neben dem Herzstück der App - den Artikeln - haben wir einen Chat-Bereich integriert. Die Eltern oder andere Angehörige können hierbei unterschiedlichen Chats beitreten, in welchen sie Fragen stellen und sich mit anderen Erziehungsberechtigten austauschen können. Damit wollen wir erreichen, dass sich die Elternteile gegenseitig beruhigen, aufklären und Erfahrungen teilen.

Screenshot 2023-01-27 at 22.18.01.pngScreenshot 2023-01-27 at 22.18.01.png

Im persönlichen Profil können relevante Artikel und Chats gespeichert und Einstellungen (wie z.B. das Kindesalter) angepasst werden.

Screenshot 2023-02-05 at 20.01.07.pngScreenshot 2023-02-05 at 20.01.07.png

Prozess

Personas & Customer Journeys

Das Erstellen verschiedener Personas und deren Customer Journey haben uns nicht nur dabei geholfen unsere Zielgruppe genauer zu definieren, sie waren wichtig um unsere Interaktionen klar verständlich, benutzerfreundlich und zudem spannend auszuarbeiten.

Bildschirm­foto 2023-01-27 um 18.51.37.pngBildschirm­foto 2023-01-27 um 18.51.37.png
Bildschirm­foto 2023-01-25 um 14.39.30.pngBildschirm­foto 2023-01-25 um 14.39.30.png
Bildschirm­foto 2023-01-25 um 14.42.29.pngBildschirm­foto 2023-01-25 um 14.42.29.png
Bildschirm­foto 2023-01-27 um 18.48.23.pngBildschirm­foto 2023-01-27 um 18.48.23.png

Layout

Bevor es ans Layout für unsere App ging, haben wir sogenannte Wireframes erstellt. Ein Wireframe ist ein abstrakt dargestelltes Gerüst der App. Dabei wird weder auf Typografie noch auf Farbe angespielt, es wird lediglich der grobe Aufbau der App gescibblt um sich ein ungefähres Bild über den Aufbau der App zu verschaffen. Erst später ging es dann ans bewusste Prototypen, wie dem Erstellen eigener Grids/ Layoutraster, dem Aufbau der App und Größe der Elemente und Icons.

1_wireframes.png1_wireframes.png
a18180cb-0b7f-4a1d-bdd3-90b4c9b9566a.jpga18180cb-0b7f-4a1d-bdd3-90b4c9b9566a.jpg
Gestaltungsraster.pngGestaltungsraster.png

Styleframes

Damit die App so übersichtlich wie möglich ist, haben wir verschiedene Styleframes im Laufe des Entstehungsprozesses angefertigt. In das Herzstück der App - den Artikeln, haben wir die meiste Zeit investiert. Diese sollten einfach zu erfassen sein und nicht ablenkend wirkend. Zudem hatten wir überlegt, eine Symptomanalyse in die App zu integrieren, damit Erziehungsberechtigte anhand von Symptomen nach mögliche und ihnen unbekannte Krankheiten suchen können. Aufgrund der Unübersichtlichkeit, welche dieses Konzept in die App mit sich gebracht hätte, haben wir uns letzten Endes dagegen entschieden.

Um noch mehr Ruhe und weniger ablenkende Elemente in das Design zu bringen, entschieden wir uns gegen eine Menüleiste im unteren Bereich des Screens und legten uns daher auf eine Navigation im oberen rechten Bereich in Form eines Burger-Menüs fest.

2_Navigation.png2_Navigation.png
1_erste Styleframes.png1_erste Styleframes.png
3_Profil Variante_1.png3_Profil Variante_1.png
4_Layout Artikel.png4_Layout Artikel.png

Animationen 

Um die Nutzung der App spannender zu gestalten, arbeiteten wir verschiedene Animationen aus. Oft wurden Ideen verworfen und neu ausgearbeitet und dann wieder überarbeitet. 

Wenn du unseren finalen Prototypen einmal im Ganzen anschauen und ausprobieren möchtest, dann folge diesem Link: 

https://xd.adobe.com/view/46224a39-30e3-434c-9581-9966d4c4be55-1371/?fullscreen&hints=off

Fachgruppe

Integriertes Design

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Hermann Klöckner foto: Martin Wiesner

Zugehöriger Workspace

OM Dynamic UI Land

Entstehungszeitraum

Wintersemester 2022 / 2023

Keywords