Eine UI/UX-Fallstudie der FarmaGym Mobile App

Apr 29 2023
Hi! Mein Name ist Alvin Putra Perdana und ich bin UI/UX-Designer. In diesem Projekt habe ich eine Fitnessanwendung und auch ein Gesundheitsprodukt auf einer mobilen Plattform entworfen.

Hallo ! Mein Name ist Alvin Putra Perdana und ich bin UI/UX-Designer. In diesem Projekt habe ich eine Fitnessanwendung und auch ein Gesundheitsprodukt auf einer mobilen Plattform entworfen. Die Kombination zwischen Buchungsmethoden für Fitnessstudios und Gesundheitsprodukten in einer Anwendung ist eine großartige Idee, die das Leben des Benutzers vereinfachen wird.

01

Überblick

PT Farmagym Sehat Sekali ist ein Unternehmen, das sich mit Fitness im Zusammenhang mit Fettleibigkeit, Gewichtsverlust und der Erhaltung der Ausdauer beschäftigt. Dies sind die aktuellen Einnahmequellen des Unternehmens:

  1. Bio-Lebensmittel und -Getränke, die durch die Steuerung des Nährwerts entsprechend den Bedürfnissen ihrer Benutzer Gewicht verlieren können, und
  2. Bereitstellung eines für Männer und Frauen getrennten Ortes für Benutzer zur Nutzung von Fitnessgeräten,

Kürzlich wollte das Geschäftsentwicklungsteam den Markt durch die Durchführung eines Farmagym Tech-Programms mit attraktiven Werbeaktionen erweitern. Dieses Programm wurde auf der Grundlage von Untersuchungen des Geschäftsentwicklungsteams erstellt, deren Ergebnisse zeigten, dass Universitätsstudenten die nächste Zielgruppe des Unternehmens sind, da ihre großen Träume nicht mit ungesunden Lebensstilen wie langem Aufbleiben, Schlafmangel oder frühem Schlafen zusammenhängen , Junk Food essen usw. Dies macht sie sehr anfällig für Stress, Fettleibigkeit, psychische Störungen, Herzinfarkte in jungen Jahren und andere.

Das Unternehmen hofft, ihnen dabei zu helfen, ihre großen Träume zu verwirklichen, indem es einen gesunden Lebensstil wie Bewegung, Fitness und den Verzehr gesunder Lebensmittel beginnt, was das Unternehmen natürlich erleichtern wird.

02

Ziele

Erstellen Sie eine App, die Schülern dabei hilft, einen gesunden Lebensstil zu beginnen, indem sie Sport treiben und sich gesund ernähren. Darüber hinaus kann diese App das Engagement neuer Benutzer steigern, den Ruf des Unternehmens verbessern und die Kundenbindung stärken.

03

Meine Rolle

Solo-UI/UX-Designer

04

Methodik

Beim Entwerfen dieses Anwendungsdesigns habe ich die Design-Thinking-Methodik angewendet, um das Problem anzugehen und es in einem Prototyp-Design zu lösen. Dieser Ansatz besteht aus fünf Phasen: Einfühlen, Definieren, Ideen entwickeln, Prototypen entwickeln und schließlich testen.

Bild 4: Temukan Ide Brilian mit Design Thinking!

05

Forschungsergebnis

5.1 Betonen

Ich nehme diese Phase in Anspruch, um ein tieferes Verständnis erlangen zu können. Das bedeutet, dass ich einfühlsam sein muss, um die Benutzer kennenzulernen und ihre Wünsche, Bedürfnisse und Ziele zu verstehen.

Zielgruppe der FarmaGym Mobile App:

  1. Männer/Frauen im Alter von 20–25 Jahren
  2. Diejenigen, die Schwierigkeiten haben, einen gesunden Lebensstil zu führen
  3. Diejenigen, die die Motivation haben, einen gesunden Lebensstil zu führen
  1. Primäre Forschung: Befragung eines Befragten, um direkte Informationen von potenziellen Nutzern der Farmagym Mobile App zu erhalten.
  2. Sekundärforschung: persönliche Recherche zu gesammelten Informationen aus vorhandenen Quellen.

Was ist eine Empathiekarte? — „Eine Empathiekarte ist eine kollaborative Visualisierung, die verwendet wird, um zu artikulieren, was wir über einen bestimmten Benutzertyp wissen. Es externalisiert Wissen über Benutzer, um 1) ein gemeinsames Verständnis der Benutzerbedürfnisse zu schaffen und 2) bei der Entscheidungsfindung zu helfen.“ (Sarah G – NN Group, 2018)

5.1: Empathiekarte

5.2 Definieren

Was ist eine Definition? — „Eine Benutzerbedürfniserklärung ist eine umsetzbare Problemerklärung, die zusammenfasst, wer ein bestimmter Benutzer ist, welche Bedürfnisse der Benutzer hat und warum die Bedürfnisse für diesen Benutzer wichtig sind. Es definiert, was Sie lösen möchten, bevor Sie mit der Generierung potenzieller Lösungen fortfahren, um 1) Ihre Sicht auf das Problem zu verdichten und 2) eine Erfolgsmetrik bereitzustellen, die während des gesamten Design-Thinking-Prozesses verwendet werden kann.“ (Sarah G – NN Group, 2019)

Ziel dieser Phase ist es, die Entdeckungen auf der Empathiekarte zu dekonstruieren und zu synthetisieren (Abbildung 5.1). Diese Entdeckungen sind interessante Erkenntnisse, weil sie die spezifischen Herausforderungen berücksichtigen. Dieser Prozess ist für mich beim Entwerfen eines Produkts sehr wichtig, da er die Probleme aus den verschiedenen Themen auf der Empathiekarte aufzeigen kann.

Bild 5.2.1: Schmerzpunkte

Nachdem ich diesen Prozess durchlaufen habe, werde ich in der Lage sein, verschiedene umsetzbare Problemstellungen (POVs) zu formulieren, z. B. wie wir im Folgenden vorgehen könnten:

Bild 5.2.2: Wie könnten wir

5.3 Ideen entwickeln

In dieser Phase habe ich eine Vielzahl radikaler Designalternativen entwickelt, mit dem Ziel, eine umfassende Lösung sowohl für eine große Anzahl als auch für eine Vielzahl von Ideen zu finden. Die Idee, die ich zusammengestellt habe, basiert auf einer Zusammenfassung des „Wie könnten wir“ ( Bild 5.2.2 ).

Laut The Concise Oxford Dictionary (1987) bedeutet der Begriff „ Radikal “ „Wurzel“, „Quelle“ oder „Ursprung“. Im weiteren Sinne bezieht sich der Begriff „radikal“ auf die grundlegenden Dinge, Grundprinzipien, Sachverhalte und Wesentlichkeiten verschiedener Phänomene, kann aber auch „ungewöhnlich“ bedeuten.

Bild 5.3.1: Lösungsidee

Ich habe diese Lösungsidee anhand des folgenden Affinitätsdiagramms nach Kategorien gruppiert :

Bild 5.3.2: Affinitätsdiagramm

Nach der Gruppierung nach Kategorien habe ich eine Liste von Ideen erstellt, die ich entsprechend ihrer Dringlichkeit entwerfen sollte, mit den folgenden vier Quadranten von Priorisierungsideen :

Bild 5.3.3: Priorisierungsidee

5.4 Prototyp

In dieser Phase habe ich den Prototyp nacheinander zum Teil des Designs gemacht, z. B. Task Flow, Low-Fidelity-Design mit Prototyp, Style Guide, High-Fidelity-Design und Prototyp .

Aufgabenablauf:

Dies ist eine Skizze des Benutzerflusses bei der Verwendung der Anwendung.

Bild 5.4.1: Aufgabenablauf

Low-Fidelity-Design:

Dies ist eine Skizze des Benutzerflusses bei der Nutzung der Anwendung in Form von Wireframes.

Bild 5.4.2: Low-Fidelity-Design mit Prototyp (Diätprodukt)
Bild 5.4.3: Low-Fidelity-Design mit Prototyp (Fitnessstudio)

Gestaltungsrichtlinie:

Um das Branding der Benutzeroberfläche aufrechtzuerhalten, muss ich einen Styleguide erstellen, der aus Farben, Typografie, Logos, Balken, Eingabefeldern, Dropdowns, Schaltflächen, Symbolen, Umschaltern und anderen besteht.

Siehe Styleguide:https://www.figma.com/file/yxNWz9ONV3mvhxES14zCFa/7_Design-System-%E2%86%92-UI-Style-Guide-dan-Component-Library?type=design&node-id=0%3A1&t=E1dqz9XVJI20r2tj-1

High-Fidelity-Design:

Bild 5.4.4: High-Fidelity-Design (Onboarding-Bildschirm)
Bild 5.4.5: High-Fidelity-Design (Anmeldung)
Bild 5.4.6: High-Fidelity-Design (Anmelden/Registrieren)
Bild 5.4.7: High-Fidelity-Design (Home)
Bild 5.4.8: High-Fidelity-Design (Diätprodukt)
Bild 5.4.9: High-Fidelity-Design (Fitnessstudio)

High-Fidelity-Prototyp

Testen

Hier können Sie meinen Prototyp über Maze testen

Schließen

Insgesamt bin ich stolz auf die Arbeit, die ich mit der UI/UX-Fallstudie der mobilen Farma Gym-App geleistet habe. Allerdings bin ich als Designer immer auf der Suche nach Möglichkeiten, mich zu verbessern und zu wachsen. Wenn Sie Anregungen oder Feedback zu meinem Projekt haben, würde ich mich sehr darüber freuen. Vielen Dank, dass Sie sich die Zeit genommen haben, meine Arbeit zu überprüfen. Ich hoffe, dass ich meine Fähigkeiten weiter verfeinern und in Zukunft noch bessere Designs erstellen kann.