Flatastic Redesign

Flatastic Redesign

Redesign der App Flatastic

Die App

Die App Flatastic versteht sich als Organisationstool für Wohngemeinschaften. Sie soll den WG Alltag erleichtern und die Mitbewohner bei der Bewältigung jeglicher Aufgaben im Haushalt unterstützen. Die ursprüngliche App baut dabei auf vier Kernfunktionen: Einkaufsliste, Putzplan, Chatfunktion, Finanzverwaltung.

Unser Task

Konzeptionelle Neugestaltung einer bestehenden mobilen Anwendung mit
Schwerpunkt auf Benutzer, Nutzeranforderungen und Nutzungskontext.
Gleichzeitig sollte der Fokus auf der Strukturierung der Funktionen und deren Zugang liegen. Aber auch Entwicklung eines Interaktionskonzeptes, sowie die Überarbeitung des Visual Designs waren Teil der Anforderung.



Analyse

Um stichhaltige Begründungen für unsere Designentscheidungen liefern zu können führten wir eine umfassende Wettbewerbsanalyse durch. Analysierten die App auf ihre Informationsarchitektur sowie deren Screenflow und hielten grundsätzliche Anforderungen wie User Needs und Goals sowie den Nutzungskontext schriftlich fest. Auf dieser Basis gründeten wir unsere Key Findings.

User Needs and Goals

Die Bewohner einer Wohngemeinschaft brauchen eine flexible und einfache Anwendung, mit der sie Alltagsvorgänge der WG organisieren können, um Ordnung, Übersicht, Kommunikation, Nachvollziehbarkeit (Dokumentation) und klare Verantwortlichkeiten innerhalb der WG zu schaffen und das Zusammenleben einfacher zu gestalten.

Nutzungskontext

Das Produkt wird täglich von den Bewohnern der Wohngemeinschaft genutzt. Dabei greift jeder Einzelne auf die dort vorhandenen Informationen zu und kann zu jedem Zeitpunkt einsehen, was aktuell eingekauft, geputzt etc. werden muss. Aktionen wie das Abrufen der Einkaufsliste passieren meist unterwegs, während organisatorische Informationen wohl meist zuhause abgerufen werden.

Key Findings

01 Einkaufsliste mit Finanzen kombinieren
02 Zahlungsfunktion bei Finanzen integrieren (z. B. PayPal)
03 Umfragefunktion implementieren
04 Loswerden überflüssiger Elemente wie Pinnwand und Chat
05 Definieren von vier neuen Hauptfunktionen (Finanzen, Haushalt, Umfrage, Einkauf)



Synthese

In dieser Phase des Prozesses beschäftigten wir uns stark mit den Nutzern der App. Wir bildeten Personas, führten mehrere Usertest mit der ursprünglichen App durch und hielten unsere Ergebnisse in einer User Journey fest, welche und Einblicke in die Struktur und Nutzerfreundlichkeit der App verschaffte. Wir entwickelten User Stories und Design Principles die uns als Leitlinie für unsere spätere Umsetzung dienen würden. Zudem wurden die sich herauskristallisierten Funktionen im Kanomodell priorisiert und verortet.

Design Principles

praktisch + unterstützend
_hilft bei der Organisation des gemeinsamen Haushalts
_steht zur Seite bei der Bewältigung des Alltags

intuitiv + strukturiert
_sorgt für eine inhaltliche Übersicht über die
anstehenden Aufgaben
_bietet die Möglichkeit intuitiv innerhalb der
Anwendung zu handeln

fair + verbindend
_fördert die Gleichberechtigung und sorgt für
eine faire Aufgabenaufteilung
_sorgt für Transparenz gegenüber allen
Mitbewohnern

harmonisch + positiv
_vereinfacht die Kommunikation
_stärkt die zwischenmenschlichen Beziehungen

Kanomodell



Konzept

Über Card Sorting gelang es die Inhalte und Funktionen, der zukünfigen App, in einer Informationsarchitektur festzuhalten und diese nun auch in ihrem Wording zu definieren. Daraufhin folgte die Erarbeitung des
Navigationskonzeptes. Und die Beantwortung der Fragen zur Menüführung. Anschließend folgte nach
ersten Visualisierungen der Screens mit Stift und Papier die Übersetzung in Low Fidelity Wireframes

Wireframes



Visual Design

Der letzte Teil des Prozesses beschäftigt sich mit der Ausgestaltung der App in den Bereichen: Farbe, Typografie, Iconstil Illustration, Grid und Layout. Die Entscheidungen in diesem Schritt gründen auf den zuvor gewonnenen Erkenntnissen aus den Phasen Analyse, Synthese und Konzept. Insbesondere die Design Principles dienen als Wegweiser bei der Erarbeitung des Visual Designs

Variantenbildung

Typografie

Farbe

Illustrationsstil

Navigationssystem

UI Elemente

Icons