In 2018, Airbnb began preparing for one of the most anticipated IPOs in tech history. With over 150 million users and 4 million hosts across 191 countries, CEO Brian Chesky recognized that increasing bookings and presenting a more professional, faster product experience would be crucial for investor confidence.
I was brought in as part of a specialized five-person team from Ustwo to lead the redesign of Airbnb's Design Language System (DLS). Our expertise in design systems and component libraries was seen as critical for transforming Airbnb's slow loading user experience to be widely accessible on any device under low bandwidth while enabling faster feature development to drive booking growth in the coming years.
Airbnb HQ ♥ 888 brannan, San Francisco, CA
Back in 2016, Airbnb was growing and teams were moving fast. People inside Airbnb needed a common design language to stay in sync. So a team of engineers and designers created the first version of Airbnb's Design Language System (DLS) led by Alex Schleifer. The goal was to create a consistent design experience, creating cross-platform unity from web to mobile.
The first Design Language System - DLS 16'
The Airbnb Design Language System (DLS) is a comprehensive set of guidelines, components, and patterns that guide the design and development of Airbnb's user interface across all platforms. It serves as a shared design language and toolset for designers and developers working at Airbnb, providing a consistent and cohesive experience for users.
The guidelines define the principles, values, and design philosophy that guide the development of the system and provide guidance on how to use the components and patterns to achieve the desired user experience. In 2016, these components were built on Adobe Photoshop and utilzed Sketch allowing designers to quickly access all components and dummy data. All documentation was on an intranet available to all employees.
The components are the building blocks of the system, including buttons, typography, colors, icons, and more. They are designed to be modular and reusable, allowing for customization and adaptation to specific use cases while maintaining consistency and coherence across all platforms. It also enables collaboration between designers and developers, with a shared language and toolset. This enables designers and devs to create new pages and features quickly and easily. Watch more about DLS 16' here.
Various Mobile components from DLS 16'
The existing design infrastructure faced several challenges:
• Tool limitations with Sketch/Photoshop hampering design velocity. The team before me initially tried to champion designers to utilize Sketch and create these components as symbols, which resulted in a mess. After a year and a half of use, everyone abandoned Sketch and went back to Photoshop.
• Inconsistent experiences between mobile and web platforms. Design leaders wish they would have taken more time to think about a stronger set of patterns and components. In the end, the focus was on the system and not what the system was being built for.
• Documentation. Documentation. Documentation. Lacking thorough documentation created some confusion that could have been avoided. Just like with coding, documenting systems as they are created is paramount to the process. Doing so could of allowed for smoother decision-making but instead left people with alot of questions of why/when/how components should be used.
• Code bloat causing performance issues and affecting user conversion. An ever-evolving product with various teams having their own design was causing a significant amount of variants, complexity, and bloat towards the product and its design. This was causing the site to run slow. The code stack was react native but the code written wasn't utilizing why React is so good. Taking into consideration that theres around 150 million Airbnb users worldwide, with around 90% of users accessing the internet by mobile phones, and average speeds ranging around 115 Mbps, we needed to develop a better way to deliver a faster site and leverage React coding standards.
Working directly with Head of Design (Alex Schleifer), and reporting to DLS managers (Yujin Han and Áthila Armstrong), our team embarked on a 9-month transformation to rebuild Airbnb's design foundation and fix the slow performance of the app and site.
DLS team members that contributed towards DLS
The primary audience for Airbnb's new design language system is the designers and developers of Airbnb. It was also important to understand that this also helps Airbnb's users; both hosts and guests. The goal was to create a consistent and coherent user experience across all touchpoints, from the website and mobile app to experiences and reservations.
Airbnb's DLS team is composed of designers, researchers, product/project managers, artists, and developers with diverse backgrounds and skill sets totalling around 50 team members.
Improve load time and increase booking conversion.
Airbnb's main platform demographic is iOS followed by web so our metric was making sure there was full adoption rate for the new design system internally.
By streamlining design and dev work to focus teams to release features faster, the overall goal is to have these features increase usage metrics such as time on app/site, bounce rates, and conversion rates by way of more bookings.
Create a design language that is consistent across all platforms and teams.
The new DLS is had to have principles that translate mobile to web and from design to production. The Airbnb team wanted to make sure developers and designers adpoted Figma and that they were using the new DLS components rather than making their own components.
Primitives for Airbnb DLS
• Comprehensive audit of existing components and patterns and increase adoption. The Ustwo team would execute features across every team in Airbnb on 6-week rotations to audit what components were being used while ensuring adoption of the new DLS was used for all teams.
• Development of integrated documentation. As we were auditing components utilized by each team, we developed a new DLS documentation hub explaining how the components were used across all teams, POCs to ask questions about components, weekly town hall meetings in-office to address questions or concerns, and put all this knowledge into a single documentation hub as an ecosystem that anyone within DLS could contribute towards.
• Focus on design to code transition by developing an internal API for faster feature release and cut down on code bloat. We worked with devs closely to build an API of components that could be used for the entire company. This included guidelines that followed accessibility standards set by WCAG, allowing code to be easily pulled, replicated, adjusted with guidelines, and streamlining the accessibility guides for faster feature implementation.
• Close collaboration with Figma to develop custom plugins. We worked very closely with Figma devs to build plugins that would give designers an easier ability to pull components to adjust and utilize in their feature releases or feature fixes. We used the same nomenclature devs use in code so both parties were speaking the same language when it came down to handing off work.
DLS on Figma
Rollout
The redesign was rolled out gradually, starting with the mobile app and then moving on to the website. The design team conducted extensive testing and user research throughout the rollout process to gather feedback and make improvements as we go.
Change logs
After we rolled out DLS to mobile followed by web, we examined how Figma has been used as a platform to build and maintain the DLS by Airbnb designers and devs. We explored some of the collaborative features that Figma offers, such as commenting and version control, which make it easy for designers to keep track of changes while working on a shared design system.
Some photos taken during my time at Airbnb
The impact of this work became evident both immediately and during the unprecedented challenges that followed. We were able to setup the company for a successful IPO launch in December 2020. This proved to be extremely beneficial as the unexpected pandemic hit in spring of 2020.
• Quick pivot to domestic travel (returned to YoY growth by July 2020)
• Fast implementation of new safety features and protocols
• Seamless expansion of long-term stays (grew from 14% to 24% of bookings)
• Maintained strong customer satisfaction during industry-wide decline
• Achieved near 100% adoption of new DLS across design teams
• Significantly reduced feature development cycles
The pandemic reduced the total number of travelers worldwide in 2020, with revenue of Airbnb falling to 3.38 billion U.S. dollars. Airbnb's revenue in 2021, however, rebounded and amounted to 5.99 billion U.S. dollars. In 2023, that figure reached 9.92 billion.
As we were releasing the last bits of DLS, COVID was at its worst. In my time wrapping on DLS, Brian made the decision on reducing the size of the Airbnb workforce.
The project demonstrated how strategic investment in design infrastructure could directly support business goals, from increasing booking efficiency to enabling rapid market adaptation. Even after my departure, the system continues to serve as Airbnb's foundation for scaling design operations and maintaining consistent user experiences across their platform.
Here are some links to articles and videos related to DLS:
I’m a digital creative with 15 years experience hopping between San Francisco and New York.
Proficient in Illustrator, Photoshop, Figma, and Premiere. Native speaker of all things front end.
Skillsets focused in UX/UI, product design, branding & illustration, and front-end development with an expertise in responsive code. I also dabble in video/audio editing.
I'm an ice cream swirl of strong communication and limitless creativity which culminates in a tasty experience catered to the right audience.
Outside of my design work, my passions are piloting airplanes, working on my chop at table tennis, engaging in various design activities, and riding my Vespa.
