Caso de diseño de producto
ERP y CRM para empresas, B2B/B2C, diseño de producto
Actualización, oct. 2026: más tarde convertí este ERP en un sistema de diseño en código documentado en Storybook.
Sobre el sistema ERP
Introducción
El sistema ERP Tech Harbor está pensado para gestionar con comodidad grandes empresas que crean productos y colaboran con distribuidores. Resulta útil para directivos, managers, profesionales de marketing, abogados y especialistas en finanzas de la organización. El sistema cubre cinco departamentos (dirección, almacenes, finanzas, jurídico, marketing) más una interfaz independiente para distribuidores: seis módulos en total. Sigue siendo intuitivo tanto para usuarios con soltura tecnológica como para quienes están menos familiarizados con las nuevas tecnologías. Este caso muestra cómo los usuarios resuelven sus tareas diarias según su rol.
Mi rol
Diseñador de interfaces y de producto.
La metodología consistió en empatizar con el problema, definirlo, idear soluciones, diseñar, prototipar y probar.
Mis responsabilidades
Entrevistas, wireframes en papel y digitales, prototipos de baja y alta fidelidad, estudios de usabilidad, atención a la accesibilidad e iteración de los diseños.
Herramientas
Design engineering: Storybook · React · TypeScript · Figma Variables · Figma MCP · Claude Code · GitHub · Vercel
Investigación e hipótesis
Definición del problema
El ERP Tech Harbor busca simplificar la gestión de la empresa, pero sus usuarios, sobre todo profesionales en activo de 22 a 65 años, tienen dificultades con la navegación al principio, aunque consideran la interfaz intuitiva. Valoran la eficiencia y el desarrollo intelectual, y apenas tienen tiempo para procesos complejos o incómodos. ¿Cómo podemos mejorar el onboarding y la navegación para que la adopción del sistema sea fluida y ahorre tiempo?
Desglose del problema
Problemas de escalabilidad
El ERP inicial no tenía la flexibilidad necesaria para el crecimiento del negocio, lo que lo hacía ineficiente para empresas con grandes volúmenes de datos.
Procesos complejos con una curva de aprendizaje pronunciada
La interfaz era funcional, pero exigía tiempo de adaptación, lo que ralentizaba el trabajo y reducía la eficiencia.
Experiencia de usuario fragmentada
La información estaba repartida por distintas secciones, lo que dificultaba la navegación y la obtención de conclusiones útiles.
Interfaz anticuada con carencias de usabilidad
El diseño seguía las estructuras clásicas de los ERP, lo que provocaba problemas de usabilidad y dificultaba una interacción fluida e intuitiva.
Repaso de las decisiones tomadas
Tras la investigación y la identificación de los problemas clave, el diseño se fue desarrollando por fases para los distintos departamentos del ERP.
Menú de navegación para el usuario «Manager».
Menú de navegación para el usuario «Responsable financiero».
Los usuarios del sistema ERP
El ERP da servicio a propietarios, directivos, equipos de ventas, juristas, responsables de almacén y contables, y garantiza la automatización de procesos y una colaboración fluida. Los distribuidores internacionales también lo usan para acceder a datos en tiempo real.
David, copropietario de un negocio global, busca un sistema integrado para gestionar las operaciones con eficiencia. Valora poder hacer tareas rápido desde cualquier dispositivo, pero se topa con textos de interfaz demasiado grandes en el móvil y una edición limitada de los datos de distribuidores, lo que demuestra la necesidad de mejoras continuas.
CEO
«Uso el ERP para controlar las finanzas y las métricas clave del negocio. Me ayuda a automatizar tareas rutinarias y agiliza la toma de decisiones».
Abogado internacional
«El ERP simplifica mi trabajo con documentos legales y contratos, garantizando el cumplimiento normativo y una gestión documental eficiente».
Comercial
«Uso el ERP para gestionar la relación con los clientes, seguir las operaciones y analizar las ventas; me facilita mucho el trabajo».
Responsable de almacén
«El sistema me ayuda a controlar el inventario en tiempo real, reduciendo errores y evitando roturas de stock».
Contable
«El ERP automatiza la gestión financiera y hace más eficientes el control de gastos, la facturación y la planificación financiera».
Investigación con usuarios: puntos de dolor
Comodidad
La interfaz se basa en tablas y tarjetas, lo que ofrece una experiencia clara e intuitiva.
Confianza
«Este servicio tiene que ser seguro para nuestro negocio y nuestros distribuidores». (David)
Navegación
Los usuarios sugirieron añadir migas de pan en las pantallas para volver atrás con facilidad.
Accesibilidad
El sistema admite temas diurno y nocturno, cambio de tamaño del texto y lectores de pantalla.
Wireframes digitales
El ERP consta de cinco departamentos más una interfaz independiente para distribuidores (seis módulos en total). Creé wireframes de todas las pantallas y tracé los recorridos de usuario de cada módulo.
También trabajé muy de cerca con desarrolladores y responsables de equipo para entender el funcionamiento del sistema. Nos reunimos en SESIONES DE BRAINSTORMING y analizamos el diseño y la lógica de todos los departamentos.
Iteración final
Mockups
Tras un segundo estudio de usabilidad, vi que los campos de búsqueda, los filtros y los botones debían ser más grandes en móvil. También aumenté el espacio entre campos y botones para mejorar la precisión.
Seguí los principios del diseño responsive y reduje ligeramente el tamaño de letra en algunos elementos. Se añadió un tema oscuro para reducir la fatiga visual y mejorar la comodidad de quienes lo prefieren.
Diseño responsive
Qué mediría a continuación
Para validar el diseño tras el lanzamiento, estas son las métricas y métodos que usaría para medir y mejorar la experiencia de usuario:
Seguimiento del comportamiento del usuario
Usar herramientas como Google Analytics, Hotjar o Mixpanel para analizar las interacciones en el ERP/CRM e identificar los puntos de fricción habituales y las áreas de mejora.
Métricas de conversión e implicación
Medir con qué eficiencia los usuarios se mueven entre funciones, completan tareas (p. ej., añadir clientes o generar informes) y usan los flujos automatizados.
⏱️
Finalización de tareas y eficiencia de tiempo
Medir cuánto tardan los usuarios en realizar las acciones clave para reducir el tiempo dedicado a procesos repetitivos.
Mapas de calor y grabaciones de sesiones
Detectar problemas de usabilidad visualizando clics, profundidad de scroll y patrones de interacción con funciones como la tabla de gestión de clientes.
Pruebas A/B para mejorar la UI
Probar distintos layouts, posiciones de botones y diseños de formularios para mejorar la usabilidad y la adopción.
Accesibilidad
01
También usé la tipografía sin serifa «Poppins» para que los textos de la aplicación se lean con facilidad.
02
Usé color y contraste en campos y botones para que fueran claros para personas con baja visión. En la librería en código, la documentación de cada componente incluye estados, estilos de foco y notas ARIA; el addon a11y de Storybook está activado.
03
Diseñé un tema oscuro para que distintos usuarios puedan usar el ERP con comodidad.
Sistema de diseño
Durante el proyecto creé un sistema de diseño para el ERP: estilos, componentes y variantes compartidos que crecieron junto con el producto a medida que se añadían nuevos módulos y pantallas.
De Figma a Storybook
En un proyecto posterior (oct. 2026) convertí los mockups del ERP en una librería de componentes en código: 60 componentes en React y TypeScript (22 átomos, 38 moléculas) con 242 design tokens generados desde un único tokens.json. Cada componente está documentado en Storybook con sus estados, casos límite, notas de accesibilidad y la correspondencia entre Figma y código. Monté un flujo asistido por IA (Figma → Figma MCP → Claude Code → pull request en GitHub → preview en Vercel). Yo decidí qué construir, revisé cada cambio y fusioné cada pull request.
Qué haría a continuación
Pruebas y documentación centradas en el usuario
Hacer pruebas de usabilidad basadas en tareas en los flujos clave y documentar cada problema junto con su solución en el sistema de diseño.
Entrevistas con usuarios para mejorar el sistema
Hacer entrevistas cualitativas con cada rol para encontrar los puntos de dolor restantes y priorizar las mejoras.
Investigación inclusiva de accesibilidad
Hacer una auditoría de accesibilidad según WCAG y sesiones de investigación con personas con discapacidad.
Impacto
Tras el primer mes de uso del ERP, que ayuda a automatizar la mayoría de los procesos de negocio, los usuarios respondieron de forma positiva. Esta es la cita de un usuario:
Entrega (continuación con el sistema de diseño, oct. 2026)
• 60 componentes (22 átomos, 38 moléculas)
• 242 design tokens (colores, tipografía, sombras, tamaños, espaciado, rejilla, layout, radios)
• 137 iconos SVG en dos tamaños
• ~480 historias de Storybook con documentación MDX
• 9 pull requests, 5 días de trabajo activo (1–5 oct. 2026)
Qué aprendí
Con la primera versión del ERP aprendí a usar la empatía y a dejar a un lado mis propias suposiciones. La investigación de usabilidad ayudó a mejorar las funciones y la forma de trabajar con el sistema. Más tarde, pasar los mockups a código me enseñó que los sistemas de diseño solo escalan cuando los tokens y la documentación viven en el código, no solo en Figma.
En resumen
Mejorar el rendimiento del ERP requiere una estrategia integral: pruebas exhaustivas, mejoras centradas en el usuario y compromiso con la accesibilidad. Al priorizar el feedback de los usuarios y la inclusión, no solo optimizamos el sistema: creamos un entorno donde se atienden las necesidades de cada usuario.
Enlace a la web de la empresa para la que se desarrolló el ERP: rifbar.com.