Wobiz CMS

La plataforma para crear y administrar tiendas online: el panel donde cada tienda gestiona sus productos, ventas, envíos y pagos.

  • UX
  • UI
  • Sistema de diseño
  • Producto
Registro en Wobiz con prueba gratis de 14 días, junto al inicio del panel de administración.

Parte del equipo de Wobiz. Diseñado como diseñador UX/UI de su equipo de desarrollo, donde trabajé de 2013 a 2023.

Empresa
Wobiz, plataforma de tiendas online
Año
2013 – 2023
Rol
Diseñador UX/UI del equipo de desarrollo
Vínculo
Parte estable del equipo, de 2013 a 2023
Tareas
Flujos, UI, sistema de diseño e iconografía
Equipo
Equipo de desarrollo de Wobiz, junto a producto
Plataforma
Web app (panel de administración)

El desafío

Que armar una tienda online no requiera saber de tecnología.

Wobiz es una plataforma para crear tiendas online. Su panel de administración es donde pasa todo: productos, ventas, envíos, pagos, marketing, gastos y reportes, para personas que en general no son expertas en ecommerce.

Fue el proyecto más importante de Wobiz y el que más creció: cada nueva integración o canal de venta tenía que sumarse sin volver el panel más difícil de usar.

El proceso

Diez años diseñando desde adentro.

Formé parte estable del equipo de desarrollo de Wobiz de 2013 a 2023, en el rol de diseñador UX/UI. El panel se ordenó en diez secciones fijas y cada función nueva encontró su lugar dentro de ese mapa.

Para sostener el crecimiento armamos con el equipo un sistema de diseño propio (tipografía, paleta, íconos y componentes) y un recorrido de primeros pasos que guía a cada tienda nueva hasta su primera venta.

La solución

Un panel que acompaña a cada tienda desde la creación hasta la gestión diaria.

  1. Primeros pasos e inicio

    El inicio guía a cada tienda nueva con cinco pasos (agregar productos, elegir un diseño, medios de pago, medios de envío y dominio) y resume visitas, ventas del día y lo que está pasando. Los productos se filtran por estado: visibles, ocultos o fuera de venta.

    Inicio del panel con la lista de primeros pasos y las visitas, y el listado de productos con filtros por estado.
  2. Navegación y carga de productos

    Un menú lateral con diez secciones claras y accesos a la tienda, la cuenta y la ayuda. La carga de productos se ordena en bloques con su explicación al costado: información básica, multimedia, variantes, inventario y envíos.

    Menú lateral del panel: inicio, ventas, productos, canales de venta, marketing, gastos, editar mi tienda, consultas, reportes y configuración.
    Formulario para agregar un producto, organizado en información básica, multimedia, variantes, inventario y envíos.
  3. Canales de venta y pagos

    Cada canal nuevo se explica paso a paso dentro del panel, como vender con Instagram Shopping. El detalle de cada pago muestra el medio, la transacción y las cuotas de un vistazo.

    Pantalla para vender en Instagram con los pasos para activarlo, y el detalle de un pago recibido.
  4. Gastos, logística y reportes

    La tienda también se administra por dentro: gastos con proveedores y estados, integraciones de logística para programar envíos, y reportes de ventas, pagos y envíos.

    Listado de gastos con estados, configuración de una integración de logística y reportes de ventas con gráficos de estado de pago y de envío.

Sistema de diseño

Una base compartida para todo el panel: jerarquía tipográfica en Roboto, paleta con neutros y colores funcionales, íconos de trazo y componentes reutilizables.

Escala tipográfica en Roboto, paleta de colores con sus variaciones e íconos del panel.
Tipografía, paleta e iconografía
Componentes: botones, selectores, campos, buscador, estados de pago, paginación y carga de archivos.
Componentes
Siete ilustraciones de personas vendiendo, calculando, preparando envíos y conectando su tienda con redes sociales.
Ilustraciones para estados vacíos y primeros pasos

Qué hice

Resultados

Un panel que creció durante una década sin perder claridad, sostenido por un sistema de diseño propio.

años como diseñador UX/UI del equipo de Wobiz, de 2013 a 2023.
10
secciones fijas que ordenan todo el panel.
10
primeros pasos guiados para dejar lista una tienda nueva.
5
colores funcionales en la paleta del sistema de diseño.
8

¿Tenés un proyecto en mente?

Hablemos

WhatsApp