booking.com
design language
I joined Booking.com in Feburary 2020 right as we entered a global pandemic. Whilst it was a challenging time for both the business and myself navigating a new company, a new country and a new way of working, I learnt a lot an was able to get involved in some incredibly rewarding work.
My focus for 2020 was within the Design Language team – the team responsible for defining Booking.com’s first design vocabulary. This was a huge project that involved people from across multiple areas of the business and hence a lot of inter-company collaboration and strategic thinking.
I had several tasks and deliverables throughout the project inclding:
- Research & audits
- Iconography definitions
- Tone of Voice content design
- Design Language Wrap up package
- Flights IOS translation
- Design language portal
- App standards portal support
- Design Language Training
I joined Booking.com in Feburary 2020 right as we entered a global pandemic. Whilst it was a challenging time for both the business and myself navigating a new company, a new country and a new way of working, I learnt a lot an was able to get involved in some incredibly rewarding work.
My focus for 2020 was within the Design Language team – the team responsible for defining Booking.com’s first design vocabulary. This was a huge project that involved people from across multiple areas of the business and hence a lot of inter-company collaboration and strategic thinking.
I had several tasks and deliverables throughout the project inclding:
- Research & audits
- Iconography definitions
- Tone of Voice content design
- Design Language Wrap up package
- Flights IOS translation
- Design language portal
- App standards portal support
- Design Language Training
- US Track Research & Prototypess
01
research
challenge.
One of the first steps of defining a language is research. My job was to perform a number of internal and external audits to understand our current landscape. This would help us identify what needed to change and where out major opportunities lay.
deliverables.
In orderr to helped us to understand how other companies were approaching the design language and what we could aim for I completed the following research tasks: Resource audit, colour audit, element audit and a competitor analysis.
02
Iconography guidelines
Defining a Design Language is a huge task, so we divided and conquered. My role was to create the iconography definitions. Starting with understanding what definitions were available, what was missing and what needed to be adjusted, I eventually developed Booking’s guidelines for how to use, select and style icons across product and marketing.
This involved a lot of collaboration with:
- The Design Systems team through regular discussions and alignment sessions
- The design language team through weekly review and design critique sessions
- The design community through online critique workshops
deliverables.
Iconography guidelines documentation in Figma
03
Icon map
During the creation of the iconography guidelines, it came to my attention that one of the biggest struggles Booking.com had when it came to iconography was around the consistency in icon choice.
In short, designers had no guidance on exactly what icon to use for the various metaphors across the products. This meant that different icons were being used for the same metaphor or the same icon was being used for wildly different purposed.
So in an attempt to tackle this problem, I created an Iconography Map – a directory of all Booking.com’s icons and their current usage.
Creating the map involved an icon audit across both the product and vision work as well as collaboration with the design community to ensure we were creating the right (or generally acceptable) definitions for each icon based on current and ideal usage.
This was created both in Figma and a json mapping file to be uploaded in our system backend.
04
wrap up package
Once each ingredient was created separetely by the team, my job was to wrap up the work as a whole. This involved ensuring consistency in guidelines, design and examples across each of the sections, cleaning up the figma file for future use and creating the UX figma kit with templates and examples for designers to refer back to in the future.
05
Tone of Voice Guidelines
Tone of Voice was a key concept within the Design Language, primarily owned by our copywriters. However, upon creation of the initial guidelines, they required a great deal of support to tranform these into not only a set of guidelines that aligned with the other concepts but also something that was engaging to both designers and copywriters.
I supported the copywriters in restructing their work and adding a great deal creative flare to transform their word document into a capitvating presentation.
deliverables.
Tone of Voice documentation
The best part about this project was the feedback I received from the copywriters themselves:
“We’ve worked together only on the Design Language project, where you’ve been an absolute godsend! Your help envisioning the voice/tone content to final designs is mega – I’ve loved that you’ve given us constructive feedback throughout, helping shape the content to something much more rigorous. And more than that, seeing how invested you are to elevating it all is really empowering and encouraging. You’ve been the only designer we’ve had help from, and right from the beginning I knew it’d be a dream collaboration – energetic, dedicated, can-do. The final design looks amazing too, it’s given me, Jade and Fiorella so much self confidence not just in the work we’ve done up to this point, but in the full project itself – it shows what healthy, respectful collaboration between copy and design should be at Booking.com. “
06
brand standards portal
The first release of the design language was in the form of our first Brand Standards portal – aka how to use the design language to communicate our brand. This was mostly used for marketing purposes.
My role here was to oversee the creation of the portal as I was supporting a collegue transitioning of burn out with this project. This mean daily check ins, troubleshooting tech issues, quality assurance testing and upskilling both him and myself in Manual and markdown.
Together we successfully devliered the Brand Standards to the community both through an internal and public facing portal. I was also responisble for creating a process for external vendor access to our public site.
deliverables.
Oversee portal build in Manual
Support collegue transitioning from burn out
07
flights ios translation
One key task in defining the design language was to stress test it in the product environment. My role in this was to translate our current IOS flights flow based on our design language guidelines. For this task I combined what I had learnt during the development of the design language guidelines, along with inspiration from other translations my team had done to produce the translated examples below. I then worked with the flights team to understand their requirements and feedback before finalising the translation designs.
08
design language portal
Probably the biggest and most rewarding project within 2020 was the design and creation of the Design Language portal. I was the lead on this project from wireframe and structure to final design and build.
This not only invovled the design and build of a multi-page internal facing portal but also close collaboration with the Design Opportations and Design Systems teams to ensure consistecy and aligment in the existing documentation available online.
deliverables.
Portal wireframe in Figma:
Portal build in Manual
09
app standards portal support
With my new found knowledge of Manual and portal builds I was able to support a collegue within the App Shell team to build her own portal as well as upskill her in the process.
This saw me set up the initial portal in Manual, build some key pages for her to work off and create a training manual for her to learn from.
This project was done outside of my team deliverable.
deliverables.
App standards portal set up
Manual creation and design guidelines
the end
summary
My first year at Booking has been a formative one. I originally joined Booking to gain more experience in enterprise level design, more exposure to different ways of working and more skills specifically within the visual design space. Whilst it’s definitely been challenging year learning to navigate a new country and new job during a global pandemic, I feel incredibly fortunate to have not only gained what I was searching for but much more. I’ve also learnt more about resiliance, collaboration and probably most importantly, how to bring energy and enthusiasm into your average day Blue Jeans video.
interested
in working on a project with me?
“I would rather die of passion than of boredom.”
Vincent Van Gogh