Designkonzept
Zwei Studios,
ein Designsystem.
Konzeptstudie: zwei eigenständige Studiomarken auf einem gemeinsamen Designsystem – Tarife vergleichbar, Mitgliedschaft komplett online abschließbar. Entstanden aus Eigeninitiative, keine offizielle Website der Studios.
- Umfang
- 12 Seitentypen, Anmeldung in 4 Schritten, Verwaltungs-Demo
- Rolle
- Analyse, Konzept, UX/UI-Design, Frontend
- Tools
- Next.js, React, TypeScript, Tailwind CSS, Playwright
- Jahr
- 2026
Leinwand
Alle Screens auf einen Blick
Jeder Screen als Artboard, Desktop und Smartphone nebeneinander. Ein Klick öffnet die interaktive Demo genau dieser Seite.
Ziehen zum Verschieben · Strg/⌘ + Scrollen zum Zoomen · Pfeiltasten und +/− per Tastatur
Konzept · Yellow Fitness & Alive Perg
Designkonzept-
M01 — Startseite (Mobile)
-
M02 — Studio Linz (Mobile)
-
M03 — Studio Perg (Mobile)
-
M04 — Mitgliedschaft (Mobile)
-
M05 — Anmeldung · Tarif (Mobile)
-
M06 — Anmeldung · Daten (Mobile)
-
M07 — Anmeldung · Bank (Mobile)
-
M08 — Anmeldung · Prüfen (Mobile)
-
M09 — Anmeldung · Erfolg (Mobile)
-
M10 — Verwaltung · Liste (Mobile)
-
M11 — Verwaltung · Detail (Mobile)
-
M12 — 404 (Mobile)
Wischen für weitere Screens. Tippen öffnet die Live-Demo.
Ausgangslage & Ziel
Zwei Marken, ein Weg zur Mitgliedschaft.
Yellow Fitness in Linz und Alive in Perg sind zwei eigenständige Studiomarken mit je eigener WordPress-Website; die Online-Anmeldung läuft über ein Formular und E-Mail.
Die Studie zeigt, wie beide Marken auf einem gemeinsamen Designsystem aufbauen können, ohne ihre Eigenständigkeit aufzugeben. Interessierte sollen ihr Studio und den passenden Tarif in wenigen Klicks finden, Preise direkt vergleichen und die Mitgliedschaft vollständig online abschließen. Dazu kommt eine schlanke Verwaltung der eingehenden Anmeldungen.
- 01Studiowahl ohne Umweg
- 02Tarife transparent vergleichen
- 03Anmeldung komplett online
Designsystem
Ein Token-Set, zwei Themes.
Alle Komponenten nutzen dieselben semantischen Tokens. Ein Attribut pro Bereich schaltet Akzentfarbe und Bühne um: Gelb auf Schwarz für Linz, Lime auf Petrol für Perg.
Yellow Fitness Linz
- Gelb#FCC000
- Ink#0E0F0F
- Chalk#F2F0EA
Alive Perg
- Lime#D3D800
- Petrol#00465B
- Petrol tief#02303E
Display
Zwei Studios.
Anton – Headline-Schrift von Yellow
Text
Trainieren, wann es in deinen Tag passt.
Reddit Sans – Hausschrift von Alive
Labels & Daten
Täglich 06:00–23:00
Reddit Mono – Zeiten, Preise, Status
Komponenten
Online-Anmeldung
Vom Tarif zum Vertrag in vier Schritten.
Mobil zuerst gedacht: Auswahl immer sichtbar, Fehler direkt am Feld, nichts geht verloren beim Zurückspringen.
-
1 Tarif-Logik
Studio wählen, nur passende Tarife erscheinen. Ermäßigung schaltet alle Preise live um. Aus dem Tarifrechner kommt die Auswahl schon vorbelegt.
-
2 Erziehungsberechtigte unter 18
Das Geburtsdatum steuert den Ablauf: unter 14 keine Anmeldung, unter 18 erscheinen Felder für eine erziehungsberechtigte Person.
-
3 IBAN-Prüfung
Länge und Prüfziffer nach ISO 13616 werden direkt im Browser geprüft, mit verständlicher Fehlermeldung. Die BIC ist für Konten aus Österreich und Deutschland optional.
-
4 Zusammenfassung
Alle Angaben auf einen Blick, die IBAN maskiert. „Bearbeiten“ springt in den Schritt und danach direkt zurück zur Übersicht.
Verwaltung
Anmeldungen, die nicht im Postfach liegen bleiben.
- Status-WorkflowNeu → In Bearbeitung → Angelegt → Chip ausgegeben, mit Zählern pro Status.
- Filter & SucheNach Studio, Tarif, Status und Zeitraum, dazu Suche nach Name oder E-Mail und CSV-Export.
- DetailansichtAlle Vertragsdaten, IBAN maskiert, Erziehungsberechtigte bei Minderjährigen, interne Notiz.
Demo mit erfundenen Beispieldaten.
Was ich gemacht habe
Von der Analyse bis zum klickbaren Prototyp.
- 01
Analyse
Inhalte, Tarife und Abläufe beider Studios strukturiert erfasst.
- 02
Konzept
Informationsarchitektur, Studios als Daten statt doppelter Seiten.
- 03
UX/UI
Designsystem mit zwei Themes, mobile-first, WCAG 2.1 AA als Ziel.
- 04
Frontend
Next.js mit Server Components, statisch vorgerendert, Tests für Tarif-, Alters- und IBAN-Logik.
- 05
Prototyp
Klickbare Anmeldung und Verwaltung, ohne echte Datenübertragung.
Selbst durchklicken
Demo mit Beispieldaten, keine Funktion: Es werden keine Daten gesendet oder gespeichert.
Ähnliches Projekt? Lassen Sie uns reden.
Online-Anmeldung, Tarifrechner oder ein Designsystem für mehrere Marken und Standorte: Ich melde mich innerhalb von 24 Stunden mit einer ersten Einschätzung.
Kostenloses Erstgespräch sichernoder direkt per E-Mail: kontakt@bergmair-digital.at
Fotos und Logos: Yellow Fitness OG / ALIVE OG, mit freundlicher Genehmigung.
Konzeptstudie. Die gezeigten Entwürfe sind keine offizielle Website der Studios; Preise und Inhalte dienen nur der Darstellung.