Un sistema de menú y header para las plataformas Retail y Enterprise de Airtm
Cómo una estructura web reunió los productos para personas y empresas, funcionó en 1366×768 y llegó a ingeniería como componentes funcionales.
Airtm · 2026 · Entregado a ingeniería
Ficha del proyecto
- Único diseñador
- 1 PM, ingeniería, Marca
- 1 mes hasta el handoff
Definí la dirección, conduje cinco rondas de exploración y construí los componentes en código.
- 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.
- Decisión
- Separar identidad global, contexto de página y acciones sobre listas en tres capas, usando breadcrumbs solo donde existe profundidad real.
- Resultado
- Dirección cerrada tras cinco exploraciones. Componentes React funcionales y registros de decisión fueron a ingeniería. Ahora está con ellos, y no lo muestro como algo ya lanzado.
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. Los títulos de página variaban, las migas de pan eran la navegación por defecto y un menú lateral de nueve ítems sueltos mezclaba acciones con destinos. Los dos productos se estaban alejando, sin nada que los mantuviera juntos.
NorteCada pantalla debería responder dónde estoy, qué puedo hacer y qué tengo, de la misma forma, en los dos productos.
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 de dinero bajo el pliegue. Así que hice que la revisión respondiera a la altura de la pantalla, además del ancho.
Entregado como componentes que funcionan
El equipo recibió componentes React funcionando, con sus estados, y registros cortos de decisión sobre dónde va el saldo, cómo las superficies interactivas comparten la pantalla y cómo se comporta el riel. Ingeniería podía leer el código en lugar de una especificació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.
La estructura, en pantalla
Del archivo de diseño entregado a ingeniería. Los datos son ficticios, como en todo el sitio.