Arrastra para explorar. Desplázate o pellizca para acercar. Abre la Ayuda para ver los atajos de teclado.

Yan
ABIERTO A
PROYECTOS
Hablemos
Yan Fontão Boring view
All work

Case 005Plataforma de comercio y diseño de producto

MeuCommerce

Una plataforma de comercio para vendedores que cierran pedidos por WhatsApp. Selsa Select, su primera tienda y socia de diseño, conecta un catálogo navegable, productos guardados y un carrito con una conversación estructurada con quien vende.

Mi papel
Fundador, estrategia de producto, UX/UI y desarrollo
Estado del proyecto
Plataforma implementada
Pantallas capturadas del producto en funcionamiento, en secuencia: el panel con nombres y valores ocultos, el selector de temas y la misma tienda en ocho temas.

01

Mi contribución

El punto de partida fue una persona real que vendía y gestionaba sus productos, precios y ventas con un cuaderno y WhatsApp. El producto tenía que darle a esa operación un catálogo en el que se pudiera buscar y un recorrido de compra coherente, sin perder la conversación en la que se acuerdan los pedidos.

Desarrollé la estrategia de producto, el UX/UI y la implementación. MeuCommerce es la plataforma; Selsa Select es la tienda que se muestra en este caso. Su mercancía y las imágenes de los productos pertenecen a las marcas y proveedores correspondientes.

El panel del vendedor: indicadores, gráfico de ingresos, conversión de la tienda, notificaciones y accesos directos, con los valores ocultos.
El panel del vendedor, capturado del producto. Nombres y valores ocultos.

02

Conectar el trabajo del vendedor con la vitrina

La plataforma separa la administración del vendedor de la tienda que ve el cliente. La información de los productos y las condiciones comerciales alimentan un catálogo público que se puede compartir con un enlace.

El panel abre con el día del vendedor: clientes, pedidos, ingresos y crecimiento, la conversión de la tienda, avisos de stock bajo, los últimos pedidos y accesos directos para agregar un producto o compartir la tienda.

Selsa Select reúne varias categorías de mercancía en una sola vitrina. La búsqueda, las tarjetas de producto, los favoritos y los artículos vistos recientemente dan a los clientes formas de encontrar un artículo, compararlo y volver a él después. Cada camino mantiene el contexto de la tienda mientras la persona avanza hacia la compra.

Selector de temas dentro del panel, con ocho temas de vitrina para elegir.
El vendedor elige un tema desde el panel.

03

Cambiar el aspecto, conservar la tienda

Una tienda no está atada a una sola apariencia. En el panel, el vendedor elige entre ocho temas de vitrina, y cada uno cambia la composición, la tipografía, las tarjetas, los colores y el ritmo de todas las pantallas del cliente. Los productos, los pedidos y el logo siguen igual.

Una página de comparación muestra cada dirección completa, desde un catálogo minimalista y tranquilo hasta un marketplace denso, para que el vendedor decida viendo su propia tienda y pueda cambiar de nuevo más adelante.

La misma tienda en ocho temas de vitrina.
Una tienda, ocho temas. Los productos siguen igual.

04

Mantener las condiciones junto al producto

Una tarjeta de producto tiene que mostrar más que una imagen y un nombre. El precio actual, el precio anterior, los descuentos, Pix y las cuotas necesitan una jerarquía legible que también funcione cuando faltan algunas de esas condiciones.

El refinamiento de la versión móvil agrupa las condiciones disponibles junto a la imagen del producto y elimina el espacio vacío reservado para campos que faltan. La sección de vistos recientemente usa un bloque continuo con filas separadas y deja espacio para el control de favorito y la acción flotante de WhatsApp.

Grabado en una tienda publicada, con sus estados de carga reales. Termina en el carrito; no se hizo ningún pedido. Las fotos y las marcas de los productos pertenecen a sus dueños.

05

Convertir el carrito en una conversación útil

El carrito permite al cliente cambiar cantidades, quitar artículos y aplicar un cupón antes de revisar el resumen. El servidor recalcula la cotización para que las condiciones que se muestran y el mensaje de pedido generado compartan la misma fuente.

El checkout prepara un mensaje estructurado de WhatsApp con los artículos elegidos y el resumen del pedido. El vendedor puede seguir la conversación con el pedido ya organizado. El pago se acuerda fuera de la plataforma, y la interfaz deja explícito ese traspaso.

Carrito de compras móvil de Selsa Select en MeuCommerce.
Vitrina de Selsa Select implementada en MeuCommerce.
El mismo flujo en un navegador del tamaño de un celular, manejado con toques. Grabado en un viewport emulado, no en un dispositivo. Captura real del producto, tomada en un entorno local de QA. Los precios visibles pertenecen al catálogo de la tienda; no se muestra ninguna cuenta financiera personal. Captura real de la vitrina implementada, tomada en un entorno local de QA. Las imágenes de los productos pertenecen a las marcas correspondientes.

06

Cuidar los momentos alrededor del checkout

Los productos guardados, los pedidos y los controles de la cuenta extienden la experiencia más allá de un solo carrito. Los estados vacíos llevan de vuelta a la tienda; la carga, los errores de cupón y las sesiones expiradas necesitan su propia respuesta, en lugar de un éxito aparente.

La implementación incluye refinamientos responsivos y verificaciones grabadas de la vitrina y el carrito en la versión de escritorio y en la móvil. El caso muestra las pantallas resultantes del producto y sus decisiones de interacción; no afirma ningún aumento medido de ventas ni de conversión.

000

Instrucciones

Yan Fontão
Toque
Abre una pantalla
Clic
Abre una pantalla
Arrastrar
Recorre el mural
Rueda
El mouse acerca, el trackpad mueve, el pellizco acerca
− +
Aleja hasta ver todo el mural, o acerca
Flechas
En un caso: ↑↓ cambian de caso, ←→ cambian de medio. En el mural: mueven
Espacio
Abre o vuelve
Enter
Abre
Esc Backspace
Vuelve
Home
Vuelve al centro y luego a la apertura
PgUp PgDn
Canal anterior o siguiente
Tab
Recorre proyectos y enlaces
R
Proyecto al azar
0–9
Escribe un canal, 1–61
?
Esta página
Atajos

Música del mural

Archivos comprimidos y nivelados para la web.

ABIERTO A
PROYECTOS
Hablemos

Nuevo mensaje para Yan

Cuéntame quién eres y te respondo.

000

Sobre Yan

Hola, soy Yan

Product Designer/ Design Engineer

La mayoría de los productos pierde algo entre el diseño y el código. Los míos no: investigo el problema, diseño el producto y lanzo la interfaz yo mismo, así que lo que apruebas es exactamente lo que reciben tus usuarios.

  • 2018inicio en software
  • UI + codediseño e implementación

Trabajé con Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido o presencial

Retrato de Yan Fontão sentado, con suéter verde y gafas, sosteniendo un micrófono.
ABIERTO A
PROYECTOS
Hablemos
ABIERTO A
PROYECTOS
Hablemos
000

canal bloqueado

Bajo NDA

Ingresa el código

Pídele el código a Yan ↗
ABIERTO A
PROYECTOS
Hablemos
YAN FONTÃO Casos completos

Canal 05 Plataforma de comercio y diseño de producto

MeuCommerce

Una plataforma de comercio para vendedores que cierran pedidos por WhatsApp. Selsa Select, su primera tienda y socia de diseño, conecta un catálogo navegable, productos guardados y un carrito con una conversación estructurada con quien vende.

Mi papel
Fundador, estrategia de producto, UX/UI y desarrollo
Estado del proyecto
Plataforma implementada
Período
2026
Pantallas capturadas del producto en funcionamiento, en secuencia: el panel con nombres y valores ocultos, el selector de temas y la misma tienda en ocho temas.

De un catálogo compartido a un pedido por WhatsApp

Captura del producto en funcionamiento, con los nombres y valores del panel ocultos. Las fotos y las marcas de los productos pertenecen a sus dueños.

Mi contribución

El punto de partida fue una persona real que vendía y gestionaba sus productos, precios y ventas con un cuaderno y WhatsApp. El producto tenía que darle a esa operación un catálogo en el que se pudiera buscar y un recorrido de compra coherente, sin perder la conversación en la que se acuerdan los pedidos.

Desarrollé la estrategia de producto, el UX/UI y la implementación. MeuCommerce es la plataforma; Selsa Select es la tienda que se muestra en este caso. Su mercancía y las imágenes de los productos pertenecen a las marcas y proveedores correspondientes.

El panel del vendedor: indicadores, gráfico de ingresos, conversión de la tienda, notificaciones y accesos directos, con los valores ocultos.
El panel del vendedor, capturado del producto. Nombres y valores ocultos.

Conectar el trabajo del vendedor con la vitrina

La plataforma separa la administración del vendedor de la tienda que ve el cliente. La información de los productos y las condiciones comerciales alimentan un catálogo público que se puede compartir con un enlace.

El panel abre con el día del vendedor: clientes, pedidos, ingresos y crecimiento, la conversión de la tienda, avisos de stock bajo, los últimos pedidos y accesos directos para agregar un producto o compartir la tienda.

Selsa Select reúne varias categorías de mercancía en una sola vitrina. La búsqueda, las tarjetas de producto, los favoritos y los artículos vistos recientemente dan a los clientes formas de encontrar un artículo, compararlo y volver a él después. Cada camino mantiene el contexto de la tienda mientras la persona avanza hacia la compra.

Selector de temas dentro del panel, con ocho temas de vitrina para elegir.
El vendedor elige un tema desde el panel.
La misma tienda en ocho temas de vitrina.
Una tienda, ocho temas. Los productos siguen igual.

Cambiar el aspecto, conservar la tienda

Una tienda no está atada a una sola apariencia. En el panel, el vendedor elige entre ocho temas de vitrina, y cada uno cambia la composición, la tipografía, las tarjetas, los colores y el ritmo de todas las pantallas del cliente. Los productos, los pedidos y el logo siguen igual.

Una página de comparación muestra cada dirección completa, desde un catálogo minimalista y tranquilo hasta un marketplace denso, para que el vendedor decida viendo su propia tienda y pueda cambiar de nuevo más adelante.

El mismo flujo en un navegador del tamaño de un celular, manejado con toques. Grabado en un viewport emulado, no en un dispositivo.
Grabado en una tienda publicada, con sus estados de carga reales. Termina en el carrito; no se hizo ningún pedido. Las fotos y las marcas de los productos pertenecen a sus dueños.

Mantener las condiciones junto al producto

Una tarjeta de producto tiene que mostrar más que una imagen y un nombre. El precio actual, el precio anterior, los descuentos, Pix y las cuotas necesitan una jerarquía legible que también funcione cuando faltan algunas de esas condiciones.

El refinamiento de la versión móvil agrupa las condiciones disponibles junto a la imagen del producto y elimina el espacio vacío reservado para campos que faltan. La sección de vistos recientemente usa un bloque continuo con filas separadas y deja espacio para el control de favorito y la acción flotante de WhatsApp.

Carrito de compras móvil de Selsa Select en MeuCommerce.
Captura real del producto, tomada en un entorno local de QA. Los precios visibles pertenecen al catálogo de la tienda; no se muestra ninguna cuenta financiera personal.

Convertir el carrito en una conversación útil

El carrito permite al cliente cambiar cantidades, quitar artículos y aplicar un cupón antes de revisar el resumen. El servidor recalcula la cotización para que las condiciones que se muestran y el mensaje de pedido generado compartan la misma fuente.

El checkout prepara un mensaje estructurado de WhatsApp con los artículos elegidos y el resumen del pedido. El vendedor puede seguir la conversación con el pedido ya organizado. El pago se acuerda fuera de la plataforma, y la interfaz deja explícito ese traspaso.

Vitrina de Selsa Select implementada en MeuCommerce.
Captura real de la vitrina implementada, tomada en un entorno local de QA. Las imágenes de los productos pertenecen a las marcas correspondientes.

Cuidar los momentos alrededor del checkout

Los productos guardados, los pedidos y los controles de la cuenta extienden la experiencia más allá de un solo carrito. Los estados vacíos llevan de vuelta a la tienda; la carga, los errores de cupón y las sesiones expiradas necesitan su propia respuesta, en lugar de un éxito aparente.

La implementación incluye refinamientos responsivos y verificaciones grabadas de la vitrina y el carrito en la versión de escritorio y en la móvil. El caso muestra las pantallas resultantes del producto y sus decisiones de interacción; no afirma ningún aumento medido de ventas ni de conversión.