Incom ist die Kommunikations-Plattform der Technische Hochschule Augsburg Gestaltung

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

Smart Toilet

Das folgende Projekt ist im Rahmen des Moduls „Screen-Design“ entstanden. Es ging um die Gestaltung einer App, dessen Ausgangspunkt ein fiktives Haushaltsgerät war. Für das Haushaltsgerät dachten wir uns ein Smart-WC aus, welches anhand des Stuhlgangs Ernährungs- und Gesundheitstipps geben kann. Anschließend entwickelten wir eine App, um das WC zu steuern und andere Features zu nutzen.

Idee

Ideen_Screen.pngIdeen_Screen.png

Smarte WCs gibt es schon, jedoch haben wir uns weitere Features überlegt, die praktisch sein könnten. Diese Features sind individuell anpassbar und sorgen für ein optimales Erlebnis.

Personas

Personas_Screen.pngPersonas_Screen.png

In der frühen Phase des Projekts entwickelten wir Personas. Diese Personas sollten repräsentativ für unsere Zielgruppe sein. Sie helfen uns dabei, die Bedürfnisse der zukünftigen Nutzer besser zu visualisieren. Dadurch kann die Gestaltung der App optimiert werden, um dem Nutzer das bestmögliche Erlebnis bieten zu können. Da so ein Haushaltsgerät relativ teuer ist, dachten wir uns, dass es wahrscheinlich von älteren Leuten gekauft wird. Zudem ist ein großer Teil der App das Dokumentieren und Optimieren von Gesundheit. Also etwas, worüber sich jüngere Menschen noch nicht sorgen.

Informationsarchitektur

Informationsarchitektur_Screen.pngInformationsarchitektur_Screen.png

Bei der Konzeption der Informationsarchitektur sammelten wir alle Ideen und sortierten sie in passende Kategorien. Die fünf Hauptkategorien setzen sich zusammen aus:

dem Homescreen, auf dem man allgemeine Informationen erhält

der Analyse, bei der man individuelle Informationen findet

dem Komfort, welcher für Einstellungen zuständig ist, die auf den jeweiligen Körperbereich angepasst werden können

dem Ambiente, in dem man Einstellungen anpassen kann, die die Umgebung beeinflussen

und letztendlich der Fortschrittsseite, auf der man seine Werte in Form von Punkten und Trophäen verfolgen kann

Wireframes

Wireframes_Screen.pngWireframes_Screen.png

Beim Erstellen der Wireframes fokussierten wir uns darauf, das Grundlayout logisch und sinnvoll zu gestalten. Durch die Wireframes bauten wir uns ein Grundgerüst, mit dem wir später die App finalisieren konnten. Wir achteten darauf, die Schriftgrößen, Abstände und Anordnung so nutzerfreundlich wie möglich zu gestalten.

Keywords

Key_Words_Screen.pngKey_Words_Screen.png

Um den Prozess zu optimieren, wählten wir passende Keywords, die die Designrichtung vorgeben würden. Da es um ein Haushaltsgerät im Bad ging, wählten wir folgende Keywords: steril, hell, sauber, minimalistisch. Die Nutzer sollen ein möglichst sorgenfreies Erlebnis haben und sich so wohl wie möglich fühlen.

Moodboards

Moodboard_Screen.pngMoodboard_Screen.png

Bei dem Erstellen des Moodboards orientierten wir uns ebenfalls an den Keywords. Wir ließen uns von medizinischen Apps inspirieren, die viel Weißraum haben und ein sauberes und klares Design priorisieren.

Typographie

Typo_Screen.pngTypo_Screen.png

Wir entschieden uns für die Museo Sans Rounded als Schrift, da sie einen freundlichen Charakter durch die Rundungen hat. Die Schrift kommt außerdem in vielen Schnitten und lässt sich ebenfalls gut für Fließtext verwenden. Dadurch können wir bei der Typographie extrem einheitlich und simpel bleiben.

Farben

Farben_Screen.pngFarben_Screen.png

Als primäre Farbe wählten wir ein helles und klares Blau. Zum einen passt es zur Bad-Thematik, aber es wirkt auch beruhigend und vermittelt Vertrauen. Als sekundäre Farben wählten wir Orange, da es einen guten Kontrast zum Blau bildet. Das Grün wählten wir, um Erfolgserlebnisse darzustellen. Abgesehen von diesen Farben nutzten wir noch eine Palette verschiedener Graustufen.

Icons

Icons_Screen.pngIcons_Screen.png

Für die Menüleiste sowie die Icons der verschiedenen Kategorien der Erfolge entschieden wir uns für Icons, die auf Linien basieren. Die Icons sollten möglichst minimalistisch und nicht zu dick sein, um gut ins Design zu passen.

Cliparts

Cliparts_Screen.pngCliparts_Screen.png

Die Cliparts nutzten wir hauptsächlich für die Trophäen, die man freischalten kann, und für die Profilbilder. Bei den Trophäen wählten wir letztendlich die Variante mit dem Verlauf, da Trophäen nur eine dekorative Funktion haben und der Verlauf einen hochwertigen Eindruck vermittelt. Bei den Profilbildern blieben wir jedoch bei den Linien, damit diese nicht zu sehr aus dem Gesamtdesign fallen.

Klickdummy

Fachgruppe

Kommunikationsdesign

Art des Projekts

Keine Angabe

Zugehöriger Workspace

Screendesign 2024

Entstehungszeitraum

Sommersemester 2024