Yaravan — una plataforma de garantías que muestra sus preguntas abiertas

01Contexto

Una identidad dormida, un producto en funcionamiento

Yaravan es la marca de garantías y posventa de un minorista iraní de teléfonos móviles. Una agencia externa redactó su identidad de marca en 2024 — un documento de estrategia y una guía visual — y después no se construyó nada sobre ella.

Desde julio de 2026, el encargo fue convertir esa identidad en un producto en funcionamiento: un sitio web independiente en persa, un panel de clientes y un panel del personal. El sistema de soporte existente conserva la cola de tickets y la operación de reparación; el producto cubre lo que es de la propia marca. La operación que hay debajo, dibujada proceso a proceso, tiene su propio caso de estudio.

02Problema

Donde debería haber un dato

El sitio existente prometía más de lo que la operación cumplía. El trabajo de requisitos descubrió que sus afirmaciones principales no reflejaban la realidad operativa y que no existía una base de datos real de garantías — no hacía falta migrar datos, porque no había datos.

La estrategia de marca prometía todavía más — sucursales, servicio ininterrumpido, entrega a domicilio, seguro incluido — y la operación que tendría que cumplir esas promesas aún se estaba definiendo. Un sitio de cara al cliente podía convertir discretamente cualquiera de ellas en un compromiso.

Eso dejaba una sola pregunta de diseño real: ¿qué se pone en la página donde debería haber un dato, cuando nadie puede confirmarlo todavía?

03Mi rol

Liderar el trabajo, con el equipo del cliente

Dirigí el producto — los requisitos, la especificación de la interfaz y el desarrollo — con la contribución del equipo de ingeniería del cliente. La responsabilidad de negocio siguió en manos del cliente: su responsable de negocio asumía las decisiones comerciales y su responsable de posventa, la operación de soporte de la que depende el producto.

Responsable

Requisitos y alcance
Sistema de marca, derivado de los archivos de origen
Especificación de la interfaz
El patrón de afirmación sin confirmar
Diseño de los paneles de clientes y del personal
Vídeos de portada para la página de inicio, hechos con IA

Corresponsable

El desarrollo de la plataforma, con el equipo de ingeniería del cliente

Colaboración

Decisiones comerciales (el responsable de negocio)
La operación de soporte (el responsable de posventa)

El desarrollo contó con asistencia de IA, y el repositorio lo dice abiertamente: su guía fija el orden de las fuentes de verdad y las reglas de conflicto que lo hicieron seguro en un negocio donde la mayoría de los datos seguían abiertos.

04Enfoque

Especificado por escrito, gobernado pregunta a pregunta

Los requisitos salieron de cincuenta preguntas directas de opción múltiple al responsable de negocio, con una única prueba de éxito: ingeniería puede empezar sin volver a preguntar nada fundamental. Después, la interfaz se especificó por escrito en lugar de dibujarse — 49 archivos de componentes — porque las pantallas eran la parte conocida. El esfuerzo de diseño se dedicó a la operación subyacente y a las reglas sobre lo que pueden decir las pantallas.

Esas reglas forman un protocolo de conflictos, que decide qué fuente prevalece según el tipo de pregunta y no de una vez para siempre. Los documentos de negocio prevalecen en servicio, garantía, precio, SLA y comportamiento; los archivos de marca, en logotipo, color y tipografía. Una afirmación de cara al cliente necesita a la vez una fuente de marca y una base operativa confirmada, o no se publica.

La estrategia de marca de 2024 y la realidad de 2026 se contradicen constantemente. La solución nunca fue elegir un ganador global — fue gobernar la brecha, un tipo de pregunta cada vez.

05Marca

Derivada, nunca redibujada

El sistema de marca se reconstruyó por ingeniería inversa a partir de los dos archivos de origen de la agencia, y cada afirmación que contiene puede rastrearse hasta una de sus páginas; donde los archivos callan, la documentación lo dice en lugar de rellenar el hueco. El color se leyó de los operadores de relleno vectorial del logotipo, no se muestreó de una imagen renderizada — lo que resolvió una discrepancia entre dos azules como una conversión de espacio de color, no como un segundo color de marca. Un amarillo brillante que solo aparece como un contorno de un píxel de «estás aquí» se convirtió en un resaltado funcional, nunca en un color de marca.

La combinación tipográfica llegó con su riesgo de licencia puesto por escrito en lugar de descubrirse después: la tipografía de titulares es comercial y necesita que se confirmen los derechos de incrustación web. La biblioteca de logotipos — 15 SVG, 75 PNG, 75 WebP y 12 favicons — se generó a partir de los trazados vectoriales originales, y la composición del logotipo sigue la dirección de lectura: el símbolo a la derecha en persa y a la izquierda en inglés. Un logotipo nunca se refleja para simular la otra dirección.

06Solución

El marcador de afirmación sin confirmar

Donde una página necesita un dato que nadie ha aprobado, muestra un recuadro naranja discontinuo con el elemento que falta y su responsable — un bloque de contenido que los editores colocan como cualquier otro. Una revisión a mediados de agosto contó 32 elementos abiertos en vivo en siete de las ocho páginas públicas, y encontró que cinco temas recurrentes explican la mayoría. Cerrar cinco cosas cierra casi todo el sitio.

El marcador es la respuesta del producto a la pregunta de diseño. Convierte un problema de contenido — páginas que necesitan datos que nadie aprueba todavía — en una lista que puede contarse, asignarse y cerrarse, y mantiene honesto el sitio mientras está incompleto: nada de lo que lee un cliente es una promesa que el negocio no haya hecho.

Yaravan — la página de contacto en persa: seis recuadros naranjas discontinuos, cada uno con un dato que sigue pendiente de aprobación — Figura 02La página de contacto: los datos que aún necesita, listados donde irán.

07Panel de clientes

Siete principios en cada página

El panel de clientes sustituye las llamadas telefónicas por un lugar donde consultar. Ocho destinos cubren lo que un cliente hace realmente — iniciar sesión, ver en qué punto está, registrar un dispositivo, comprobar una garantía, abrir una solicitud, seguirla, encontrar reparaciones y facturas anteriores, guardar una dirección — y en el teléfono los cuatro más usados están en la barra inferior, a un toque. Siete principios se cumplen en las once páginas:

Sin contraseña: un número de móvil y un código por SMS, así que no hay nada que olvidar.
Privado por defecto: los clientes solo ven sus propios datos, algo que se impone en el servidor y no se limita a ocultarse en la interfaz.
Primero el móvil: los cuatro destinos más usados, en la barra inferior.
Totalmente en persa: texto, calendario y dígitos — con los números de serie y el IMEI de izquierda a derecha para que se lean correctamente.
Estados vacíos que enseñan: cada página vacía dice por qué está vacía y qué hacer a continuación.
Explícito, no ambiguo: «aún no sincronizado» se mantiene separado de «no tienes ninguna garantía» — dos estados completamente distintos que la mayoría de los sistemas muestran como «no se encontró nada».
Accesible: el panel tiene su propio conjunto de pruebas de accesibilidad.

Las decisiones pequeñas reciben el mismo cuidado. Marcar «este dispositivo tiene un problema» al añadir un dispositivo abre a la vez una solicitud de reparación — dos tareas en un solo formulario. Se indica al cliente que escriba el código de seguimiento dentro del paquete, para que el dispositivo se una a su caso en cuanto llega. Y un caso que pertenece a otra persona devuelve «no encontrado», nunca un mensaje que revele que existe.

Yaravan — añadir un dispositivo en móvil, en persa: un nombre, y como opcionales la marca, el modelo y el número de serie o IMEI, y una casilla para un dispositivo que ya tiene un problema

Yaravan — el primer paso de una nueva solicitud en móvil, en persa: elegir reparación o garantía, reclamación o consulta general

Yaravan — un historial de reparaciones vacío en móvil, en persa, que explica lo que aparecerá allí y ofrece un botón para ver las solicitudes — Figura 04Un estado vacío que enseña: el historial de reparaciones antes de que haya historial. Datos de demostración.

08Estado

El estado nunca retrocede

Una solicitud de reparación o de garantía avanza por cuatro etapas que el cliente puede ver — registrada, en revisión o en reparación, lista para entrega, entregada — mientras que una reclamación o una consulta se cierra tras su revisión. Cada cambio queda en la cronología con su fecha y hora. Saltarse una etapa, retroceder o cambiar un estado finalizado se rechaza en el servidor, no solo se oculta en la interfaz, y enviar dos veces el mismo formulario no crea una segunda solicitud.

Detrás de esas cuatro etapas, en la sede central ocurren seis: admisión y clasificación, recepción del dispositivo, diagnóstico, comprobación de la cobertura de la garantía, reparación y control de calidad, y entrega. El cliente ve cuatro, y la diferencia es deliberada — el panel lo dice con palabras sencillas: le indica al cliente que solo se muestran las etapas generales y que el detalle interno queda fuera de la vista.

El estado que ve el cliente nunca miente: una respuesta desconocida de un sistema externo queda pendiente hasta que se concilia, y nunca se muestra como éxito.

Yaravan — una solicitud en el panel de clientes en escritorio, en persa: una barra de progreso de cuatro etapas, una frase que explica la etapa actual y un historial de estados con fechas — Figura 05Una solicitud en escritorio: la barra de cuatro etapas, una frase que explica la etapa actual y el historial de estados con fechas. Datos de demostración.

09Decisiones clave

Seis límites

La mayor parte del diseño trata de lo que el producto se niega a hacer o a decir.

01
Mostrar el hueco y su responsable, no una suposición
Un sitio que enuncia una promesa no aprobada la convierte en un compromiso. Mostrar el elemento abierto — con la persona que debe la respuesta — mantiene honesto el sitio mientras está incompleto, y convierte un problema de contenido en una lista que se puede seguir y cerrar.
Alternativas
Textos provisionales verosímiles, u ocultar la sección
Compromiso
El sitio parece visiblemente inacabado hasta que el negocio responde.
02
Un panel del personal que no es un panel de operaciones
Los agentes ya trabajan en el sistema de soporte existente, y un segundo sistema dividiría la verdad. El panel del personal cubre solo los procesos que son del producto — facturas, códigos de activación, recepción de piezas, revisión de concesionarios — y su mapa del sitio establece que nunca debe crecer hacia colas de tickets, diagnóstico o reparación.
Alternativas
Reconstruir la gestión de tickets dentro del nuevo producto
Compromiso
El personal trabaja en dos sistemas hasta que ambos se conecten.
Evidencia

Yaravan — las solicitudes de concesionario en el panel del personal, en persa: cada solicitud con su estado y botones para aprobar o rechazar, con el solicitante marcado como aún no definido

Yaravan — las piezas en el panel del personal, en persa: un buscador, filtros de solicitadas y recibidas, y tres piezas con su estado

10Lo que viene

El mercado le construyó al cliente un sitio web, no un camino de vuelta

Un estudio de 100 empresas del mercado iraní de garantías y reparación de productos digitales, 18 de ellas evaluadas en profundidad frente a un recorrido de reparación de doce etapas, encontró un precipicio: las cinco primeras etapas son en gran parte digitales, y a partir de la entrega del dispositivo casi nada lo es. La mejor plataforma digitaliza seis etapas de doce; la media es 4,1.

El replanteamiento del estudio es un argumento de modelo de datos, y por eso llega hasta el producto: la unidad de información en este mercado no es el ticket ni la factura, sino el caso de servicio — toda la vida de un dispositivo, desde su estado en la recepción, pasando por el diagnóstico, la aprobación del coste, la reparación y el control de calidad, hasta la devolución. La primera decisión que propuso es una prefactura desglosada que el cliente aprueba en línea, algo que ninguna empresa del estudio ofrecía. El producto se detiene a propósito en la puerta del taller; los argumentos para ir más allá ya están por escrito.

Yaravan, estudio de mercado — un gráfico de las doce etapas del recorrido de reparación: las cinco primeras, mayoritariamente digitales; de la sexta a la duodécima, entre el cero y el once por ciento — Figura 07El precipicio: las etapas uno a cinco del recorrido de reparación son digitales en un 33–100% en las plataformas estudiadas; las etapas seis a doce, en un 0–11%.

11Todas las páginas

El sitio público, página a página

Todas las páginas del sitio público, capturadas el 26 de septiembre de 2026 a 1440 píxeles de ancho y en un teléfono de 390 píxeles: la página de inicio, servicios, por qué nosotros, las condiciones de garantía, la carta de clientes, quiénes somos, la solicitud de concesión, las preguntas frecuentes, contacto, la encuesta de satisfacción, el formulario de opiniones y reclamaciones, y el acceso.

Las páginas comparten un sistema: páginas blancas interrumpidas por franjas azul oscuro, la misma franja de solicitud de cuatro pasos —solicitud, revisión, reparación, entrega— en la página de inicio y en «Por qué nosotros», y en el teléfono una sola columna con la navegación tras un botón de menú. Los nombres de la empresa y del minorista, la dirección, el teléfono, la fotografía de la tienda, la tarjeta de garantía de muestra y la duración de las garantías se enmascaran en gris antes de la captura; nada más se retoca.

Yaravan en escritorio — Inicio, la primera pantalla, con los datos identificativos enmascarados

Yaravan en escritorio — Servicios, la primera pantalla, con los datos identificativos enmascarados

12Vídeos de portada

El servicio en veinte segundos

La página de inicio necesitaba una portada que detuviera el scroll, así que hice para ella cuatro vídeos cortos con IA. El principal dura veinte segundos y sigue la franja de cuatro pasos que ya está en la página —solicitud, revisión, reparación, entrega—: un cliente entra, un técnico revisa el teléfono y lo repara, y el teléfono se entrega.

Los otros tres son sus escenas, de diez segundos cada una: revisión, reparación y entrega. El vídeo principal abre con un plano de llegada y luego toma los cinco primeros segundos de cada escena. Los cuatro están generados, no rodados, así que ilustran el servicio en lugar de registrarlo. Hacer que la portada de un sitio llame la atención con vídeo de IA es una habilidad que pongo al servicio de cualquier página de inicio.

Figura 09Hecho para la página de inicio: llegada, revisión, reparación y entrega en veinte segundos. Generado con IA.

Revisión

13Resultados

Una plataforma a la espera de decisiones

No hay métricas de negocio, y no debería haberlas: la plataforma está en un entorno de preproducción, y las medidas acordadas aún no tienen fórmula aprobada ni fuente de datos. El objetivo de seis semanas de la Fase 1 no se cumplió. Los tres elementos que bloquean la integración — el acceso al sistema de soporte existente, un contrato de sincronización de clientes y una aprobación escrita de seguridad y privacidad — son decisiones, no ingeniería, y todos los demás elementos abiertos se reclasificaron para que solo bloqueen su propia funcionalidad.

Un sitio público: Ocho páginas, todas en persa y de derecha a izquierda, con cada dato no aprobado mostrado como un elemento abierto con responsable.; Entregable
Un panel de clientes: Construido sobre siete principios: sin contraseña, privado por defecto, primero el móvil y estados vacíos que enseñan.; Entregable
Un panel del personal: Solo el trabajo que es del producto — facturas, códigos de activación, piezas y revisión de concesionarios — con la segregación de funciones aplicada en el código.; Entregable
Un desarrollo probado: 26 colecciones y 92 archivos de pruebas en cinco niveles, con CI en cada push.; Entregable

Qué se entregó

Sitio público
Panel de clientes
Panel del personal

14Lo que aprendí

La versión honesta de un producto

01
Publicar el hueco es mejor que disimularlo
El recuadro naranja discontinuo es todo el proyecto en un solo componente. Convirtió un problema de contenido en una lista con seguimiento, con responsables y contable, e hizo que el sitio fuera honesto mientras aún estaba incompleto.
02
Decir la diferencia en voz alta
«Aún no sincronizado» y «no tienes ninguna garantía» se parecen en una base de datos y significan cosas opuestas para un cliente. Lo mismo ocurre con cuatro etapas y seis. Nombrar la diferencia en la pantalla costó una frase y ahorró una llamada.
03
Una estrategia de marca no es una especificación de producto
La solución para una estrategia que contradice la realidad no es elegir un ganador una sola vez. Es una regla que dice qué fuente prevalece para cada tipo de pregunta — y que ninguna afirmación de cara al cliente se publica sin ambas.
04
Las salvaguardas deben seguir el ritmo del desarrollo
La guía del repositorio seguía describiendo una base de código sin código fuente de la aplicación mucho después de que tuviera 26 colecciones y un despliegue en preproducción. La documentación que gobierna un desarrollo asistido por IA tiene que mantenerse a la velocidad del desarrollo, o empieza a gobernar una base de código que ya no existe.

Idioma

Yaravan — una plataforma de garantías que muestra sus preguntas abiertas

Una identidad dormida, un producto en funcionamiento

Donde debería haber un dato

Liderar el trabajo, con el equipo del cliente

Responsable

Corresponsable

Colaboración

Especificado por escrito, gobernado pregunta a pregunta

Derivada, nunca redibujada

El marcador de afirmación sin confirmar

Siete principios en cada página

El estado nunca retrocede

Seis límites

Mostrar el hueco y su responsable, no una suposición

Un panel del personal que no es un panel de operaciones

El mercado le construyó al cliente un sitio web, no un camino de vuelta

El sitio público, página a página

El servicio en veinte segundos

Una plataforma a la espera de decisiones

Qué se entregó

La versión honesta de un producto

Publicar el hueco es mejor que disimularlo

Decir la diferencia en voz alta

Una estrategia de marca no es una especificación de producto

Las salvaguardas deben seguir el ritmo del desarrollo

Ninguna integración es requisito para el lanzamiento

Las integraciones fallan de forma cerrada

Segregación de funciones en el producto, no solo en el papel

Nombrar lo que no se construyó, y por qué