About me

Work

Contact

Available now!
About me
Work
Contact
Available now!

About me

Work

Contact

Available now!

About me

Work

Contact

Available now!

About me

Work

Contact

Re-design Airbnb

A Case Study in Consistency & Calm
Case studies
/
Airbnb

Re-design Airbnb

A Case Study In Consistency & Calm
Case studies
/
Airbnb

Re-design Airbnb

A Case Study in Consistency & Calm
Case studies
/
Airbnb

Re-design Airbnb

A Case Study In Consistency & Calm
Case studies
/
Airbnb

Re-design Airbnb

A Case Study in Consistency & Calm
Case studies
/
Airbnb

Re-design Airbnb

A Case Study In Consistency & Calm
Case studies
/
Airbnb

Client

Sector

My role

Duration

Airbnb Mobile Redesign Ironhack Case Study

Travel & Hospitality

UX/UI Design

1 week

Client

Sector

My role

Duration

Airbnb Mobile Redesign Ironhack Case Study

Travel & Hospitality

UX/UI Design

1 week

The Challenge

Airbnb’s app promises adventure. Reality: inconsistent icons, muddy navigation, and variable info. One screen flows, the next stalls. My challenge: copy core screens, spot the chaos, redesign with peace.

Client

Airbnb Mobile Redesign Ironhack Case Study

Sector

Travel & Hospiatlity

My role

UX/UI Design

Duration

1 week

The Challenge

Airbnb’s app promises adventure. Reality: inconsistent icons, muddy navigation, and variable info. One screen flows, the next stalls. My challenge: copy core screens, spot the chaos, redesign with peace.

Side-by-side comparison of three Airbnb app detail screens for property, experience, and culinary service, each using different layouts and profile picture placements. Annotation bubbles highlight inconsistencies and suggest aligning detail page structures for better user experience.Side-by-side comparison of three Airbnb app detail screens for property, experience, and culinary service, each using different layouts and profile picture placements. Annotation bubbles highlight inconsistencies and suggest aligning detail page structures for better user experience.
Side-by-side comparison of three Airbnb app detail screens for property, experience, and culinary service, each using different layouts and profile picture placements. Annotation bubbles highlight inconsistencies and suggest aligning detail page structures for better user experience.Side-by-side comparison of three Airbnb app detail screens for property, experience, and culinary service, each using different layouts and profile picture placements. Annotation bubbles highlight inconsistencies and suggest aligning detail page structures for better user experience.
Comparison between an original and improved app detail page layout for a vacation rental listing showing excessive typographic styles and lack of general navigation on the original, versus more consistent, calm design with an added navigation bar in the improvement.Comparison between an original and improved app detail page layout for a vacation rental listing showing excessive typographic styles and lack of general navigation on the original, versus more consistent, calm design with an added navigation bar in the improvement.

The current app's detail pages voor Services, experiences and accommodations look like 3 different apps

Comparison between an original and improved app detail page layout for a vacation rental listing showing excessive typographic styles and lack of general navigation on the original, versus more consistent, calm design with an added navigation bar in the improvement.Comparison between an original and improved app detail page layout for a vacation rental listing showing excessive typographic styles and lack of general navigation on the original, versus more consistent, calm design with an added navigation bar in the improvement.

The inconsistency in typographic styles make it hard to maintain. I also missed the navigation on details page: you have to back to the main page in order to reach it.

The new design is predictable: across all services, you see the same layouts, clear headers, sections, making it easier for the use to find the information they need. And easier for designer and developer to iterate.

The colours used in these screens are an iteration from my previous design, as a reaction to one of my fellow students that the use of colour was too predictable.

Process


Process

Process

Diagnosis & Heuristic Review
Mapped every screen, flagged every break. No guessing, just pointing out inconsistencies.


Benchmarking
Looked at Booking.com, Vrbo, Expedia and Tripadvisor for inspiration and to see what worked and what not. Decided to go for a cleaner approach.


Sketching & Redesign
Wireframed clean flows. Cut the noise, standardised controls, collapsed info into calmer sections.

Group of redesigned app screens displaying harmonized layouts and consistent navigation for services, experiences, and accommodations. Includes annotated usability notes discussing section overlaps, simplified layouts, and the use of consistent tone and structure across all app services.Group of redesigned app screens displaying harmonized layouts and consistent navigation for services, experiences, and accommodations. Includes annotated usability notes discussing section overlaps, simplified layouts, and the use of consistent tone and structure across all app services.
Group of redesigned app screens displaying harmonized layouts and consistent navigation for services, experiences, and accommodations. Includes annotated usability notes discussing section overlaps, simplified layouts, and the use of consistent tone and structure across all app services.Group of redesigned app screens displaying harmonized layouts and consistent navigation for services, experiences, and accommodations. Includes annotated usability notes discussing section overlaps, simplified layouts, and the use of consistent tone and structure across all app services.

The new design is predictable: across all services, you see the same layouts, clear headers, sections, making it easier for the use to find the information they need. And easier for designer and developer to iterate.

The colours used in these screens are an iteration from my previous design, as a reaction to one of my fellow students that the use of colour was too predictable.

Demo & Critique

Presented live to Ironhack. Main feedback: “Everything finally makes sense.” Navigation and key tasks up front, distractions down.

Feedback board divided into positive reviewer comments (e.g., calm and organized layout, predictable navigation, well-organized component library, thoughtful simplification) and negative feedback with design solutions (e.g., spacing inconsistencies, CTA visibility, color palette daringness, text-heavy sections) for an app or website prototype.Feedback board divided into positive reviewer comments (e.g., calm and organized layout, predictable navigation, well-organized component library, thoughtful simplification) and negative feedback with design solutions (e.g., spacing inconsistencies, CTA visibility, color palette daringness, text-heavy sections) for an app or website prototype.
Feedback board divided into positive reviewer comments (e.g., calm and organized layout, predictable navigation, well-organized component library, thoughtful simplification) and negative feedback with design solutions (e.g., spacing inconsistencies, CTA visibility, color palette daringness, text-heavy sections) for an app or website prototype.Feedback board divided into positive reviewer comments (e.g., calm and organized layout, predictable navigation, well-organized component library, thoughtful simplification) and negative feedback with design solutions (e.g., spacing inconsistencies, CTA visibility, color palette daringness, text-heavy sections) for an app or website prototype.
Feedback board divided into positive reviewer comments (e.g., calm and organized layout, predictable navigation, well-organized component library, thoughtful simplification) and negative feedback with design solutions (e.g., spacing inconsistencies, CTA visibility, color palette daringness, text-heavy sections) for an app or website prototype.Feedback board divided into positive reviewer comments (e.g., calm and organized layout, predictable navigation, well-organized component library, thoughtful simplification) and negative feedback with design solutions (e.g., spacing inconsistencies, CTA visibility, color palette daringness, text-heavy sections) for an app or website prototype.

Fellow students react to my presentation: I included possible solutions to negative feedback.

Result

Uniform icons, consistent grids. Less differences between the categories of services.

  • Navigation order: every main action is visible.

  • Info is grouped, not scattered.

  • Peace in the flow, clarity and consistency in core screens.

Curious about the high fidelity prototype? Click here!

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