CLIENT
Booking.com
ROLE
Design director
AGENCY
AnalogFolk
Booking Loves
Unlocking brand relevance with data-powered storytelling
Few companies are powered by data like Booking.com. As a digital company, driven by constantly testing and optimising its platform, it was making surprisingly little use of other digital channels to drive traffic. In fact, most of its advertising muscle was still TV-based.
Its ATL ads sold the ‘click to book’ moment. Except, there was a lot of competition for that moment, even from Google itself. That’s awkward given that Booking.com was spending $1 billion per quarter with Google on search advertising. The brand needed help to stand out in a sea of functional choices and make it about more than just booking.
Booking.com is driven by data, and so was our campaign platform. Booking Loves uncovered and retold the human stories in Booking.com data, transforming the brand from a booking engine to a consideration engine.
From football to food, shopping to beaches, Booking.com data told us all the passionate reasons people travel, and these passions were the compelling launch pad for multiple interest-led campaigns, especially when combined with seasonal insights and our wide knowledge of travel industry trends.
VIDEO TEST
/ Ambition
HSBC understood that establishing a global digital design system was necessary to create a better customer experience with competitive products and ensure long-term business efficiencies. The aim was to deliver its brand promise by providing design and development teams with tools, components, and standards to create customer-centric experiences.
The Global Digital Standards — showcased here — would help form HSBC's evolving Design language. The standards need to be:
- simple, digestible, and comparable with other top-tier design systems
- responsive, native-first, and accessible
- able to balance best-practice with HSBC's unique requirements
- based on lean working practices
/ Context
HSBC’s Global Digital Design System would comprise six components: Design thinking, Community, Review and alignment, Measurement and performance, Tools, and the Design language.
The modular Design language would sustain the business’s new brand direction and help build products better and faster. This language would support the Design and implementation teams with the Master brand (Including brand identity guidelines), Global digital foundations, Global digital standards, and Programme toolkits. All of these tools and guidelines would live on HSBC’s digital hub, Create.HSBC.
/ Role details
AnalogFolk was one of HSBC’s longstanding partner agencies and had been entrusted with many prominent projects. I was appointed to lead the agency design team on this project as I had previously steered the design of HSBC’s Corporate Design Language (CDL) and provided oversight to the HSBC Design Review Board (DRB).
My understanding of HSBC’s global design challenges was supported by the knowledge I had gained from previous projects: the brand and design language for their corporate and retail business programmes.
Over the course of 2 years on this project, my role covered a variety of functions including participating in early foundational design system strategy workshops, visual design direction, partnering with Experience design to author content, collaborating with the HSBC business programmes' creative teams, hands-on design, and presenting weekly to stakeholders including the Head of Design System Operations and Head of Global Digital Standards.
Ultimately, I was responsible for AnalogFolk’s design output to HSBC for this project.
/ Global digital foundations
These are the fundamentals of HSBC experiences that apply across standards and contexts. They are the starting point for bringing the brand to life and root the design language in the brand and include: colour, typography, responsive behaviour, and elevation principles.
/ Digital standards framework
The HSBC design language is based on a modular system composed of elements, patterns, and templates.
Elements
These are the smallest usable modules in a design interface that can come together to form a distinct experience.
Patterns
Patterns are created by combining elements into functional modules. They can be repeated in different contexts to ensure consistent experiences and more efficient design and development.
Templates
Reusable interface layouts that have been designed for a particular journey stage, use-case, platform, etc. They can be reused across HSBC’s digital estate to facilitate experience consistency and brand presentation.
The majority of the standards we created covered the first two categories, providing the basis for teams to continue evolving the standards.
/ Programme Toolkits
Programme toolkits were designed to work alongside the Global Standards by providing sketch-based assets to build out designs across workstreams and specific business programmes like retail, corporate, SMB, private wealth, etc. Our Global Standards team obviously had significant cross-over and had a very close relationship with the team creating the toolkits.
/ HSBC's Hub
HSBC’s digital hub, Create.HSBC is the repository for all components of the Design Language as well as tools, assets, news, and knowledge-share for the design community.
Of course, our Global digital standards live here too. The hub's taxonomy had to cover this wide range of content which meant there were some constraints to the navigation system.
While we collaborated with the Create.HSBC design team to define page structure and layout of the standards, we were constrained by their design as well as the Adobe Experience Manager system.
/ Standards structure
During the proof of concept (POC) development, we tested various structures to serve as types of templates. The sheer variety and hierarchy of the types of standards would not be able to work as a strict template so a modular structure was devised as a set of guidelines.
The sections would appear in the following recommended order (*with those marked with asterisk recommended as mandatory):
Introduction*, Usage*, Types, Structure*, Placement, Content display, Behaviour, Examples*, Copy guidance, Technical specifications (including Accessibility)*, Access information for corresponding Toolkits
Do’s and Don’ts were used to help clarify misuse that was identified through governance from common user questions or problems arising in design reviews.
The aim of the system was to keep the standards consistent and assist information findability.
/ Animation
Even some of the simplest UI behaviour can be complex to explain with words or images alone.
We made use of animation to demonstrate certain concepts of interaction and transitions. These ideas were scripted, storyboarded, and animated to help designers quickly get to grips with the intricacies of some of the standards.
/ Pictogram illustrations
Each standard needed to have a visual identifier — something simple that could work effectively as a thumbnail. While some of these, like buttons, might have straightforward solutions, more complex patterns could be challenging to illustrate.
Using actual UI elements wouldn’t be visually engaging and might be confusing to users so we wanted to create a set of pictograms that could be a bit more abstract and conceptual where necessary. Each one was required to communicate the relevant standard but all of them needed to work as a set with visual consistency.
It was an enjoyable mini-project and in the end, I created over 60 of these, leaving the HSBC team with the foundation to make new ones as the standards expand.
/ Project success
The Global standards have been seen as a great achievement as it brought a comprehensive system to the HSBC Design Language. With such a strong modular foundation, it continues to grow and evolve.
Not only did the output of the standards meet the aims of the brief but they played a fundamental role in establishing a valuable design culture through the design process. By engaging with the various teams across the world a forum was created which allowed for all voices to be heard. Cross-programme collaboration led to solving shared pain points and exchange of insights. This instilled alignment and collective responsibility.
A sense of ownership cultivated teams of ambassadors to promote the standards and streamline future development.
