Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

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

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Redesign – SuperFit App/Member Area

Im Kurs Digitale Typografie von Frank Rausch ging es darum, die Regeln und Methoden der analogen Typografie auch im digitalen anzuwenden. Das Ziel war es, die Mittel & Tools die einem die digitale Typografie zur Verfügung stellt zu nutzen und das Potential darin zu erkennen. Dazu gab es jede Woche eine neue Aufgabe, die uns dazu brachte uns mit einem typografischen Problem zu beschäftigen. In den letzten Wochen des Kurses konnten wir uns ein Projekt suchen, für das wir ein digitales Produkt, eine Webseite oder App typografisch umgestalten und redesignen sollten. Ich habe mich dafür entschieden, die App der Fitnessstudio-Kette Superfit so umzugestalten, dass ihre Nutzung einladend und hilfreich ist. Dabei wollte ich die grundlegende Funktionalität der App beibehalten.

Der Status Quo

In einem ersten Schritt habe ich die Schwächen der Superfit App und der darin »integrierten« Member Area vrogenommen. Die Member Area ist der Bereich in dem die Mitglieder der Studios ihre Verträge und persönlichen Daten einsehen und bearbeiten können. Aktuell weist diese digitale Produkt folgende Schwächen auf:

– Undurchsichtiges Hauptmenü
– Uneinheitliche Menüführung
– enge & kleine Schrift
– charakterlose Typografie
– Unnötig komplizierte Informationsarchitektur

Diese Punkte wollte ich in meinem Redesign verbessern.

Status quo.jpgStatus quo.jpg
Angebote-Menu.jpegAngebote-Menu.jpeg
Loading Screen-Vorher.jpegLoading Screen-Vorher.jpeg
Main Menu-vorher.jpegMain Menu-vorher.jpeg
Feed-vorher.jpegFeed-vorher.jpeg
Feed-vorher-2.jpegFeed-vorher-2.jpeg
Members Area-vorher.pngMembers Area-vorher.png
Members Area-vorher-2.jpegMembers Area-vorher-2.jpeg
Pers-Daten-2.jpegPers-Daten-2.jpeg

Redesign

Zu erst habe ich die leicht unterschiedlichen Rottöne, die sich im UI der App befinden, durch ein Magenta ersetzt, dass nun als Primärfarbe dient.

Bei der Schriftauswahl wollte ich eine Schrift die dynamisch und doch gut leserlich ist. Meine Wahl viel zunächst auf die Dax Pro. Das Schriftbild der Dax Pro erinnert allerdings ein wenig zu sehr an einen Computerspiel-Kontext. Eine gute Alternative dazu bietet die »Ubuntu«, eine Schrift, die im Zeitraum 2010-2011 entwickelt wurde. Die Entwicklung wurde im Namen der breiteren Freie-Software-Gemeinschaft und des Ubuntu-Projekts finanziert. Das technische Schriftdesign und die Implementierung werden von Dalton Maag durchgeführt, einer internationalen Schrift Foundry, die sich auf Schriftdesign und digitale Schriftproduktion spezialisiert hat.
Ubuntu hat mir erlaubt, das UI viel übersichtlicher und mit mehr Charakter zu gestalten.

Menüstruktur

Neben der Änderung von Farbe und Font habe ich als Omage an das ursprüngliche App Design die geometrischen Objekte silhouettenhaft nachgezeichnet und (geblurrt) als Hintergrund eingefügt.

Die Menüpunkte habe ich dunkel und halbtransparent gestaltet, so dass der Hintergrund auch ein wenig zur Geltung kommt.

Menüpunkt.jpgMenüpunkt.jpg
Farbe & Font.jpgFarbe & Font.jpg
Hintergrund.jpgHintergrund.jpg

Datenzugriff & -übersicht

In einem weiteren Schirtt habe ich die Art und Weise wie Daten – egal ob Vertragsdaten oder Persönliche Daten, wie Adressen und Telefonnummern – eingesehen und bearbeitet werden können.

Member Area Menü.jpgMember Area Menü.jpg
Datenanzeige.jpgDatenanzeige.jpg
Bearbeitbare Daten.jpgBearbeitbare Daten.jpg

Feed

Zum Abschluss habe ich die chaotische Struktur des Studiofeeds überarbeitet. Statt der immer wiederkehrenden Standardphrasen habe ich Icons und kurze Beschreibungen eingesetzt und somit ein aufgeräumteres Interface geschaffen.

Abgeschlossene Workouts.jpgAbgeschlossene Workouts.jpg
Segment Controls.jpgSegment Controls.jpg
Persönliche Rekorde.jpgPersönliche Rekorde.jpg

Alle redesignten Screens

Feed.pngFeed.png
Members Area.pngMembers Area.png
Persönliche Daten.pngPersönliche Daten.png
Vertragsdaten.pngVertragsdaten.png
Main Menü.pngMain Menü.png

Abschlusspräsentation

Superfit-Final-Präse.pdf PDF Superfit-Final-Präse.pdf

Fazit

Der Kurs hat mich in vielerlei Hinsicht weitergebracht. Zum einen konnte ich die Regeln der Typografie , die ich im Print-Kontext gelernt habe, nun auch im digitalen Rahmen umsetzen. Über das Semester hinweg habe ich viele Tools kennengelernt und meinen Blick für typografische Feinheiten geschärft.

Das Projekt an sich hat nochmal die gesammelten Erkenntnisse gebündelt und die Komponente des App Designs hinzugefügt. Alles in allem denke ich auch, dass mir eine deutliche Verbesserung des UIs der Superfit App gelungen ist.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im Masterstudium

Betreuung

foto: Frank Rausch

Entstehungszeitraum

Sommersemester 2021

Keywords

zusätzliches Material