Anstatt mir in diesem kurzem Semester ein neues Konzept für eine App zu überlegen, entschied ich mich, angelehnt an den Apps & Details-Kurs von Frank Rausch, ein Redesign einer vorhandenen App zu machen um damit in die Welt von Xcode und SwiftUI einzutauchen. Im Kurs von Frank, arbeitete ich mit Adobe XD an einem Redesign vom Kontakt-Tagebuch, einer Tagebuch-App für persönliche Kontakte während der Pandemie.

Die AOK-Bonus-App benutze ich schon einige Jahre, allerdings hat sich in Punkto Gestaltung, Benutzerfreundlichkeit und technische Stabilität bisher nichts positives getan. Die Krankenkasse AOK PLUS biete in dieser App an, soziale Aktivitäten wie z.B.: Blutspende, Vorsorgetermine oder sportliche Aktivitäten einzutragen und dafür mit Punkten belohnt zu werden. Diese Punkte können dann in Euro umgewandelt und auf das eigene Bankkonto überwiesen werden.

Dass die Entwickler der App wohl noch nicht viel von Apples Human Interface Guidelines gehört, oder schlichtweg ignoriert haben wird schon beim ersten Blick klar. Die UI Elemente erinnern einfach so stark an Android und daran, dass die App wahrscheinlich mit einem Programm wie React Native für beide Plattformen (iOS & Android) entwickelt wurde, ohne die Guidelines des jeweiligen Betriebssystems ernsthaft zu berücksichtigen. 

Weiter gibt es auf dem Start-Screen sehr wenige, und dann auch noch kontrastmäßig schwach dargestellte Informationen. Die anderen Screens wie das Bonuskonto (mit den vergangenen Aktivitäten), das Statuslevel, oder die Einstellungen verstecken sich alle hinter einem grünem Hamburger-Menu. 

Es gab also viele Baustellen. Und ich war gespannt, was ich hier allein mit den Möglichkeiten die mir SwiftUI bietet erreichen kann.

Folgend meine ersten groben Skizzen in Adobe XD. Umso mehr ich mit SwiftUI zurecht kam, hatte ich kaum Lust vorher pixelgenaue, typografisch ausgearbeitete Screens zu basteln. Oft war es einfacher und schneller direkt in Xcode Ansichten zu erstellen, gerade auch dank den vielen automatischen Anpassungen von Elementen oder Typografie mit SwiftUI. Typografische Details wie Tabellenzahlen fehlen nach wie vor in Adobe XD.

→ Ein Update-Screen, welcher tatsächlich wünschenswert wäre, gibt einen kleinen Überblick darüber welche Veränderungen für den Nutzer vorgenommen wurden.

→ Ein Startscreen der nun alle wichtigen Informationen und Interaktionen anbietet. Über das Plus-Symbol können neue Aktivitäten hinzugefügt werden. Neben der Anzahl der Bonuspunkte und der Möglichkeit den Betrag direkt auszahlen zu lassen, gibt es eine kleine Vorschau der letzten Aktivitäten. Die Farben und Icons bringen eine Abwechslung zu der Akzentfarbe und zeigen die unterschiedlichen Kategorien von Aktivitäten an.

→ Das Sheet zum Hinzufügen einer neuen Aktivität ist nun ein einzelnes modales Fenster und zeigt die relevaten Informationen nun übersichtlicher an.

→ Klickt man auf eine bereits eingereichte Aktivität, werden Details dazu kurz zusammengefasst.

→ Bei der Auszahlung hat man einen genauen Überblick darüber, wieviele Punkte man hat, sich Auszahlen kann und wieviel Punkte übrig bleiben würden, wenn man sich nur einen kleinen Betrag auszahlen lässt.

→ Zusätzlich zur Auszahlung von Bonuspunkte wurde man früher in der AOK-Bonus-App noch mit Gutscheinen und Rabatten belohnt. Umso mehr Punkte man ein einem Jahr sammelt, umso höher steigt sein Statuslevel und damit auch der Zugriff auf immer mehr Coupons. Ich habe testweise diese Funktion zurückgeholt und beispielhaft in dem neuem Tab -Coupons- wieder eingeführt.

→ Die Einstellungen fassen einige Menüpunkte zusammen, die vorher im Hamburger-Menu hinter Reitern wie Service, Kontakt oder Einstellungen versteckt waren.

Das kurze Video bietet einen kleinen Rundgang durch alle Screens und Funktionen und zeigt den UserFlow, der in den einzelnen Screen nicht so einfach sichtbar wird.

*Bitte Fullscreen aktivieren

Ich finde SwiftUI eine echt gute Möglichkeit neben den klassischen Prototyping Tools wie Sketch, XD oder Figma Prototyen zu bauen, die eigentlich keine Prototypen, sondern fast schon fertige, programmierte Apps sind. Leider gehe ich hier von Entwürfen aus, die sich stark an Apples Human Interface Guidelines halten und stark auf den Standard UI Elementen basieren. Möchte man ein Element verändern ist das oft nicht einfach möglich, es sei denn man baut es komplett neu. Super praktisch sind aber automatisierte Anpassungen wie Dark/Light Mode, typografische Details die im Entwurf in Sketch viele Änderungen von Textelementen mit sich bringen, in SwiftUI aber oft nur eine oder zwei Zeilen Code bedeuten. 

Ich blicke positiv in die Zukunft von SwiftUI und der Möglichkeit, ohne wirklich große Programmierkenntnisse, mehr oder weniger funktionierende Programme zu erstellen, an denen sonst tage- oder wochenlang ein Programmierer:in sitzt, der vielleicht die ein oder anderen Designentscheidungen gar nicht umsetzen kann und die ganze Entwicklung darunter leidet. Wenn Designer:innen mehr von der Implementierung von Funktionen und Entwicklungsprozessen verstehen, kann das nur einen großen Vorteil für die ganze Zusammenarbeit bedeuten. 

Mich würde es sehr freuen, wenn diese Bewegung anhält und im Designstudiengang Interfacedesign viel mehr darauf gesetzt wird, Design und Programmierung von Apps zu vereinen, da diese Fähigkeiten in ein paar Jahren (und sicher schon jetzt) sehr gefragt sind.

UPDATE