Que comprar un miligramo de oro se sienta tan seguro como comprar un lingote de diez gramos: el producto, las campañas y las diapositivas del informe semanal.
Empresa
Digikala
Rol
Diseñador, marketer y desarrollador BI
Tipo
Producto · Crecimiento · Datos
Sector
Fintech · comercio electrónico
Equipo
La unidad Non-Inventory de Digikala, con ingeniería, relaciones públicas y medios de performance, y el equipo legal
Estado
Lanzado
Herramientas
Figma
El problema
El oro es la protección por defecto contra la inflación en Irán, pero comprarlo es analógico: un comerciante, un coste de fabricación, una pureza que hay que creer y un lugar donde guardarlo.
El rol
Diseñador y marketer en un mismo producto, con una mano en su reporting: las pantallas de pedido y de activos, las campañas a su alrededor y las diapositivas de la revisión semanal que las respalda.
El resultado
Un sistema responsive de 42 pantallas, una extensión a la plata sobre los mismos raíles, campañas para consumidores y empresas, y las diapositivas de una revisión semanal que puso a producto, marketing y relaciones públicas ante las mismas cifras.
Figura 01
Figura 01Tres de las 42 pantallas: el pedido, Mis activos y el historial de compras y ventas; oro y plata en un mismo conjunto de pantallas.
01Contexto
Oro, vendido por miligramos, dentro del mayor marketplace de Irán.
Digital Gold es el oro y la plata fundidos digitales de Digikala, que se venden en digikala.com/gold con respaldo físico: Digikala custodia el metal equivalente a cada compra, y el saldo puede venderse de nuevo o retirarse en lingotes.
Forma parte de la unidad Non-Inventory de Digikala, la parte del marketplace que vende lo que no es stock físico: metales preciosos, tarjetas regalo, servicios y viajes. El rol abarcaba el producto, las campañas a su alrededor y las diapositivas de la revisión semanal detrás de ambos.
El problema de diseño era la custodia y la transparencia, no el trading.
02Problema
Tres preguntas que cada pantalla tiene que responder.
En Irán, el oro es la protección por defecto contra la inflación, pero comprarlo es analógico: un comerciante de lingotes, un coste de fabricación, una pureza que hay que dar por buena y un lugar seguro donde guardarlo.
La apuesta del producto era que una compra de un miligramo pudiera sentirse tan segura como un lingote de diez gramos. Eso pone tres preguntas en cada pantalla: ¿mi oro es real?, ¿qué estoy pagando exactamente? y ¿puedo recuperarlo?
03Restricciones
Dinero real y metal real, sobre el sistema de diseño de otro equipo.
Compra y venta desde un miligramo, entre 5.000 y 200.000.000 tomanes por pedido.
Pagos al monedero DigiPay, en cuatro ventanas de liquidación diarias.
Canje físico en lingotes de 5 gramos.
En persa, de derecha a izquierda, con cifras persas en todo el producto.
Escritorio a 1440 y móvil a 390, lanzados como un único sistema responsive.
Construido sobre el sistema de diseño de Digikala, que pertenecía a otro equipo.
04Mi rol
Tres sombreros: diseñador, marketer y reporting.
El título del rol nombra tres trabajos, y los tres archivos de Figma se dividen exactamente así: el producto, las campañas y la revisión semanal de negocio.
Responsable
↳Visión y roadmap del producto
↳Los flujos de pedido, activos y perfil
↳El color y el cambio de nombre a oro digital
↳Los conceptos de campaña
↳El modelo de segmentación
↳Las diapositivas de la revisión semanal
Corresponsable
↳La presentación de comisiones y precios, con negocio
↳La extensión a la plata
↳La oferta de tarjetas regalo para empresas, con la unidad Non-Inventory
↳Un dashboard de métricas de negocio, como ayudante
Colaboración
↳Ingeniería
↳Relaciones públicas y medios de performance
Figura 02Una película de concepto temprana, titulada Non-Inventory Gold. Aquí el producto todavía se llama oro electrónico y tiene un aspecto anterior al de las pantallas lanzadas: acentos rojos, una tarjeta dorada de activos y un gráfico de precios. Las tarjetas bancarias guardadas de un plano están difuminadas.
05Color
Dentro de Digikala, pero no el Digikala de siempre.
El oro digital vive dentro de Digikala, en su menú superior y en su página de inicio, pero no es una compra como las demás: nadie espera un paquete, la gente pone ahí sus ahorros. Por eso todo lo que genera confianza siguió siendo de Digikala —el acceso, la verificación de identidad, el monedero, el lenguaje, los componentes— y solo cambió el color.
Las mismas pantallas se probaron en rojo, azul, verde, morado y marrón, cada una con un segundo color, y se juzgaron por cómo se sienten para alguien a punto de invertir su dinero. El rojo, el color de Digikala y el de la película de arriba, transmite urgencia y riesgo: sirve para una oferta, no para ahorrar. El azul transmite confianza sin crecimiento y ya era el color de DigiPay; el verde transmite crecimiento, calma y la sensación de comprar algo de valor.
Después, una predicción de atención con IA mostró adónde va la mirada en las pantallas verdes, y cinco paletas se probaron en las mismas dos pantallas con el equipo de marca de marketing. La versión final combina un verde azulado oscuro con un dorado suave, y la misma decisión cambió el nombre del producto de oro electrónico a oro digital.
El color se eligió para quien ahorra, no para quien compra.
Rojo, el de Digikala
01El botón para verificar la identidad, el primer paso de la pantalla: 2,5 % de la atención prevista
02El selector de compra o venta y el campo del importe: 0 %
03El punto más caliente: el saldo del monedero y los límites de compra
Figura 04
01Verde azulado oscuro, #01494B: el color principal, para la tarjeta del saldo, el gráfico y el filtro elegido
02Dorado suave, #FFD08F: el segundo color, para la cabecera y el botón principal de la página de destino
03La página de destino va bajo la propia cabecera y el buscador de Digikala
Figura 05La pareja final en la pantalla de activos y en la página de destino. El mismo verde azulado y el mismo dorado vistieron después también la plata.
06Enfoque
Cada estado, dibujado dos veces.
El lienzo de Figma está organizado como una matriz, no como un volcado de pantallas: cada flujo abre con una tarjeta de título, se divide en sus estados y cada estado se dibuja una vez en escritorio y otra en móvil.
Pedido, Mis activos y Perfil suman 42 pantallas —20, 12 y 10—, es decir, 21 estados dibujados en los dos anchos, además de cuatro exploraciones sobre cómo mostrar los activos.
El fallo es uno de esos estados. Un pedido fallido tiene su propio texto, su propio código de seguimiento y su propio siguiente paso, con la misma disposición que el éxito: no una página de error.
El fallo tuvo su propio texto y su propia disposición, no una página de error.
Flujo → estado → breakpoint
01
FlujoPedido · Mis activos · Perfil
02
EstadoCompletado · fallido · pendiente de aprobación · en curso · en pago
Figura 06«Final Transaction Gold»: los estados de éxito y de fallo de un pedido, en escritorio y en móvil. El éxito detalla las cuatro ventanas de liquidación; el fallo conserva la misma disposición y añade un código de seguimiento.
07Decisiones clave
Cuatro decisiones en las pantallas de pedido y activos
Cada una responde a una de las tres preguntas antes de que el usuario tenga que hacerla.
01
Poner la comisión y los límites encima del botón.
La comisión de compra, el mínimo y el máximo y el saldo del monedero están en la tarjeta de pedido, encima de «Comprar oro», así que nada del coste aparece por primera vez después de confirmar.
Evidencia
La pantalla de pedido enumera el saldo, el máximo, el mínimo y la comisión de compra antes del botón.
02
Mostrar el reloj del precio, no una promesa.
El precio en vivo se actualiza con una cuenta atrás visible de 20 segundos. Un temporizador dice que el precio está vivo y cuándo cambiará; una frase solo podría afirmarlo.
Evidencia
Texto del flujo de pedido: «20 segundos para que se actualice el precio».
03
Dejar que la gente piense en dinero o en miligramos.
Importe pagado y cantidad de oro se calculan el uno a partir del otro, así que quien compra por primera vez puede empezar por un presupuesto y quien ahorra, por un peso.
08Investigación
Plata, para alguien que compra poco y aprende haciendo.
La plata llegó después, como extensión del producto de oro, y se diseñó en torno a una persona compuesta y no al comprador original de oro: 27 años, freelance y diseñadora de interiores, con poco conocimiento de inversión, una fidelidad a la marca media y un límite autoimpuesto del 20 % de sus ahorros en oro.
Sus preocupaciones eran las que el producto ya respondía para el oro: poco conocimiento de cómo funciona el mercado de la plata, dudas sobre la seguridad de invertir en una plataforma digital y sensibilidad a las oscilaciones del precio. Se guía por recomendaciones de amigos y anuncios en línea, y prueba primero con una compra pequeña.
Así que la plata llegó por los mismos raíles: el mismo flujo de pedido y la misma tarjeta de activos, tras una pestaña de metal.
La respuesta fue una pestaña, no un segundo producto.
«¡Compremos y a ver qué pasa!»
Figura 07La ficha de persona, en persa: su frase, objetivos, preocupaciones, motivaciones y comportamientos. Hecha para la extensión a la plata: una persona compuesta, no una clienta real.
09Crecimiento
Cuatro puertas de entrada: el producto, una story, una campaña y un departamento de RR. HH.
Una story de bienvenida en digikala.com/gold recorre las tres preguntas en cuatro diapositivas —qué es, comprar desde un miligramo, liquidez rápida y respaldo físico— y termina en «Empezar a comprar oro». Una película de lanzamiento llevó los mismos mensajes a las pantallas lanzadas.
Las campañas para consumidores se lanzaron en DigiPay: una misma creatividad vendía comisión cero y compra a plazos. Una oferta de bienestar corporativo llevó la gama Non-Inventory a los departamentos de RR. HH.: crédito para una cesta de marcas, préstamos a empleados y lotes para fechas señaladas, en un marketplace de 16 socios.
La segmentación se basaba en un modelo construido sobre activos, datos demográficos y comportamiento, y flujos basados en eventos enviaban el siguiente mensaje según lo que la gente hacía de verdad. En paralelo se propuso el crédito respaldado por oro, como concepto; no se lanzó.
Figura 09La película de lanzamiento: los mensajes de la story de bienvenida —cualquier cantidad desde un miligramo, liquidez rápida, respaldo físico— sobre las pantallas lanzadas, y al final digikala.com/gold y una cartela de lanzamiento.
01Con la marca DigiPay: la campaña corrió sobre el monedero de pagos de Digikala
02«Oro digital, con compra a plazos»
03«Comisión cero hasta el final del viernes 3 de mordad»
Figura 10Una creatividad de story, dos ofertas: comisión cero y compra a plazos.
Figura 12Una película de maqueta de la tarjeta regalo de oro digital, con «Tarjeta electrónica de oro de Digikala» impreso en su cara dorada. La tarjeta se quedó en concepto y no se lanzó.
10Resultados
Lo que mostró la revisión semanal
Son los resultados del T1 de la unidad Non-Inventory frente al plan, sacados de una diapositiva de la revisión semanal de negocio. Solo se publica el cumplimiento —las cifras absolutas son de Digikala— y describen la unidad, no el efecto de un diseño concreto. La parte de Sina son las diapositivas y algo de ayuda en un dashboard de métricas de negocio; producir las cifras no era trabajo de Sina.
42 pantallas de pedido, activos y perfil, en dos anchos
21 estados, cada uno en escritorio y en móvil, incluido el fallo.
Entregable · Figma — archivo Gold & Silver | Main
Margen de contribución frente al plan
121–145%
PC1 121 %, PC2 130 %, PC3 145 %: por encima del plan en los tres niveles de margen.
Resultado medido · Revisión semanal de negocio de Non-Inventory, resumen del T1
NMV frente al plan
97%
El valor neto de mercancía quedó justo por debajo del plan.
Resultado medido · Revisión semanal de negocio de Non-Inventory, resumen del T1
PBT frente al plan
91%
El beneficio antes de impuestos quedó por debajo del plan.
Resultado medido · Revisión semanal de negocio de Non-Inventory, resumen del T1
Qué se entregó
↳Pedido, activos y perfil, en escritorio y móvil
01NMV: valor neto de la mercancía vendida
02PC1–PC3: margen de contribución en tres niveles
03PBT: beneficio antes de impuestos
04Solo el cumplimiento: los valores reales y objetivo no se publican
Figura 13El resumen del T1 tal como se publica aquí: solo la columna de cumplimiento.
11Lo que aprendí
Lo que aprendí
01
Una cuenta atrás visible genera más confianza que una frase tranquilizadora.
El precio podría haber dicho que era justo. El temporizador mostró que estaba vivo y cuándo cambiaría, y dejó en manos del usuario el momento de confirmar.
02
Un modelo de segmentación vale lo que haga con él el disparador que viene después.
Los segmentos por activos, datos demográficos y comportamiento importaron cuando un flujo basado en eventos actuó sobre ellos. Un segmento al que nadie escribe es un informe.
03
El verdadero producto de la revisión semanal era un único conjunto de cifras compartido.
Una sola revisión semanal dio a producto, marketing y relaciones públicas el mismo NMV, CTR, CPC y conversión sobre los que discutir. Diseñar sus diapositivas mostró que los gráficos eran lo de menos.
El sistema de diseño y la ingeniería de plataforma de Digikala eran de otros equipos: estas pantallas se apoyan en el sistema de la casa y llevan la cabecera y el pie de producción.
Azul
Verde real
Marrón
Figura 03La misma pantalla de activos en cuatro de los colores probados. Cada opción combina un color principal con un segundo color.
Una predicción de atención con IA sobre la pantalla de compra de la versión verde, que entonces aún se llamaba oro electrónico: la pantalla, sus áreas de interés y el mapa de calor. Es la predicción de un modelo, no un seguimiento ocular.
03
BreakpointEscritorio 1440 · móvil 390
Evidencia
Dos campos vinculados en la pantalla de pedido: importe pagado en riales y cantidad de oro en miligramos.
04
Ocultar el saldo con un toque.
Los activos son ahorros, y la pantalla del móvil a menudo la ve otra persona. El icono del ojo enmascara todos los valores y la tarjeta conserva su forma.
Evidencia
La tarjeta de activos con el saldo oculto; las exploraciones de esta tarjeta probaron distintas máscaras.
Figura 08Las cuatro diapositivas de bienvenida: qué es, qué poco se puede comprar, qué rápido se puede vender y quién guarda el metal.
Figura 11El folleto de bienestar corporativo: la portada, cuatro propuestas de valor, los dieciséis socios y las líneas de servicio.
