Massage Mate
Die Begleit-App zur Massagepistole: auf einem 3D-Körper antippen, wo es wehtut, und einer passenden Einheit folgen, mit der Pistole, mit der Hand oder mit einem Partner.
- Rolle
- Alleiniger Entwickler und UI/UX-Designer: die Startseite mit Körperauswahl, die auf die Pistole ausgerichteten Einheiten und die Partneransicht, Fortschritt, Dunkelmodus, RevenueCat
- Auftraggeber
- Physiozep srl
- Zeitraum
- 2025–2026 (seit Februar 2026 in den Stores)
- Plattformen
- iOS und Android aus einer Flutter-Codebasis, geteilt mit TEPY
Das Produkt
Massage Mate ist die App, die zu einer Massagepistole gehört. Ihre Startseite ist ein 3D-Körper: Der Nutzer tippt an, wo es wehtut, zoomt hinein, markiert die schmerzende Stelle und erhält eine passende Einheit (eine Minute pro Zone, mit einem Video, das zeigt, wo die Pistole anzusetzen und wie sie zu bewegen ist).
Die App basiert auf TEPY, der Selbstmassage-App, die ich entwickle. In sieben Monaten habe ich aus dem Code von TEPY ein zweites Produkt gemacht (eine neue Startseite rund um die Körperauswahl, auf die Pistole ausgerichtete Einheiten mit Partneransicht, eine Fortschrittsseite, einen Dunkelmodus und Abos über RevenueCat) und es im Februar 2026 veröffentlicht.
- 38
- Commits im Massage-Mate-Branch, alle von mir, Juli 2025 bis Februar 2026
- 7 Mon.
- vom ersten Commit bis in den App Store
- 3
- Wege für jeden Schritt: mit der Pistole, mit der Hand oder durch einen Partner
- 2
- Apps aus einer Codebasis: Massage Mate baut auf TEPY auf
Rundgang
Die App in Aktion
Wählen Sie eine Aufnahme oder springen Sie direkt zu einem Kapitel.
Aufgezeichnet aus dem veröffentlichten Code in Smartphone-Größe, mit den Behandlungsvideos der App (Pistole, Hand und ein Partner mit der Pistole) unter ihren eigenen Namen, sodass Partneransicht und Wechsel des Hilfsmittels wie auf einem Smartphone funktionieren.
Funktionen
Von „Hier tut es weh“ zur Einheit mit der Massagepistole
01
Ein 3D-Körper als Startseite
Kein Onboarding: Die App öffnet direkt mit dem Körper. Ein Tipp zoomt auf ein Körperteil, ein weiterer markiert die genaue Stelle; die App speichert den Schmerzpunkt und fragt beim Backend ein passendes Programm an.
02
Eine Einheit für jeden Schmerzpunkt
Die Startseite listet die Schmerzpunkte mit ihrer Stärke und der Einheit, die für sie bereitsteht: ein Schritt pro Zone (die schmerzende und die, die mit ihr behandelt werden), jeweils eine Minute, mit Timer.
03
Mit Partner oder mit der Hand
Bei der Massagepistole wechselt der Player in eine Partneransicht: derselbe Schritt, von jemand anderem ausgeführt. Die Hilfsmittel-Schaltfläche wechselt zu jedem anderen Hilfsmittel, das der Nutzer besitzt (hier die Hand), und ein Wisch nach oben führt zur nächsten Zone, mit demselben Hilfsmittel.
04
Sichtbarer Fortschritt
Ein Wohlbefindenswert, eine Heatmap der Tage mit Einheiten über drei Monate, die absolvierten Schritte pro Zone und die Schmerzstärke jeder Zone im Zeitverlauf.
05
Abos über RevenueCat
Nach einer kostenlosen Phase brauchen die Einheiten einen Tarif: jährlich oder monatlich, gekauft im App Store oder bei Google Play über RevenueCat. Die App wird freigeschaltet, sobald der Store bestätigt.
Unter der Haube
So wurde es entwickelt
Ein zweites Produkt aus dem Code von TEPY
Massage Mate ist ein Branch von TEPY. Die gemeinsamen Widgets, Styles, Icons und Hilfsfunktionen sind in lokale Pakete gewandert, die beide Apps nutzen; das Onboarding wurde entfernt, damit die App direkt mit der Körperauswahl startet; Texte und Übersetzungen haben die Marke TEPY verloren; die Rive-Animationen sind auf die neue Runtime umgezogen.
Videos, die dem Hilfsmittel folgen
Jeder Schritt hat ein Video pro Hilfsmittel. Der Player öffnet das der Massagepistole, wechselt auf Wunsch zur Partneraufnahme und behält das gewählte Hilfsmittel von einer Zone zur nächsten bei. Abgeschlossene Schritte fließen in ein tägliches Aktivitätsprotokoll und in Statistiken pro Zone in Firestore, die die Fortschrittsseite ausliest.
RevenueCat für Abos
TEPY prüft seine Abos über das eigene Backend; Massage Mate ist zu RevenueCat gewechselt: Offerings für die Paywall, ein Entitlement, das die App freischaltet, Live-Aktualisierungen bei Änderungen und eine einmalige Wiederherstellung, die die bestehenden Abonnenten übernommen hat.
Eine Live-App aufzeichnen
Die App ist echt. Der Nutzer nicht.
Hinter Massage Mate stehen echte Nutzer, echte Schmerzverläufe und echte Abos. Nichts davon gehört in ein Portfolio, deshalb verwenden die Aufnahmen eine eigenständig laufende Kopie des veröffentlichten Codes, mit den Platzhaltern, die für die TEPY-Demo gebaut wurden.
- 1
Der veröffentlichte Code, gebaut für den Browser
Ein Flutter-Web-Build in Smartphone-Größe, der glaubt, auf einem iPhone zu laufen, mit den Compliance-Korrekturen, die auf das nächste Release warten. Push-Benachrichtigungen, Analytics und Absturzberichte sind abgeschaltet.
- 2
Die Platzhalter von TEPY und ein neuer
Anmeldung und Datenbank laufen auf den In-Memory-Fakes aus den Tests, und das Backend wird innerhalb der Seite beantwortet, wie in der TEPY-Demo. Neu ist RevenueCat: Die Demo beantwortet es mit zwei Beispieltarifen und einem Kauf, der nichts kostet.
- 3
Die Videos der App
Für jede der acht Zonen, die die Demo verwendet, holt ein Skript die Videos mit Pistole, mit Hand und mit einem Partner, der die Pistole hält, aus dem CDN, von dem die App sie streamt, ausgewählt im Katalog der App, sodass der Punkt am Körper zur Zone passt. Sie behalten ihre Namen, sodass Partneransicht und Wechsel des Hilfsmittels unverändert funktionieren.
- 4
Offline aufgezeichnet
Das Aufnahmeskript blockiert jede Anfrage, die den Rechner verlassen würde, sodass keine Aufnahme den echten Dienst erreichen kann.
Logo, Oberfläche, ihre Icons, das 3D-Körpermodell, die Bilder und die Videos stammen aus der App. Die Texte zu den Zonen, der Nutzer, der Schmerzverlauf und die Tarife sind Beispielinhalte, die für dieses Portfolio erstellt wurden; die Bewertungen und die Store-Wertung auf der Paywall sind ausgeblendet.
Hier gibt es keine Demo zum Ausprobieren: Massage Mate ist ein Live-Produkt, deshalb zeigt diese Seite Aufnahmen einer eigenständig laufenden Kopie.
Alle Bildschirme
Alle Screenshots im Überblick
Der KörperEin Körperteil antippen, um hineinzuzoomen. VergrößertDer Oberschenkel, bereit für den genauen Punkt. Die schmerzende StelleEin Antippen markiert sie. Wellness-ÜbersichtDer Schmerzpunkt und eine Einheit, die dafür bereitsteht. Die EinheitDie Zonen des Programms, jeweils eine Minute. Mit der PistoleWo und wie die Massagepistole einzusetzen ist. Mit PartnerDerselbe Schritt, von jemand anderem ausgeführt. HilfsmittelZu einem anderen vorhandenen Hilfsmittel wechseln. Mit der HandDieselbe Zone ohne Pistole. Nächste ZoneNach oben wischen für den nächsten Schritt. WohlbefindenswertBerechnet aus den Schmerzpunkten und daraus, wie regelmäßig das Programm befolgt wird. AktivitätEinheiten der letzten 90 Tage. Behandelte ZonenAbgeschlossene Programmschritte pro Zone. SchmerzverlaufDie Schmerzstärke jeder Zone, mit sinkender Tendenz. ProfilSchmerzen, Tarif und Abo, Tutorials, Darstellung. TarifeJährlich mit einer kostenlosen Woche oder monatlich (Beispielpreise). AbonniertAlles freigeschaltet. AnmeldungApple, Google, ein Firmencode oder E-Mail.
Nächste Fallstudie
Photo2Post →