About me
Work
Contact
About me
Work
Contact
About me
Work
Contact

Work

/

Airbnb

Case Study · iOS Redesign

Airbnb: A Study in Consistency & Calm

Airbnb: A Study in
Consistency & Calm

Standardizing the iOS experience through heuristic evaluation and atomic design.

Role

Solo designer

Timeline

40 Hour Sprint

Focus

Heuristics, Cloning and Redesign

Outcome

100% Consistency

Context & Challenge

The Context:

As a solo designer in a 40-hour sprint, I challenged myself to clone and then redesign the Airbnb iOS app. While the brand is iconic, the actual interface has suffered from rapid feature expansion. I wanted to see if the underlying design system was as robust as it appeared on the surface.

The Challenge:

Cloning the current app was a nightmare. I discovered a chaotic lack of standards: over 9 different font styles in a single flow, varying corner radii, and navigation arrows that shifted positions between screens. This visual "drift" increases cognitive load and weakens the user's sense of control.

Cloning the current app was a nightmare. I discovered a chaotic lack of standards:
over 9 different font styles in a single flow, varying corner radii, and navigation arrows that shifted positions between screens. This visual "drift" increases cognitive load and weakens the user's sense of control.

The Objective:

To reimagine the experience through strict "Atomic Design." The goal was to unify the "Stays" and "Experiences" flows by establishing a centralized design system. By standardizing typography (Lexend) and spacing, I aimed to transform a fragmented interface into a "Calm UI" that feels professional and effortless.

Audit Findings

9+

Font Variations

Cloning the app revealed a typographic mess. I identified over 9 different combinations of weight and size in a single journey, with no clear hierarchy."

Unpredictable Controls

Basic navigation is inconsistent. The 'Back' arrow and 'Cancel' buttons shift positions and change styles between screens, forcing users to constantly re-orient themselves.

12+

Inconsistent Layouts

Corner radii on cards and buttons varied randomly. This lack of standardization made the interface feel like a patchwork of disconnected features rather than a single product.

Heuristic evaluation board displaying the full original Airbnb iOS user journey. The image is annotated with sticky notes highlighting inconsistencies such as 9+ font variations, shifting navigation arrows, and random corner radii
Heuristic evaluation board displaying the full original Airbnb iOS user journey. The image is annotated with sticky notes highlighting inconsistencies such as 9+ font variations, shifting navigation arrows, and random corner radii
Heuristic evaluation board displaying the full original Airbnb iOS user journey. The image is annotated with sticky notes highlighting inconsistencies such as 9+ font variations, shifting navigation arrows, and random corner radii

From Atoms to Pages

I established a modular system to ensure scalability. By defining a strict icon grid, uniform 8px corner radii, and a standardized color palette, I ensured that every screen, from search to checkout, felt familiar and secure."

Atomic design board for the Airbnb redesign. It visually organizes the new system from 'Atoms' (icons, colors, Lexend typography) to 'Molecules' (buttons, input fields) and 'Organisms' (cards), culminating in the final page templates.
Atomic design board for the Airbnb redesign. It visually organizes the new system from 'Atoms' (icons, colors, Lexend typography) to 'Molecules' (buttons, input fields) and 'Organisms' (cards), culminating in the final page templates.
Atomic design board for the Airbnb redesign. It visually organizes the new system from 'Atoms' (icons, colors, Lexend typography) to 'Molecules' (buttons, input fields) and 'Organisms' (cards), culminating in the final page templates.

The Redesign Solution

01

Typography

Legible Typography

Switched to Lexend as the primary typeface. Its rounded forms and generous spacing improve readability and accessibility for a broader range of travellers.

Accessibility

Readability

Typography showcase comparing the new Lexend typeface against the old system. The image highlights the rounded forms and generous spacing of Lexend, designed to improve readability and accessibility.
Typography showcase comparing the new Lexend typeface against the old system. The image highlights the rounded forms and generous spacing of Lexend, designed to improve readability and accessibility.
Typography showcase comparing the new Lexend typeface against the old system. The image highlights the rounded forms and generous spacing of Lexend, designed to improve readability and accessibility.
UI component detail showing the standardized icon grid and button system. It demonstrates how every interactive element now shares a consistent stroke weight and 8px corner radius.
UI component detail showing the standardized icon grid and button system. It demonstrates how every interactive element now shares a consistent stroke weight and 8px corner radius.
UI component detail showing the standardized icon grid and button system. It demonstrates how every interactive element now shares a consistent stroke weight and 8px corner radius.

02

Consistancy

Unified Components

Standardized the icon grid and button system. Now, every interactive element shares the same stroke weight and corner radius, reducing the learning curve.

Scalability

03

experience

Calmer Discovery

By removing visual noise and aligning the grid, the new interface allows users to focus on what matters: the beautiful properties and experiences.

Calm UI

Visual Hierarchy

High-fidelity mobile UI mockup of the 'Stays' and 'Experiences' discovery flow. The design features a decluttered layout with aligned grids, allowing the property photography to stand out against a clean white background.
High-fidelity mobile UI mockup of the 'Stays' and 'Experiences' discovery flow. The design features a decluttered layout with aligned grids, allowing the property photography to stand out against a clean white background.
High-fidelity mobile UI mockup of the 'Stays' and 'Experiences' discovery flow. The design features a decluttered layout with aligned grids, allowing the property photography to stand out against a clean white background.
Final presentation shot of the redesigned Airbnb app on an iPhone mockup, emphasizing the visual consistency and reduced cognitive load achieved through the Atomic Design approach.
Final presentation shot of the redesigned Airbnb app on an iPhone mockup, emphasizing the visual consistency and reduced cognitive load achieved through the Atomic Design approach.

Impact & Project Reflections

100%

Visual Consistency

Standardized every atomic element, including icons, buttons, and corner radii.

-20%

Reduced Cognitive Load

By aligning navigation controls and typography, user friction was minimized.

Scalable Architecture

Developed a modular design system allowing for rapid feature expansion.

Pretty layouts are easy, but solving real usability problems requires deep thinking. This redesign proved that standardization and a 'Calm UI' strategy can transform a complex application.

Interested in how user research shapes design strategy?

Interested in how user research shapes design strategy?

Let's talk about your next project.

Get in touch

View more work

Witty Wolf Design

By Marco Ramos
By Marco Ramos
By Marco Ramos

howl@wittywolf.design

Amsterdam

Madrid

+31 653 215 989

+34 624 225 011

Copyright Witty Wolf Design 2025
About me
Work
Contact
About me
Work
Contact