Web y panel de formación

01Contexto

Maz necesitaba un sitio de confianza y un panel habitable

Biomaze / grupo educativo Maz es una marca Konkur iraní de alcance nacional. La propiedad en vivo es biomaze.ir.

De 2022 a 2025, a tiempo parcial, el encargo fue diseñar el sitio y el panel, y dejar un design system para ingeniería.

Figura 02Marca de la portada de BioMaze | Design.

02Problema

Tres trabajos, una marca, aún sin lenguaje compartido

El producto debía servir a tres audiencias sin parecer tres productos:

Prospectos que descubren paquetes, herramientas Konkur y campañas en la web.
Alumnos que asisten a clase, examinan y pagan dentro del panel.
Ingenieros que implementan ambas superficies sin un lenguaje de botón desechable.
Persa RTL como dirección por defecto.
Resultado seguro para el currículum: enviar más rápido desde un kit compartido, no una cuota de mercado no verificada.

03Mi rol

Qué poseía el diseño

Product management y diseño a tiempo parcial en las superficies digitales de Maz.

Responsable

Arquitectura de información del sitio y del panel.
UI de clases, exámenes, vivo, monedero, auth y comercio de paquetes.
Marcos responsive en tres anchos.
Tableros del design system consumidos por ambas superficies.
Mantener legibles playground y warehouse junto a main.

Corresponsable

Colaboración

Entrega de ingeniería de biomaze.ir y el panel.

A tiempo parcial, 2022–2025. Todas las páginas del panel y de la web salieron en vivo; la página de inicio actual de biomaze.ir no es parte de este trabajo.

04Enfoque

El archivo es el registro del proceso

BioMaze | Design tiene treinta y dos páginas. Las del panel se nombran por dominio.

El trabajo web conserva playground y warehouse junto a main. El design system vive en el mismo archivo.

Las secciones nombradas dentro de P.Classes hacen el panel rastreable.

Cómo avanzó el trabajo

01
Mapear los trabajosSeparar web de prospecto y dominios del panel.
02
Diseñar el shellCabecera, menú lateral, pie y caja principal.

05Decisiones clave

Decisiones que el archivo aún muestra

Cuatro elecciones visibles sin un deck de proceso aparte.

01
Un archivo para web, panel y sistema
Una sola fuente de verdad para diseño e ingeniería.
Alternativas
Librería separada o entrega en Sketch.
Compromiso
Archivo grande que necesita un mapa de páginas.
02
Páginas del panel nombradas por trabajo del alumno
Clases, exámenes, vivo y monedero coinciden con cómo piensa el alumno.
Alternativas
Una mega página Panel sin etiquetas.
Compromiso
Algunos marcos siguen llamándose Tilte.
03
Conservar playground y warehouse
La historia de decisión permanece visible.
Alternativas
Borrar exploraciones al publicar el home.

06Solución

El panel de aprendizaje

Quince páginas cubren el trabajo del alumno: clases, exámenes, vivo, monedero, auth y más.

P.Classes — clases, detalle, Q&A y deberes.
P.Exam & Test — exámenes, detalle e inicio.
P.Login & Signup — OTP y contraseña.
P.Live, P.Wallet, P.Basket — asistencia y dinero.

Panel Biomaze — lista de clases en ancho tableta

Panel Biomaze — inicio de sesión en escritorio

Figura 04Panel Biomaze — flujo de examen en escritorio

Figura 05Panel Biomaze — flujo de examen en móvil

07Solución

El sitio público

Ocho páginas web cubren inicio, Konkur, tienda y campañas. Las páginas de Konkur, tienda, calendario y campañas salieron en vivo; el inicio actual no es parte de este trabajo, así que el héroe de abajo es una exploración.

Website | Main — Home, Konkoor, Nahai y Shop.
Playground y Warehouse — exploraciones con capturas en vivo.
Páginas Konkur, producto, campaña y horario.

Web Biomaze — exploración del héroe de inicio

08Solución

Design system como capítulo, no como caso aparte

La página Design System guarda color, tipografía, botones, formularios y chrome — versión 0.0.1. Sus tokens se convirtieron en variables de Figma, no solo tableros estáticos.

BIO-02 sigue siendo fila de archivo; este caso es el paraguas publicado.

Design system Biomaze — tablero de color

Design system Biomaze — matriz de botones

09Resultados

Lo que prueba el archivo

Hechos de alcance del escaneo Figma del 2026-09-24 — no métricas de marketing.

32 páginas: 32; Portada, panel, web y sistema en un archivo.; Resultado medido · Figma REST · 2026-09-24
15 páginas de panel: 15; Trabajos del alumno desde clases hasta monedero.; Resultado medido · Índice de páginas BioMaze | Design
8 páginas web: 8; Main, playground, warehouse y tableros Konkur/comercio.; Resultado medido · Índice de páginas BioMaze | Design
1 kit compartido: Design System con sus tokens como variables de Figma, más iconos y tooltips.; Entregable

Qué se entregó

Páginas web de Konkur, tienda y campañas
Panel de clases, exámenes, vivo y monedero
Flujos de autenticación
Marcos responsive a tres anchos
Variables de Figma y tableros de color, botón y formulario

10Lo que aprendí

Qué refuerza este trabajo

01
Nombra las páginas por trabajos
P.Classes y P.Exam son buscables en un archivo de 32 páginas.
02
Conserva las iteraciones descartadas
Playground y warehouse hacen legibles las decisiones del sitio.
03
No publiques afirmaciones Tier-1
Las líneas de liderazgo de mercado sin fuente independiente no salen al sitio. El archivo de diseño ya prueba el alcance.

Idioma