Website & Schulungspanel

01Kontext

Maz brauchte eine vertrauenswürdige Site und ein bewohnbares Panel

Biomaze / Bildungsgruppe Maz ist eine landesweite iranische Konkur-Marke. Die Live-Präsenz ist biomaze.ir.

Von 2022 bis 2025 ging es in Teilzeit um Website und Lernpanel sowie ein Design-System für die Entwicklung.

Abbildung 02Markenzeichen von der Cover-Seite in BioMaze | Design.

02Problem

Drei Jobs, eine Marke, noch ohne gemeinsame Sprache

Das Produkt musste drei Zielgruppen bedienen, ohne wie drei Produkte zu wirken:

Interessenten, die Pakete, Konkur-Tools und Kampagnen im Web entdecken.
Schüler, die im Panel Kurse besuchen, prüfen und zahlen.
Ingenieure, die beide Flächen ohne Einmal-Button-Sprache umsetzen.
Persisch RTL als Standardleserichtung.
Lebenslauf-sicheres Ergebnis: schneller ausliefern aus einem gemeinsamen Kit, kein unverifizierter Marktanteil.

03Meine Rolle

Was das Design besaß

Teilzeit-Produktmanagement und Design an Maz’ digitalen Flächen.

Verantwortet

Informationsarchitektur von Website und Panel.
UI für Kurse, Prüfungen, Live, Wallet, Auth und Pakethandel.
Responsive Frames in drei Breiten.
Design-System-Boards für beide Flächen.
Playground- und Warehouse-Iterationen lesbar neben main halten.

Mitverantwortet

Mitgearbeitet

Engineering-Lieferung von biomaze.ir und Panel.

Teilzeit, 2022–2025. Alle Panel- und Website-Seiten gingen live; die heutige Startseite von biomaze.ir gehört nicht zu dieser Arbeit.

04Vorgehen

Die Datei ist das Prozessprotokoll

BioMaze | Design hat zweiunddreißig Seiten. Panel-Seiten sind nach Domäne benannt.

Website-Arbeit behält Playground und Warehouse neben main. Das Design-System liegt in derselben Datei.

Benannte Abschnitte in P.Classes machen das Panel durchsuchbar.

Wie die Arbeit lief

01
Jobs kartierenWeb für Interessenten von Panel-Domänen trennen.
02
Panel-Shell gestaltenHeader, Seitenmenü, Footer, Main Box.

05Entscheidungen

Entscheidungen, die die Datei noch zeigt

Vier Wahlentscheidungen ohne separates Prozessdeck.

01
Eine Datei für Web, Panel und System
Eine gemeinsame Wahrheitsquelle für Design und Engineering.
Alternativen
Separate Library oder Sketch-Übergabe.
Abwägung
Große Datei, die eine Seitenkarte braucht.
02
Panel-Seiten nach Schülerjob benennen
Kurse, Prüfungen, Live und Wallet entsprechen dem Denken der Schüler.
Alternativen
Eine Mega-Panel-Seite ohne Labels.
Abwägung
Einige Frames heißen noch Tilte.
03
Playground und Warehouse behalten
Entscheidungshistorie bleibt sichtbar.
Alternativen
Explorationen nach dem Home-Ship löschen.

06Lösung

Das Lernpanel

Fünfzehn Panel-Seiten decken den Schülerjob ab: Kurse, Prüfungen, Live, Wallet, Auth und mehr.

P.Classes — Kurse, Detail, Q&A und Hausaufgaben.
P.Exam & Test — Prüfungen, Detail und Start.
P.Login & Signup — OTP und Passwort.
P.Live, P.Wallet, P.Basket — Anwesenheit und Geld.

Biomaze-Panel — Kursliste in Tablet-Breite

Abbildung 04Biomaze-Panel — Prüfungsfluss auf dem Desktop

Abbildung 05Biomaze-Panel — Prüfungsfluss auf dem Handy

07Lösung

Die öffentliche Website

Acht Website-Seiten decken Home, Konkur, Shop und Kampagnen ab. Konkur-, Shop-, Termin- und Kampagnenseiten gingen live; die heutige Startseite gehört nicht zu dieser Arbeit, der Hero unten ist daher eine Exploration.

Website | Main — Home, Konkoor, Nahai und Shop.
Playground und Warehouse — Explorationen mit Live-Captures.
Konkur-, Produkt-, Kampagnen- und Stundenplan-Seiten.

08Lösung

Design-System als Kapitel, nicht als eigene Case Study

Die Design-System-Seite hält Farbe, Typo, Buttons, Formulare und Chrome — Version 0.0.1. Die Tokens wurden zu Figma-Variablen, nicht nur statische Boards.

BIO-02 bleibt Archivzeile; diese Case Study ist der veröffentlichte Schirm.

09Ergebnisse

Was die Datei belegt

Umfangsfakten aus dem Figma-Scan vom 2026-09-24 — keine Marketing-Metriken.

32 Seiten: 32; Cover, Panel, Web und System in einer Datei.; Gemessenes Ergebnis · Figma REST · 2026-09-24
15 Panel-Seiten: 15; Benannte Schülerjobs von Kursen bis Wallet.; Gemessenes Ergebnis · BioMaze | Design Seitenindex
8 Website-Seiten: 8; Main, Playground, Warehouse und Konkur-/Commerce-Boards.; Gemessenes Ergebnis · BioMaze | Design Seitenindex
1 gemeinsames Kit: Design-System mit Tokens als Figma-Variablen, plus Icon- und Tooltip-Seiten.; Gelieferter Output

Was geliefert wurde

Website-Seiten für Konkur, Shop und Kampagnen
Lernpanel für Kurse, Prüfungen, Live und Wallet
Auth-Flows
Responsive Panel-Frames in drei Breiten
Figma-Variablen plus Farb-, Button- und Formular-Boards

10Gelernt

Was diese Arbeit verstärkt

01
Seiten nach Jobs benennen
P.Classes und P.Exam sind in einer 32-Seiten-Datei auffindbar.
02
Verworfene Iterationen behalten
Playground und Warehouse machen Website-Entscheidungen lesbar.
03
Keine Tier-1-Claims veröffentlichen
Unverifizierte Marktführerschafts-Zeilen bleiben ohne unabhängige Quelle von der Site. Die Designdatei belegt den Umfang bereits.

Website & Schulungspanel

Website & Schulungspanel

Maz brauchte eine vertrauenswürdige Site und ein bewohnbares Panel

Drei Jobs, eine Marke, noch ohne gemeinsame Sprache

Was das Design besaß

Verantwortet

Mitverantwortet

Mitgearbeitet

Die Datei ist das Prozessprotokoll

Wie die Arbeit lief

Entscheidungen, die die Datei noch zeigt

Eine Datei für Web, Panel und System

Panel-Seiten nach Schülerjob benennen

Playground und Warehouse behalten

Das Lernpanel

Die öffentliche Website

Design-System als Kapitel, nicht als eigene Case Study

Was die Datei belegt

Was geliefert wurde

Was diese Arbeit verstärkt

Seiten nach Jobs benennen

Verworfene Iterationen behalten

Keine Tier-1-Claims veröffentlichen

Responsive Dreier, nicht nur Mobile