Airbnb · 9 tipografías, un solo flujo. ¿Por qué?

Quería saber cómo se ve de cerca un design system a la escala de Airbnb. Así que cloné la app iOS pantalla a pantalla en un sprint de 40 horas. De cerca está más desordenado de lo que el pulido sugiere. Probablemente lo estén casi todos los sistemas que llevan una década publicando deprisa.

Lo que reveló el clon

La auditoría

Clonar la app actual fue una pesadilla, en el sentido útil. Más de 9 estilos tipográficos en un solo flujo. Radios de esquina que varían al azar. Flechas de volver y botones de cancelar que cambian de estilo y de sitio entre pantallas, así que la gente se reorienta una y otra vez. Esa deriva visual cuesta atención y debilita la sensación de control.

Tablero de evaluación heurística del recorrido completo original de la app iOS de Airbnb, anotado con las inconsistencias encontradas — El recorrido completo, clonado y anotado. Cada bandera es una inconsistencia.

Detalle del tablero de auditoría a tamaño de lectura: tres variantes de radio de esquina marcadas en pantallas contiguas, pequeño, mayor y apenas redondeado, con las notas de estandarización propuestas — Una columna a tamaño de lectura: tres radios de esquina en pantallas contiguas, y la nota que se convirtió en la solución.

9+combinaciones de peso y tamaño tipográfico en un recorrido

12+variantes de radio de esquina entre tarjetas y botones

Errantescontroles de volver y cancelar entre pantallas

La inconsistencia a esta escala no es descuido. Es el aspecto que tiene de cerca una década de publicar deprisa.

Trabajo de base

De los átomos a las páginas

Con los problemas documentados, probé si un atomic design estricto podía resolverlos. Un sistema modular desde cero: una cuadrícula de iconos estricta, radios de esquina uniformes de 8px, una paleta estandarizada. Cada pantalla comparte los mismos cimientos. El rediseño es un concepto, no un producto publicado; una respuesta posible a lo que la auditoría destapó.

Tablero de atomic design que organiza el nuevo sistema desde átomos como iconos y colores hasta páginas completas — De átomos a páginas: el sistema conceptual en un tablero.

01 · Tipografía

Tipografía legible

Lexend como tipografía principal. Formas redondeadas, espaciado generoso, mejor lectura para un rango más amplio de viajeros.

Espécimen tipográfico de Lexend frente a la antigua mezcla de estilos, mostrando sus formas redondeadas — Lexend frente a la mezcla antigua: una voz en lugar de nueve.

02 · Consistencia

Componentes unificados

Una cuadrícula de iconos, un sistema de botones. Cada elemento interactivo comparte el mismo grosor de trazo y el mismo radio de esquina, así que nada hay que reaprenderlo entre pantallas.

Una cuadrícula, un radio, un grosor de trazo.

03 · Experiencia

Descubrir con más calma

El flujo de descubrimiento de estancias y experiencias con un layout despejado — El concepto en su sitio: descubrimiento más calmado, chrome consistente.

La app de Airbnb rediseñada en un iPhone, mostrando el lenguaje visual unificado — El concepto en su sitio: descubrimiento más calmado, chrome consistente.

Siendo honestos

Lo que enseñó este ejercicio

Esto fue un ejercicio, y Airbnb publica bajo restricciones que un clon de 40 horas nunca conocerá: legacy, experimentos, equipos moviéndose en paralelo. Exactamente eso lo hacía digno de estudio. La reconstrucción demostró que la estandarización completa es posible: iconos, botones, radios y tipografía bajo un sistema, controles que se quedan en su sitio, una estructura modular que podría crecer rápido. Lo que me llevé: la consistencia no es una capa de barniz al final. Es una estructura con la que te comprometes al principio, o que pagas por reconstruir después.