Design Systems

Working with developer tools at Booking, I expanded the design system with a library of components to enable any Booking developer to build better internal tools, faster.

Beyond that, I designed tools, guidelines and documentation to scale and improve the design system for all consumer products at Booking.

Daniel and I worked on the Booking.com Design System and its extension to a product development framework.

He is very capable of high level thinking, planning and documenting, with a talent for understanding and operating the impact of systems design on developer experience, and therefore the product. He has contributed greatly to the quality and scale of our systems here at Booking.com

Arda Karacizmeli – Senior Staff Product Designer @ Shopify
Infra Components documentation and components example
Booking.com

BUI Infra Components

As a team that built internal tools, we quickly realized we were constantly redesigning and rebuilding components between projects.

To increase development speed and scale our efforts, we created BUI Infra Components, a library of React components and documentation to enable any developer to easily build an internal tool.

Working with our front-end developer, I was responsible for designing and coding most of the components, writing and building our documentation site, and validating the library with our users.

This project resulted in better consistency and usability for our internal tools, with infrastructure teams independently creating applications and iterating features using our components!

Role
  • UX Research
  • UX Design
  • UI Design
  • Front-end Development
  • Product Management
Infra components documentation Infra components documentation Infra components documentation
Onboarding documentation and example application for the library
Infra components documentation
Infra components documentation Infra components documentation Infra components documentation
Component structure and live component examples in the documentation
Infra components documentation Infra components documentation
Infra components documentation Infra components documentation
Fostering adoption for the library included running usability testing for the onboarding flow, release management and providing open sessions for teams
Booking.com

React @ Booking

As we released our BUI Infra component library, it became evident the need to increase adoption of React in Core Infrastructure, since the group was composed mostly of back-end developers and SREs.

To spread knowledge on the community, I created a mini-documentation site named React Basics, to help developers learn the ropes within the context of our library.

To facilitate rapid prototyping and exploration with BUI Infra, I built and deployed a browser-based editor, using the react-live library.

This editor already has all necessary dependencies pre-installed, making it an easy-to-use environment to play with the components!

Role
  • Front-end Development
  • Documentation
  • Community Outreach
Document with blurred summary of Roadmap Workshop Document with blurred summary of Product Discovery Workshop
Document with blurred summary of Stakeholder Interviews
The browser editor proved to be a very useful tool for quick sessions of pair-programming and debugging layout issues
Booking.com

Figma Rollout

As senior designer, I was part of the group that rolled out Figma to (many) hundreds of users at Booking, between designers, copywriters, PMs, and developers.

This work included writing documentation, creating FAQs, and interacting with the design community, but also: learning about SSO, debugging RBAC permissions and many support calls with the Figma team.

It was a wild ride, and way outside of the usual realm of responsibilities of a designer, but bringing such a great tool to our community was definitely worth the effort!

Role
  • Program Management
  • Documentation
  • Community Outreach
Document with blurred summary of Roadmap Workshop