Una estructura para dos productos
Airtm tiene dos productos en la misma plataforma web: una billetera para personas y una app de pagos para empresas, construidas por equipos distintos en momentos distintos.
- Rol
- Senior Product Designer — dirección, cinco rondas de exploración y los componentes, construidos en código.
- Colaboradores
- Equipo de diseño, Producto, Ingeniería, Marca.
- Norte
- Cada pantalla debería responder dónde estoy, qué puedo hacer y qué tengo — de la misma forma, en los dos productos.
En 30 segundos
- 01 · Problema
- Dos productos compartían una plataforma, pero navegaban de manera diferente. En 1366×768, el menú del prototipo dejaba accesibles solo cuatro de doce destinos.
- 02 · Decisión
- Separar identidad global, contexto de página y acciones sobre listas en tres capas, usando breadcrumbs solo donde existe profundidad real.
- 03 · Resultado
- Dirección cerrada tras cinco exploraciones; componentes React funcionales y registros de decisión se entregaron a ingeniería. Este caso no afirma adopción en producción.
El problema
El sistema de diseño publicado era mobile-first, así que en la web cada pantalla resolvía la orientación por su cuenta: títulos de página distintos, migas de pan usadas como navegación por defecto, un menú lateral de nueve ítems sueltos que mezclaba acciones con destinos, y los dos productos alejándose sin nada que los mantuviera juntos.
La restricción
Dos productos, una plataforma, y ninguno podía dejar de lanzar mientras esto pasaba. El sistema tenía que servir a una billetera para personas y a una herramienta de pagos para empresas sin que ninguna se sintiera de visita en la otra, y tenía que poder adoptarlo un equipo de ingeniería que no iba a leer un documento de especificación para hacerlo.
Lo que probé primero
Las migas de pan como forma por defecto de decir dónde estás, porque son explícitas y baratas. También son equivocadas para este producto, que está hecho de destinos poco profundos y flujos lineales, y no de un árbol profundo, así que la miga casi siempre tenía un solo nivel — un control que ocupa espacio para repetir el título de la página.
El giro
Tres capas, cada una respondiendo exactamente una pregunta, y nada respondiendo dos. Una barra global para quién eres y qué te está esperando. Un encabezado de página para dónde estás y qué puedes hacer aquí. Una barra de herramientas para lo que le estás haciendo a la lista que tienes delante. Las migas de pan pasaron a ser opcionales para árboles realmente profundos, y los flujos lineales recibieron un stepper.
Medido en el hardware que la gente tiene
A 1366×768, el menú del prototipo dejaba solo cuatro de doce destinos accesibles, con la acción principal bajo el pliegue. La revisión considera altura y ancho.
Entregado como componentes, no como especificación
Entregué al equipo componentes React, estados y registros de decisión sobre saldo, superficies interactivas y navegación. El handoff está documentado; el caso no afirma adopción en producción.
A qué renuncié
A la libertad de cada producto. La app para empresas perdió la posibilidad de inventar su propio marco para una pantalla que se habría beneficiado de eso, y algunos layouts quedaron con un poco menos de espacio. Un solo sistema significa que alguien siempre cede algo; hice explícito el intercambio en lugar de dejar que cada equipo lo descubriera después.
Resultado
Dirección cerrada después de cinco rondas, un prototipo funcional publicado para el equipo y los componentes entregados a ingeniería — con las reglas escritas para que la próxima persona no tenga que volver a discutirlas.