MY ROLE
Experience Design Intern, Design Systems & Inclusive Design
Summer 2019 Internship
Summer 2019 Internship
TEAM
Design Language System & Digital Accessibility, Infrastructure Platform
Airbnb's DLS (Design Language System) contains primitives, components, and elements.
• 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
At Airbnb, Inclusive Design is defined as:
"Consciously designing products and environments that do not disable people or create barriers to belonging.”
There are 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 — helps 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.
overview of what I did
Inclusive Design & Accessibility Training
Created a 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 the top 20 launching controls documentation 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.
"Controls usage in filters" Project Brief (WIP)
Formulated a project brief from scratch with future controls UX pattern documentation guidelines.
Understanding Digital A11y & 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 onboarding training to new hires
• Created custom icons and branding elements for org-wide inclusive design training tool
• Successfully piloted 60-minute onboarding 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 onboard new employees. It was a challenge to learn, while simultaneously educating 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 onboarding session for 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 a documentation template structure that highlights 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 the 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
• 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 guidelines approachable
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: Microinteractions
GOAL
To generate and systematize interaction states for control inputs accommodating 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
• 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 the 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 on 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 consistent with the other system patterns. Systematizing the interaction states is pivotal to informing the user behavior with color indication on the 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 the context of how these pre-generated control designs and color palettes 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, fading 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! 🙌
Back to the beginning of "discovery" in the DLS cycle! 🙌
My learnings
• Design with a “people-first” mentality, catering to 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 in unbiased 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!
