Airbnb

I spent the summer of 2019 as an Inclusive Experience Design Intern on Airbnb's Design Language System (DLS) team, with a focus on Digital Accessibility. I learned, while simultaneously educated my peers, about core inclusive design principles and created design systems documentation to design a digital interface for diverse users.

DURATION

June–September
Summer 2019 Internship

MY ROLE

Inclusive Experience Design Intern

TEAM

Design Language System & Digital Accessibility
(Infrastructure Platform Team)

*Due to NDA restrictions, I am unable to disclose all visual details about my projects.
Please contact me for more information at chan.ariellh@gmail.com.

What is DLS (Design Language System)?

Airbnb design system consists of three main tiers:

• Primitives: high-level system patterns, i.e. color, typography, shapes, etc.

• Components: containers of system patterns, i.e. cards, modules

• Elements: parts of the system that cannot be further broken down, i.e. control inputs, labels

What is Inclusive Design?

At Airbnb, Inclusive Design defined as: "Consciously designing products and environments that do not disable people or create barriers to belonging.”

There’s many teams pioneering inclusion like:

• Globalization — localizing content in different countries

• Anti-discrimination — preventing identity discrimination on the platform

• In-home & Digital-Accessibility — assuring the quality of accessible physical environments & digital interface

• Illustration — who help ensure we represent various identities and abilities within our product

What’s the difference between Inclusion and Accessibility?

Inclusion

Designing for a spectrum of human diversity: from ability, language, culture, gender, and more.

Accessibility

A subset within inclusion and is focused on designing for people’s needs, abilities, and preferences

DLS Digital Accessibility (Digital A11y) team focuses on actionable guidelines (often referred to as WCAG standards) for native and web that Airbnb needs to meet in order to go public/IPO.

AN OVERVIEW OF WHAT I DID —

Inclusive Design & Accessibility Training

• Created new inclusive design & digital accessibility training tool (and created a set of icons illustrating the disability spectrum!).

DLS19 Controls documentation

• Developed documentation template and content for DLS patterns with accessibility and globalization considerations, owning 5 out of "Top 20" launching controls documentations to be distributed to product teams.

DLS19 CONTROLS INTERACTION STATES

• Generated various interaction states for control inputs with color usage consistency for final engineering implementation.

"CONTROL USAGE IN FILTERS" PROJECT BRIEF (WIP)

• Formulated a project brief from scratch with future controls UX pattern documentation guidelines.

Understanding Digital Accessibility & educating designers

GOAL

To revamp the inclusive design training tool and educate employees about digital accessibility principles.

COLLABORATORS

Michael Sui (Inclusive Design Lead)

STAKEHOLDERS

Inclusive Design Lead & Digital Accessibility team, Airbnb designers

CONTRIBUTIONS

• Renewed training tool with more actionable digital accessibility principles for education and advising
• Created custom icons and branding elements for org-wide inclusive design training tool
• Successfully piloted 60-minute on-boarding training to new hires

Teaching my peers about digital accessibility in Airbnb's hour-long onboarding inclusive design training.

Creating approachable educational content

In my first project, I was tasked to rebrand/create new content for Airbnb's inclusive design & digital accessibility training tool to on-board new employees. It was a challenge to learn, while simultaneously educate others, about these principles that were foreign to me. By being proactive in research, shadowing my manager, and asking for feedback from my team, the process helped me be more aware of how to make content more approachable and communicate succinctly and effectively. As a "reach" goal I have set for my own personal growth, my manager further challenged me to facilitate the 60-minute long on-boarding session to several new hires, which helped me apply my learnings about digital accessibility to presentation practice.

Learning about key UX best practices to maintain digital accessibility for a range of end-users.

DLS19 Documentation: How can a11y/g11n principles live in the DLS ecosystem?

GOAL

To establish DLS documentation template structure that highlight accessibility (a11y) and globalization (g11n) principles and generate approachable usage guidelines.

COLLABORATORS

Jamie Cristal (Inclusive Designer), Jack Hone (Brand Designer), Yujin Han (DLS Manager)

STAKEHOLDERS

DLS Design Leadership, Internal product teams

CONTRIBUTIONS

• Influenced structure of articles adopted by designers on the team
• Created documentation that other designers can apply to custom solutions
• Established content for a11y and g11n sections

RESEARCHING accessibility & globalization in leading DESIGN SYSTEMs

Carrying my learnings about Digital Accessibility, I was tasked to apply these principles to the larger DLS ecosystem. First and foremost, I conducted competitive analysis and research to understand what leading design systems on the web have done to include accessibility considerations and mapping out Airbnb's goals to be integrated and extensive in their a11y and g11n approaches.

3-day design sprint: establishing documentation structure & content

Moving forward, DLS participated in a 3-day design sprint where everyone gathered for heads-down productivity to generate documentation content and finalize the documentation structure with guidelines about best usage practices, implementation, and interaction. I was able to help influence the final template distributed to other DLS designers for their respective documentation work.

3-day DLS design sprint: Working with Design Leads and the Design Director to consolidate documentation template and content.

MAKING DOCUMENTATION GUIDELINES APPROACHABLE & DIGESTIBLE

With the new revamp of DLS coming in 2020, I helped establish the Airbnb DLS documentation structure with dedicated sections outlining principles and guidelines of accessibility (a11y) and globalization (g11n). We found that calling attention to these sections within each component documentation overview can help internal product teams be aware of Airbnb's inclusion efforts while designing custom solutions.

Wireframe of DLS documentation template on the "switch" control element with best usage guidelines.

DLS19 Control Interaction States: Thinking about microinteractions

GOAL

To generate and systematize interaction states for control inputs accommodating for multiple use cases.

COLLABORATORS

Jeremy King (Controls Designer), Jamie Cristal (Color Designer)

STAKEHOLDERS

DLS team, Front-end engineers, End-product customers

CONTRIBUTIONS

• Standardized color application of interaction states for controls and other system patterns
• Collaborated with front-end engineers for implementation
• Established focused states for keyboard tab order accessibility

Control inputs family consisting of (left to right): switches, checkboxes, radio buttons, steppers, toggles

CONTROL INPUTS: owning 5 of "top 20" system patterns

I had the privilege to own 5 of the "Top 20" system patterns rolling out for DLS, creating interaction states for the control inputs family and generating visual best practice examples and UX guidelines of how to use these elements across multiple UI surfaces. In order to finalize the documentation, I had to help generate the interaction states for control inputs in consistency to the other system patterns. Systematizing the interaction states is pivotal to inform the user behavior with color indication on screen within a large scalable design system.

Micro/macro systems thinking for multiple use cases

The typical user interactions for control inputs are its "unselected"/"selected" states. However, one control element can contain a variety of use cases that multiplies to a greater number when applied to other control elements. Design system thinking requires a merge of visual design application and user psychology to think about technical refinement and human behavior interacting with the interface. After getting context of how these pre-generated control designs and color palette are used in the system, I was able to experiment and articulate each interaction state with purposeful shifts in color to indicate a particular user behavior, i.e. darkening for hover states, faded for disable states, etc.

cLARIFYING FOCUSED STATES FOR KEYBOARD TAB ORDER ACCESSIBILITY

I also had the opportunity to clarify the use of "focused" states for users who use keyboard tabbing on their desktops to access information on Airbnb's website, envisioning how that would translate across the system.

How focused states translate to other components of the Airbnb Design Language System

Recent 2020 website update with focused states implemented!

What's next for DLS?

As for next steps, I concluded my internship with a work-in-progress project brief about controls usage in filtering for future documentation purposes. I initiated research to provide more clarity on UX patterns, connecting design leadership and reaching out to Airbnb product teams (Search, Guest, and Pro-host) to audit existing control patterns on different surfaces.

Back to the beginning of "discovery" in the DLS cycle! 🙌

WHAT I LEARNED —

• Design with a “people-first” mentality, catering towards different user preferences with an emphasis on accessibility — permanent, temporary, or situational. We want to ensure that all users of diverse abilities can have the same experience with equal access.

• Manage ambiguity through independent research and connecting with cross-functional stakeholders and design leadership, especially when formulating a project brief from scratch.

• Be in service to other designers and form relationships through communication in delivering consultancy and education.

• Equip a ‘growth mindset’ through challenging my comfort zones and proactively learning to build on my existing knowledge.

Thank you, Airbnb! 🎉

My time at Airbnb has been an extremely fulfilling, yet challenging journey where I familiarized myself with inclusive design. Having experienced designing for users with visual disabilities in the past, I was interested in immersing myself into non-biased and inclusive design. More specifically, I wanted to account for the diverse user needs and deviate from the misconception of designing for the majority.

Being in the internal platform team at Airbnb gave me a glimpse of its foundational design infrastructure in relation to how designers are able to consult product teams about scalable design system patterns and guidelines that are applied in their custom solutions to create cohesive end-to-end experiences. Through curating educational content for inclusive design, managing individual project ownership, and collaborating with cross-functional partners, I was able to quickly adapt and familiarize myself with the tech industry's design system within a fast-pace environment while maintaining design quality.

A huge thank you to the whole DLS & Digital Accessibility team, especially Jamie Cristal, Jeremy King, Yujin Han, Taido Nakajima, and my manager, Michael Sui. I am so grateful for the support from these talented individuals, and will continue to apply my learning from Airbnb to future projects!