❷ Designing a card system
Problem scope
Due to the lack of framework previous to this project, designers at Airbnb created their own card components. This led to a large amount of disparity both in interaction and visual cohesiveness. Some cards looked alike and worked alike; others were not accessible or scalable.
While it would have been ideal to be able to scrap all of the cards and start anew, the scope of this project was to create a system that could integrate all of the existing cards and only add where needed so that current workflows and projects were not interrupted.
Research
As part of the project, I conducted an audit to gather all of the cards that were present in our product. I then organized all of them into different interaction categories. The goal was to understand how people were using the cards in situ. This allowed me to look at patterns and prioritize the use cases that designers needed now versus later. This was conducted on every platform that we have (Android, iOS, and Web).
During this phase of the project, I looked at creating a framework of interaction so that this new system could be expanded upon by other teams. This framework consists of modules that can be rearranged or removed completely.
Not only does this help simplify the architecture of our containers, but it also allows engineers to easily build each card. For the modules that haven’t been built in code yet, they can create variants and we can also use existing design system components (e.g., buttons and rows) in the cards, making them very flexible and scalable.
I then created the cards within Figma using auto layout, which allows for even more consistency and ease of use. Auto layout mimics the way that a component in code would be created (think of vertical stacks in Swift, for example). Having this parallel allows designers to provide work that is much closer in implementation and minimizes the the amount of back-and-forth during engineering.
Diagram of modular framework
Demo of cards in Figma using autolayout and variables
Documentation and expansion
The documentation that I wrote goes through dos and don’ts as well as accessibility insights. The guidance provides our designers with concrete feedback on how to make their designs more accessible. It showcases how to string cards into a carousel (multiple cards of one category that can be scrolled through horizontally) and how to make sure those are also accessible. The rest of the documentation teaches designers how to navigate a given component and how to create the specific type of card they want to create.
Tab order diagram for carousels
Screen reader announcements andpotential alt text