Airbnb · 9 fonts, één flow. Waarom?

Kort samengevat

Airbnb scherm voor scherm naklonen laat zien hoeveel inconsistentie zelfs een gepolijst product kan absorberen.

Een gedocumenteerde audit en een conceptherbouw met volledige atomic-consistentie, aangeboden als studie, niet als correctie.

Sprint, van kloon tot concept: 40 uur
Letterstijlen in één flow (audit): 9+
Varianten hoekradius (audit): 12+

Ik wilde weten hoe een design system er op Airbnb-schaal van dichtbij uitziet. Dus kloonde ik de iOS-app scherm voor scherm in een sprint van 40 uur. Van dichtbij is het rommeliger dan de gepolijstheid doet vermoeden. Dat zijn de meeste systemen die tien jaar snel hebben geshipt waarschijnlijk.

Wat de kloon blootlegde

De audit

Airbnb’s huidige app naklonen was een nachtmerrie, in de nuttige zin. Meer dan 9 letterstijlen in één flow. Hoekradii die willekeurig verschillen. Terugpijlen en annuleerknoppen die per scherm van stijl en plek wisselen, zodat gebruikers zich steeds opnieuw moeten oriënteren. Die visuele drift kost aandacht en verzwakt het gevoel van controle.

Heuristisch evaluatiebord van de volledige oorspronkelijke Airbnb iOS-reis, geannoteerd met de gevonden inconsistenties — De volledige reis, gekloond en geannoteerd. Elke vlag is een inconsistentie.

Detail van het auditbord op leesformaat: drie hoekradiusvarianten gemarkeerd op aangrenzende schermen, klein, groter en amper rond, met de voorgestelde standaardisatienotities — Eén kolom op leesformaat: drie hoekradii op aangrenzende schermen, en de notitie die de fix werd.

9+combinaties van lettergewicht en -grootte in één reis

12+varianten hoekradius over kaarten en knoppen

Zwervendterug- en annuleerknoppen tussen schermen

Inconsistentie op deze schaal is hoe tien jaar snel shippen er van dichtbij uitziet.

Grondwerk

Van atomen naar pagina’s

Met Airbnb’s inconsistenties in typografie, hoekradius en knoppen gedocumenteerd testte ik of strikt atomic design ze kon oplossen. Een modulair systeem vanaf nul: een strak icoonraster, uniforme hoekradii van 8px, een gestandaardiseerd palet. Elk scherm deelt dezelfde fundering. Het herontwerp is een concept, geen geshipt product; één mogelijk antwoord op wat de audit blootlegde.

Atomic-designbord dat het nieuwe systeem ordent van atomen als iconen en kleuren tot volledige pagina's — Van atomen naar pagina's: het conceptsysteem op één bord.

01 · Typografie

Leesbare typografie

Lexend als primair lettertype van het herontwerp. Ronde vormen, royale spatiëring, betere leesbaarheid voor een bredere groep reizigers.

Letterproef van Lexend tegenover de oude gemengde stijlen, met de ronde vormen zichtbaar — Lexend tegenover de oude mix: één stem in plaats van negen.

02 · Consistentie

Uniforme componenten

Het herontwerp: één icoonraster, één knoppensysteem. Elk interactief element deelt dezelfde lijndikte en hoekradius, zodat niets tussen schermen opnieuw geleerd hoeft te worden.

Eén raster, één radius, één lijndikte.

03 · Ervaring

Rustiger ontdekken

Het herontwerp past het nieuwe systeem toe op Airbnb’s ontdekflow voor verblijven en ervaringen: hetzelfde icoonraster, dezelfde hoekradii, dezelfde typografie. Er is hier geen nieuwe content, alleen een rustigere versie van wat er al bestaat.

De ontdekflow voor verblijven en ervaringen met een opgeruimde layout — Het concept op zijn plek: rustiger ontdekken, consistente chrome.

De herontworpen Airbnb-app op een iPhone, met de uniforme beeldtaal — Het concept op zijn plek: rustiger ontdekken, consistente chrome.

Eerlijk gezegd

Wat deze oefening liet zien

Dit was een oefening, en Airbnb shipt onder beperkingen die een kloon van 40 uur nooit tegenkomt: legacy, experimenten, teams die parallel bewegen. Precies dat maakte het de studie waard. De herbouw liet zien dat volledige standaardisatie kan: iconen, knoppen, radii en typografie onder één systeem, knoppen die blijven staan, een modulaire structuur die snel kan groeien. Wat ik meenam: consistentie is een structuur waar je aan het begin voor kiest, of waar je later voor betaalt om haar in te bouwen.