Was ist moba?

moba • modern balcony

lebendig • praktisch • vielfältig

Die moba App ermöglicht es dem User seinen smarten Balkon optimal auf seine Bedürfnisse einzustellen. 

Dabei lassen sich nicht nur grundlegende Eigenschaften des Balkones, wie seine Größe, Form und Art des Geländers modifizieren, auch die passende Musik- und Lichtstimmung kann ovm User bestimmt werden. 

Ebenso gibt es eine Auswahl von voreingestellten Szenarien – passend für den jeweiligen Anlass. 

Funktionen für die Überwachung der Balkonpflanzen sowie der Reinigungsassistent erleichtern dem User den Alltag. 

Ob für das Home-Office oder den Grill-Abend mit der Familie und Freunden, die moba App optimiert jeden Balkon.

Idee

Unsere Idee war es, einen smarten Balkon zu entwickeln, welcher sich per App über das Handy steuern lässt. Dem User ist es möglich, den Balkon perfekt auf seine Bedürfnisse einzustellen.

Recherche

Während unserer Recherche haben wir uns zuerst allgemein mit den Smarthome Möglichkeiten, welche es inzwischen gibt und welche am häufigsten genutzt werden, beschäftigt.

Anschließend sind wir in die Historie der Balkone eingetaucht: Welche Arten von Balkonen und Geländern gibt es? Welche Balkone waren/sind besonders beliebt? Wie wirken die verschiedenen Arten von Balkonen und Geländern? Wie werden Balkone heutzutage genutzt? Welche Szenarien sind auf Balkonen möglich?

Schlussendlich haben wir uns noch mit den aktuellen Balkon-Gadgets beschäftigt; also: Was gibt es bereits?

Personas

Als wir unsere Personas erstellt haben, war uns besonders wichtig, dass wir sowohl die jüngere Generation, als auch die ältere Generation in unser Projekt miteinbeziehen, denn einen variierbaren und smarten Balkon kann sowohl Jung als auch Alt gebrauchen.

Dadurch, dass wir die jüngere und ältere Generation als User haben wollten, hatten wir die Herausforderung beim Aufbau und der Gestaltung unserer App, diese für jedes Alter passend zu gestalten – das heißt übersichtlich und einfach im Aufbau, aber deshalb nicht langweilig in der Gestaltung.

Folgend stellen wir Tim Meier und Edith Schildbach vor:

Sidemap

Bereits bei unserer Sidemap mussten wir beachten, dass ein einfacher, leicht verständlicher Aufbau der App im Vordergrund steht, da die App für ein breites Publikum funktionieren soll. 

Die Sidemap diente während des gesamten Projektes als Vorlage. Wir orientierten uns stark an unserer Vorlage in Form der Sidemap, um die Klarheit und Einfachheit des Aufbaus während der Bearbeitungsphase des Projektes nicht aus den Augen zu verlieren.

Wireframes

Auf Basis unserer low-fidelity Wireframes, erstellten wir unsere high-fidelity Wireframes mit dem Programm Figma. 

Die Hauptaufgabe war, die Sidemap in die Form einzelner Screens zu bringen. Hierbei fokussierten wir uns darauf, den einfachen, übersichtlichen Aufbau unserer Sidemap beizubehalten und ließen sämtliche Design-Elemente außen vor.

Denn wir mussten uns zuerst auf den Inhalt der einzelnen Screens, der Anzahl und den Aufbau der Screens sowie die verschiedenen Bedienelemente konzentrieren.

Style Keywords

Innerhalb der Übung der Mood Statements bildeten wir Sätze mit unseren Personas und sogenannten Style Keywords. 

Parallel suchten wir Style Keywords – also Wörter, welche besonders gut zu unserer App passen.

Aus diesen Style Keywords filterten wir die für unsere App acht wichtigsten Wörter.

Name • Logo • Claim

Der Name moba entstand aus der Zusammensetzung der beiden Wörter „modern“ und „balcony“. Also einer Kombination der Wörter, welche unser fiktives „verrücktes“ Hausgerät beschreiben.

Die Basis des Logos ist die Zierschrift, welche wir in der App verwendet hatten. Durch ihren linearen Stil erinnert sie an ein Balkongeländer und ist somit sehr passend. Der dynamische Schriftzug ist die stilisierte Darstellung eines Balkons.

Der Claim „lebendig • praktisch • vielfältig“ entstand durch unsere Style Keywords und spiegelt die Funktionen des Hausgeräts und unserer App wieder.

Interaction Design

Da uns von Beginn an klar war, dass wir einen einfachen und verständlichen Aufbau der App brauchen und wir auch in der Gestaltung nicht zu viel „Schnickschnack“ verwenden können, da wir die App auch für die ältere Generation verständlich halten möchten, wollten wir mit Interaktionen arbeiten.

Deshalb entschieden wir uns sehr früh für das Element „Drehregler“. Durch den Drehregler ist der Userflow immer noch einfach, klar und verständlich, aber trotzdem spannend.

Folgend die verschiedenen Varianten, wie wir den Drehregler in unserer App zum Einsatz brachten:

Visual Design

Bevor wir mit dem Visual Design begonnen hatten, suchten wir Inspirationen und hielten diese in Form eines Moodboards fest. Wir beide hatten unabhängig voneinander ähnliche Moods herausgesucht, weshalb schnell klar war, in welche Richtung es gehen sollte.

Besonders gut gefiel uns die Idee mit einem Hellblau-lilanem Verlauf zu arbeiten, da hier die Assoziation zum Himmel gegeben ist und dies gut zum Thema „Balkon“ passt.

Da wir sehr viel mit Reglern in unserer App arbeiten, recherchierten wir nochmal insplizit im Bereich „Regler“.

Wie oben bereits genannt, entschieden wir uns für einen Farbverlauf von blau und lila. Wir entschieden uns explizit gegen die Farbe Schwarz, da diese störend wirken und unser freundliches Design nicht unterstützen würde. Zudem suchten wir zu den verschiedenen Szenarien passende Farben, welche aber auch mit unserem Verlauf im Hintergrund gut harmonieren, damit die Szenarien besser voneinander unterscheidbar sind.

Zur Szenariendarstellung in der Übersicht entschieden wir uns bewusst gegen Fotografien und für Icons, da diese bildhafter sind und in der kleinen Größe besser funktionieren.

Bezüglich der Typografie haben wir uns die Zen Tokyo Zoo wir Zierschrift für die Menüpunkte gewählt. Zudem haben wir die Schriftart als Basis für unser Logo verwendet. Aus optischen Gründen haben wir uns für Versalien entschieden. Die Inter Semi Bold haben wir als Satzschrift für sämtliche Informationen gewählt, da diese gut mit unserer Zierschrift harmoniert und gut lesbar ist. Auch hier haben wir uns für die Schreibweise in Versalien entschieden. Lediglich beim Infotext der Assistentenfunktion haben wir uns für den Regular Schriftschnitt und die klassische Schreibweise mit Groß- und Kleinbuchstaben entschieden.

Wenn man unser Detail Design genauer betrachtet, fallen folgende Punkte besonders auf:

• Formgebung im Hintergrund und der Tapbar

• Schattierungen der einzelnen Buttons, welche durch die Inspiration des neuen Designstils „Neumorphismus“ entstanden

• Segmented Control Element zum Wechsel zwischen der einzelnen Menü-Unterpunkte

• Andeutung der nächsten Auswahl-Option durch dezente Buttons innerhalb des Drehreglers

Innerhalb des Figma Arbeitsprozesses erkennt man neben den bereits genannten Details, die „Verwandlung“ vom Wireframe zur fertigen App: 

Wie man sieht, haben wir mit dem Verlauf im Hintergrund begonnen. Der darauffolgende Schritt war die Auswahl der Typografie. Nachdem Farbe und Schrift festgelegt waren, wurde am Hintergrund gefeilt und dieser wurde durch Formen, Schatten und gezielter Linienführung dynamischer. Auch die Tapbar erhielt die Form, welche im Hintergrund mehrfach zu sehen ist.

Für die Menüfenster, in welchen die Farbe ausgewählt werden sollte, überlegten wir zuerst, den Hintergrund in Grautöne umzufärben, damit sich der Hintergrund nicht mit dem Farbregler beißt. Jedoch entschieden wir uns aus optischen Gründen und aufgrund des einheitlichen Designs innerhalb der App doch für unseren farbigen Verlauf im Hintergrund – auch bei der Farbauswahl. Letztendlich finden wir diesen sogar harmonischer als den grauen Hintergrund in Kombination mit den Farbreglern.

Prototyp

Folgend zeigen wir unseren Prototypen zur moba App.

Zum einen die fertigen einzelnen Screens und ein Screenrecording während wir uns durch die moba App „durchklicken“.

In der Projektbeschreibung befindet sich zudem noch der Link zu unserem Prototypen. Hier kann man sich selbst durch unsere moba App durchklicken.