Caso de estudio · B2B Enterprise · Herramienta Comercial Interna

Bridgestone:
del catálogo en papel
a la venta digital

Cliente
Bridgestone
Rol
Senior Product Designer
Duración
8 semanas
Equipo
4 devs + 1 PO
Tipo
App móvil interna B2B
Bridgestone Login
Bridgestone Home
Product Detail
Cart
Checkout
78%
Búsqueda más rápida
El equipo comercial encontraba el neumático correcto en segundos, no minutos
65%
Reducción ciclo de ventas
Menos tiempo desde contacto con distribuidor hasta cierre de pedido
4.6/5
Satisfacción equipo ventas
Valoración del equipo comercial interno en las sesiones de feedback post-lanzamiento
90%
Adopción digital
Del equipo comercial usando la app activamente frente a catálogos físicos en 30 días
El reto

Los vendedores de Bridgestone presentaban neumáticos con catálogos en papel de 300 páginas.

El equipo comercial de Bridgestone visitaba distribuidores cargando catálogos físicos voluminosos, desactualizados y difíciles de navegar. Una reunión de ventas podía paralizarse porque el representante no encontraba la ficha técnica correcta. La pérdida de oportunidades comerciales era directa y cuantificable.

📚
Catálogos físicos obsoletos Los catálogos en papel se actualizaban cada temporada. Las nuevas referencias, precios y promociones no estaban disponibles hasta el próximo ciclo de impresión.
⏱️
Búsqueda manual lentísima Encontrar un neumático específico por medida, índice de carga y aplicación requería consultar múltiples secciones del catálogo. En reunión con cliente: fatal.
🔄
Sin herramientas de presentación para clientes No había manera de mostrar comparaciones entre modelos, tecnologías o promociones activas de forma atractiva frente a un distribuidor.
📊
Pedidos gestionados por email o teléfono El proceso de cotización y pedido era completamente manual, sin visibilidad de stock ni confirmación inmediata.
Contexto del proyecto
Tipo de herramientaHerramienta comercial interna B2B
Usuarios primariosEquipo comercial + Distribuidores
PlataformaiOS · Android (mobile-first)
StakeholdersDirección comercial + Distribuidores piloto
MetodologíaDesign Sprint + Lean UX
HerramientasFigma, Maze, FigJam, Protopie
Equipo técnico4 ingenieros iOS/Android + 1 PO
Plazo8 semanas end-to-end
Mi proceso

8 semanas para transformar
cómo vende Bridgestone.

El proyecto tenía fecha fija: el siguiente ciclo de presentaciones comerciales en 8 semanas. Sin posibilidad de ampliación. Eso obligó a una priorización brutal y a un proceso de diseño completamente adaptado a ese constraint.

01
Semana 1–2 · Research de campo
Acompañar a los vendedores en sus reuniones reales
La investigación más valiosa fue la más incómoda: acompañé a 3 representantes comerciales en visitas reales a distribuidores. Observé de primera mano cómo usaban (y sufrían) los catálogos físicos: marcadores de páginas, hojas sueltas, búsquedas que duraban 4-5 minutos con el cliente esperando. El insight clave: el vendedor no necesitaba toda la información técnica en pantalla — necesitaba llegar a la ficha correcta en menos de 30 segundos. Eso definió la arquitectura de búsqueda de toda la app.
Field Research Contextual Inquiry Shadowing Ventas Jobs-to-be-Done
02
Semana 2–3 · Arquitectura y wireframes
La búsqueda por entorno: el insight más importante del proyecto
Bridgestone tiene 200+ referencias de neumático. El catálogo los organizaba por tecnología y aplicación técnica. Pero los vendedores pensaban diferente: "¿el cliente tiene camiones de autopista o va al campo?" Diseñé la arquitectura de búsqueda por entorno (Autopista, Rural, Mixto, Fuera de Carretera, Autobús Urbano, Autocar) — la categorización mental del vendedor, no del ingeniero de producto. Este reencuadre fue la decisión de diseño más impactante del proyecto: los test de usabilidad mostraron que el tiempo hasta encontrar el producto correcto bajó de 4.2 min a 38 segundos.
IA Design Card Sorting Mental Models Wireframes lo-fi
03
Semana 3–6 · Diseño UI
Dark mode como identidad de marca, no como moda
El color corporativo de Bridgestone es el rojo y el negro — una identidad visual potente y reconocible. La decisión de hacer la app en dark mode no fue estética: los vendedores la usaban en entornos de concesionario y almacén con mucha luz ambiental, donde un fondo oscuro con elementos en rojo brillante tiene mejor contraste y legibilidad. Construí el Design System con tipografía Inter (legibilidad máxima en pantallas pequeñas), tokens de color Bridgestone, iconografía de vehículos específica y componentes de ficha técnica adaptados para mostrar tecnologías (CTDM, EKD, TIP, VDS, VPS) de forma rápida y escaneable.
Design System Dark Mode UI Brand Guidelines Interaction Design
04
Semana 6–8 · Validación y handoff
Testing con el equipo comercial real antes del lanzamiento
Hice 2 rondas de test con 6 representantes comerciales. La primera ronda identificó un problema crítico: el flujo de añadir al carrito desde el listado no era suficientemente rápido para el uso en reunión (el vendedor necesitaba confirmación visual inmediata sin salir de la lista). Resolví con una microinteracción de añadir al carrito en la propia card, con contador animado en el tab. Segunda ronda: 0 issues críticos, 4.6/5 en satisfacción. El handoff se entregó con Design System completo, variantes de estado y specs de animación para los ingenieros iOS y Android.
Usability Testing Maze Microinteracciones Dev Handoff completo
Proceso de diseño · Evolución

Del wireframe al producto:
el mismo flujo, otra experiencia.

Uno de los aspectos más honestos de cualquier case study es mostrar cómo evoluciona el diseño. Aquí los wireframes lo-fi junto a la versión final — la misma lógica, optimizada en cada detalle de UI.

Wireframe · Lo-fi
Login wireframe
Final · Dark UI
Login final
Login con identidad de marca fuerte — foto de portada con coche de alto rendimiento establece el tono premium de la app desde el primer segundo
Tab Iniciar Sesión / Registrarse unificado — misma pantalla para ambos flujos. Sin confusión, sin pasos extra
Wireframe · Lo-fi
Cart wireframe
Final · Dark UI
Cart final
Carrito con imágenes reales de producto — las fotos de los neumáticos específicos dan confianza al vendedor de que está cotizando lo correcto
Desglose de IVA visible — para el contexto B2B con distribuidores, mostrar subtotal + impuestos + total evita confusión en el cierre
CTA rojo de alta visibilidad — "Proceder al Pago" anclado al bottom con color de acción máxima. En dark mode, el rojo brillante no tiene competencia visual
Flujo 1 · Descubrimiento de producto

Del entorno al neumático
en menos de 30 segundos.

La navegación por entorno fue la decisión arquitectónica más impactante del proyecto. Reemplazar la taxonomía técnica por la mental del vendedor redujo el tiempo de búsqueda un 78%.

🎯
La decisión que más impactó los números
Buscar por entorno de uso, no por especificación técnica
Un vendedor en reunión con un distribuidor de flotas no piensa "necesito un neumático 315/70 R22.5 con índice 154/150 L". Piensa "este cliente tiene camiones articulados que van en autopista". Rediseñé el modelo de búsqueda desde la categorización del ingeniero de producto hacia la categorización mental del equipo comercial. El impacto fue inmediato y medible: 4.2 minutos de búsqueda promedio → 38 segundos.
Home entornos
Search results dark
Results grid
Product detail
Home por entorno con fotos reales — autopista, rural, mixto, fuera de carretera, autobús urbano, autocar. Navegación visual intuitiva
Filtros avanzados en sidebar — entorno activo como chip eliminable + filtros por tipo de vehículo, medida y aplicación
Grid de resultados con contexto — foto del neumático real, SKU, tipo de vehículo compatible y badges PROMO/NUEVO de un vistazo
Ficha de producto con métricas clave — tecnologías (CTDM, EKD, TIP...) como iconos escaneables + barras de sonido y combustible para comparación rápida
Flujo 2 · Cotización y pedido

Del catálogo al pedido
sin salir de la app.

El flujo de cotización y pedido fue el más estratégicamente importante: cerrar el ciclo de ventas dentro de la misma herramienta eliminó la fricción del email/teléfono y dio visibilidad de pedidos a la dirección comercial.

Carrito de compras
Finalizar compra
Checkout wireframe
Carrito de pedido completo — cantidades editables, código de promoción y desglose fiscal completo antes de proceder
Checkout con perfil de distribuidor — la app reconoce al distribuidor logueado (ej. Distribuidora GYL S.A.), muestra su dirección de envío guardada y método de pago
Confirmación con total IVA incluido — el precio que aparece en el botón es el precio final, sin sorpresas de última hora. Genera confianza en el cierre
Sistema de diseño
Dark mode, rojo Bridgestone y tipografía Inter:
un sistema construido para velocidad de lectura.

El Design System de la Bridgestone Sales App fue diseñado con tres constraints no negociables: legibilidad máxima en entornos con mucha luz ambiental (concesionarios, almacenes), coherencia total con la identidad de marca Bridgestone (rojo #E8231A, negro profundo) y velocidad de implementación para el equipo de desarrollo en 8 semanas.

Tipografía Inter Dark Mode nativo Rojo Bridgestone #E8231A Iconografía vehicular custom Tokens de color Componentes de ficha técnica States: default · hover · active · disabled Badges PROMO · NUEVO
Resultados

8 semanas de diseño.
El equipo comercial no volvió al papel.

🏆
78%
Búsqueda más rápida
El tiempo promedio para encontrar el neumático correcto bajó de 4.2 minutos (catálogo físico) a 38 segundos (app). En una reunión con cliente, esa diferencia es la diferencia entre cerrar o perder la atención del distribuidor.
90%
Adopción en 30 días
El 90% del equipo comercial usaba la app activamente en sus visitas en las primeras 4 semanas post-lanzamiento. Sin formación obligatoria, sin resistencia al cambio. La app era mejor que el papel — y se notaba.
⚡
65%
Ciclo de ventas más corto
La capacidad de cotizar y pedir desde la app durante la propia reunión eliminó el ciclo de email post-visita. Los pedidos se procesaban en el momento, reduciendo el tiempo desde contacto hasta pedido un 65%.
⭐
4.6/5
Satisfacción del equipo comercial
Las sesiones de feedback con los representantes comerciales post-lanzamiento dieron una valoración media de 4.6/5. Los comentarios más frecuentes: "más profesional frente al cliente" y "ya no pierdo tiempo buscando cosas".
Aprendizajes

Lo que aprendí diseñando
para vendedores, no usuarios.

Un equipo comercial B2B es un tipo de usuario muy específico: experto en su dominio, bajo presión de tiempo, con usuarios finales (los distribuidores) mirando. Ese contexto cambia radicalmente las prioridades de diseño.

01
El modelo mental del usuario siempre gana al modelo técnico del producto
Los ingenieros de Bridgestone organizaban el catálogo por especificaciones técnicas. Los vendedores pensaban por entorno de uso del cliente. Diseñar para el modelo mental del usuario —no para la lógica interna del producto— fue la decisión que más impactó los resultados.
02
El contexto de uso cambia el diseño más que cualquier otro factor
El dark mode no fue una decisión estética — fue una decisión de usabilidad para entornos con luz ambiental fuerte. Los CTAs en rojo brillante no fueron branding — fueron necesidad de contraste en situaciones de uso rápido bajo presión. El contexto físico de uso debe informar cada decisión de diseño visual.
03
Las herramientas internas merecen el mismo nivel de diseño que las apps de consumo
Existe la tendencia de hacer las herramientas internas "funcionales pero feas". Bridgestone demostró lo contrario: una herramienta interna bien diseñada aumenta la satisfacción del empleado, reduce el tiempo de adopción y se convierte en un argumento comercial frente a los distribuidores al transmitir profesionalidad.
¿Tienes un reto comercial similar?

Diseñemos
tu herramienta

Disponible para proyectos B2B enterprise y herramientas comerciales. Madrid y remoto.

Contactar ahora ← Ver más proyectos