UX Designer3 meses2024

Mercado Gasolinero

Plataforma B2B multibranding para estaciones de servicio

https://mercadogasolinero.com
B2BE-commerceMultibrandingWeb App
00

Resumen

Diseñé una plataforma de abastecimiento para estaciones de servicio con ecosistema multimarca. Cada marca (YPF, Shell, Axion, Puma) tiene su versión visual pero comparten base funcional.

01

El desafío

Las estaciones de servicio pedían insumos por teléfono o email, sin catálogo digital ni tracking de pedidos. Cada marca tenía requerimientos visuales distintos pero los flujos de compra debían ser idénticos para no duplicar desarrollo.

02

Investigación

Se entrevistó a encargados de estaciones de distintas marcas para entender su proceso de compra actual. Se mapearon los catálogos existentes y se identificaron las diferencias de branding vs. la funcionalidad compartida.

Entrevistas con encargados de estacionesAnálisis de procesos de compra actualesBenchmark de e-commerce B2BTests de usabilidad con prototiposEncuestas SUS

12 encargados de estaciones + 5 distribuidores

Hallazgos clave

Crítico

Pedidos por teléfono con alta tasa de error

El 25% de los pedidos telefónicos tenían errores de cantidad o producto. No existía confirmación escrita del pedido.

Alto

Sin visibilidad de stock ni precios actualizados

Los encargados no sabían si un producto estaba disponible hasta que el distribuidor confirmaba, lo que tardaba hasta 48hs.

Alto

Rechazo a interfaces complejas

Los encargados tienen bajo nivel técnico y usan la plataforma en momentos libres entre despachos. Necesitan flujos de máximo 3 pasos.

System Usability Scale

0–100
Score final
76Grado B
03

Insights

Personas

R

Roberto, 52

Encargado de estación YPF

Tech: bajo
“Necesito pedir las cosas rápido, no tengo tiempo de andar buscando”

Objetivos

  • +Hacer pedidos en menos de 2 minutos
  • +Ver precios actualizados
  • +Repetir pedidos anteriores fácil

Frustraciones

  • -Las webs son complicadas
  • -No sabe si hay stock
  • -Pierde tiempo llamando por teléfono

Journey Map del usuario

← arrastra para ver mas →
positivaneutralnegativamuy negativa
😐

Necesidad

Detecta que falta producto

😟

Búsqueda

Busca en catálogo o llama al distribuidor

No sabe precios ni stock actualizados

😟

Pedido

Dicta pedido por teléfono

Errores frecuentes, sin confirmación escrita

😫

Espera

Espera confirmación del distribuidor

Hasta 48hs sin respuesta

😐

Recepción

Recibe el pedido

😟

Verificación

Chequea que todo esté correcto

25% tiene errores, proceso de devolución largo

Confirmación digital con detalle previo a envío

04

Diseño e iteraciones

Se diseñó un sistema de theming que permite cambiar marca (colores, logo, tipografía) sin alterar la estructura funcional. El flujo de compra se resolvió en 3 pasos: buscar/escanear → agregar → confirmar.

3

iteraciones

5

métodos de research

2

perfiles investigados

Decisiones clave de diseño

01

Catálogo con búsqueda rápida y escaneo de código de barras para agregar productos

02

Botón 'Repetir último pedido' prominente en la home como acción principal

03

Sistema de theming con CSS variables para multibranding sin duplicar componentes

04

Checkout simplificado: sin registro de cuenta, autenticación por código de estación

05

Resultados

Impacto medible

0%

Errores en pedidos

0%

Tiempo por pedido

0%

Confirmación de disponibilidad

Errores en pedidos

25%4%
-84%

Tiempo por pedido

15+ min2.5 min
-83%

Confirmación de disponibilidad

48 hsInmediato
-100%

Score SUS

—76
Bueno

Siguiente caso

AoElec

Sitio técnico para distribución de soluciones eléctricas