Redesgin Flatastic-App
Wie kann eine App dazu beitragen, dass das Zusammenleben in einer WG besser funktioniert?
Mit dieser Frage beschäftigten wir uns im Kurs Application Design I, wo es um die konzeptionelle Neugestaltung einer bestehenden mobilen Anwendung ging.
APPLICATION DESIGN // 3. SEMESTER // TEAM: SARAH EIGEL, HANNAH GATTER, ELISABETH SCHEER // BETREUT VON REBECCA SCHELLHORN
01 _ Start
Flatastic
Die App "flatastic" hilft dabei, das tägliche Leben in einer Wohngemeinschaft zu organisieren. Die vier Kernfunktionen der App umfassen: Einkaufsliste, Putzplan, Chatfunktion und Finanzverwaltung. Der Fokus des Redesigns lag auf den Userrequirements, dem Nutzungskontext, der Strukturierung der Funktionen und deren Zugang, dem Interaktionskonzept und -verhalten und schließlich dem Visual Design.
02 _ Analyse
Um stichhaltige Begründungen für unsere Designentscheidungen liefern zu können, führten wir eine umfassende Wettbewerbsanalyse durch. Wir 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.
Key Findings
Smarte Verknüpfung von Einkauf und Finanzen
Neue Funktionen: Umfragefunktion wird eingeführt
Verzicht auf
überflüssige Elemente wie Pinnwand und Chat
Neue Hauptkategorien: Finanzen, Haushalt,
Umfrage, Einkauf
03 _ 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 uns 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 starteten wir eine Umfrage und priorisierten und verorteten die sich herauskristallisierten Funktionen im Kanomodell.
Design Principles
praktisch + unterstützend
intuitiv +
strukturiert
fair +
verbindend
harmonisch +
positiv
hilft bei der Organisation des gemeinsamen Haushalts
und steht zur Seite bei der Bewältigung des Alltags
sorgt für eine inhaltliche Übersicht über die
anstehenden Aufgaben
und bietet die Möglichkeit intuitiv innerhalb der
Anwendung zu handeln
fördert die Gleichberechtigung und sorgt für eine faire Aufgabenaufteilung
und Transparenz
vereinfacht die Kommunikation
und stärkt die zwischenmenschlichen Beziehungen
04 _ 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 sowie 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
05 _ 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.
Positive Sprache
ermutigt und motiviert den Benutzer
seinen Aufgaben nachzukommen und
verbreitet Harmonie
Navigation
Die Tap-Bar-Navigation lässt den Benutzer leicht zwischen den Hauptkategorien Home, Finance, Cleaning, Shopping und Survey navigieren.
Farben
Die Komplementärfarben Gelb und Blau spiegeln die unterschiedlichem Charaktere wider, die es in der WG gibt. Gelb als Highlightfarbe führt den Blick und zeigt wichtige Aktionsmöglichkeiten an z. B. den floating Actionbutton. Die klassischen Signalfarben Rot und Grün markieren Dinge, die erledigt wurden oder im Verzug sind.
Typografie
Acumin ist eine vielseitige serifenlose Schriftfamilie, die von Robert Slimbach entworfen wurde und auf eine ausgewogene und rationale Qualität abzielt. Solide neo-grotesk, eignet sie sich hervorragend für die Darstellung auf dem Display.
from: https://acumin.typekit.com/
Illustrationen
Jede Kategorie wird durch passende Illustrationen von Alltagsthemen visulalisiert. Die Illustrationen verleihen der App einen persönlichen und freundlichen Charakter.
UI Controls
Der floating action button ist das zentrale UI-Element, mit dessen Hilfe Listen verwaltet und Aufgaben oder Umfragen hinzugefügt werden können.
Die Listenelemente lassen sich durch Swipen nach links oder rechts weiter bearbeiten.
Die Subnavigation filtert die Inhalte.
Das Actionsheet erscheint bei Eintragungen oder Benachrichtigungen.
Meine Aufgaben
Analyse
Research
Konzept
Wireframing
Visual Design
Prototyping
Konzeptvisualisierung
Tools
Figma
Illustrator
Principle
After Effects
Premiere