Analyzing Booking.com from a Design and Accessibility Perspective. Why Even Such Projects Have Mistakes
My name is Oleg Antoniuk. I have been working as a senior designer at EPAM for two years. Recently, my colleague and I, as part of the XD Community, conducted an express analysis of the Booking.com site in the format of an impromptu UX Busters battle. During this analysis, I was surprised to find many typical mistakes usually seen from junior designers, which seemed impossible for such a popular commercial product. How did this happen?
Let’s try to figure this out in this post. We will also explore the service’s accessibility for users with various disabilities, and discuss how this aspect can be enhanced with the help of artificial intelligence.
Please note that this material is purely a translation of the original article which was published on the DOU website. The aim of this translation is to make the content accessible to a wider audience and does not involve any alterations to the original meaning.
Overview of Visual Design Component
Just like a person, a product makes a first impression through its visual appearance. Booking.com looks completely fine from that perspective; it has a neutral color scheme, large real estate photos, stylized illustrations, a well-developed visual hierarchy of elements, and short, concise texts. As a user, I immediately understand where to start and what to look at if I don’t yet know what I’m looking for.
The devil, as always, is in the details. Even if there are only a few complaints about the main page, the description of a specific real estate object is enough to make your remaining hair stand on end:
Color. Different elements on the page use varying shades of the same color. For instance, the color blue appears in at least three different shades, each with varying levels of saturation. Errors on the page are indicated by a color that ranges from bright pink to light red. Given the diversity of colors and shades used across the site, it appears that there may not be any established color styles in the design system.
Icons. There is complete chaos here. Within a single screen, one can observe two sets of icons that duplicate each other, but are executed in different styles. Take the property characteristics, for instance: they are depicted with filled icons. The popular features, on the other hand, are represented with contour icons. As you scroll further down the page, you’ll come across a table with available apartments. Upon closer inspection, you may notice an icon of a sofa and… a coffin? Or perhaps it’s a double bed — it’s somewhat difficult to identify. Joking aside, it’s clear that different graphic designers created these icons, or they were sourced from separate sets.
Indentations. The indentations on the site lack consistency. In certain areas, the gap between elements is huge, while in others, it’s so small that it becomes challenging to determine to which paragraph a header belongs. The proximity rule does not work and this inconsistency could cause confusion. Similarly, the inner indents within blocks also vary, further contributing to a lack of uniformity.
Error messages. Traditionally, error messages appear in various styles: some are flat, featuring an arrow (like a dialogue bubble in comics), others appear three-dimensional, complete with gloss and shadow effects. There are also messages with double outlining, messages presented in the form of a modal window, and text-based messages accompanied by an icon.
Modal Windows. These also vary in style and placement on the site. Some appear centered on the screen, while others align to the right side. Some modal windows contain a large button with text to close the window, while others are more minimalist, limited to a simple cross icon in the upper right corner.
The list does not end here. Take, for instance, the design of the table listing available apartments. Here, the borders have varying thickness and fill colors, and the content within the cells at times appears to be aligned unusually.
Upon returning to the main page, you can notice that the illustrations are performed in different styles. So what is going on here?
Attempting to Find the Root of the Problems
I have significant experience working in large teams. For example, in the current company, there are approximately 100 designers. It’s hard to imagine how many developers and managers are involved. Companies have to make a great effort to make this whole machine move in the right direction. Hierarchies are established, with numerous small teams focusing on specific aspects of the product.
We often have situations that lead to problems similar to those encountered on Booking.com. If teams work autonomously without sharing experiences, several solutions to the same problem can arise.
Let me give you one of the recent situations in my practice. In several web applications, error notifications were displayed differently despite the existence of the design system. To address this issue, a decision was made to gather all available options and consolidate them into a single, cohesive style. Once approved, the new design was implemented across all applications, resulting in consistent error notifications.
Get Oleg Antoniuk’s stories in your inbox
Join Medium for free to get updates from this writer.
Large projects like Booking.com also face challenges due to divided responsibilities among various teams that may not regularly share experiences. Additionally, changes can be implemented at a slow pace in such contexts, leading to delayed visual improvements.
It’s important to consider A/B tests, which are regularly conducted by product companies. It is possible that we may have encountered one of these tests, or previous testing may have indicated that the visual elements in use contribute to higher conversion rates.
Often it happens that developers refine functionality without the help of designers. This happens even in large products, so we cannot discount this scenario either.
Ways to address the situation
- It’s crucial to periodically share experiences among teams. On my project, we hold such meetings several times a week, which allows us to collect interesting ideas and receive constructive criticism. Designers showcase their latest work, while developers and managers ask clarifying questions. Developers hold demos, and designers provide feedback or suggest adaptations for specific situations.
- For prevention, update the design system documentation with examples of component applications regularly.
- At an even higher level, it’s essential to convey the idea of openness to collaboration to every specialist. That is, anyone can approach anyone with a spotted problem or even a proposal on how to solve it, regardless of who they are or what team they work in. This principle is well-developed in small startups but is challenging to cultivate in large companies and corporations.
Accessibility review
Well-implemented accessibility allows individuals with physical disabilities to effectively use the site, enhancing comfort for everyone. Booking.com demonstrates good accessibility practices, but there are still areas for improvement:
- The contrast of text and icons generally meets AAA rating standards under the WCAG (Web Content Accessibility Guidelines) criteria. However, a few isolated icons could benefit from increased contrast for better recognition.
- The size of the key text elements exceeds 12–14 pt (equivalent to 1–1.2 em or 16–19 px). But there are quite small texts with a font size of less than 12 px, which may pose challenges for individuals with dyslexia. It’s important to address this issue.
- Images and illustrations have alternative text that can be read by a browser for people with visual impairments. However, for the apartments, the alternative text lacks specific details, making it difficult to understand what is depicted. In the following section, I will propose a solution to enhance this using specialized neural networks.
- The sequence of keyboard focus for interface elements (when user presses Tab key) is generally logical, but there are cases where the focus unexpectedly jumps to unrelated elements. It’s essential to correct the sequence to ensure a more comfortable experience.
- When using filters to search for real estate, there are cases when additional scrolling and waiting for data updates are required before setting next criteria. To address this, consider incorporating a “Apply” button that allows changing a group of filters at once.
Improving Accessibility with Artificial Intelligence
Building upon the previous section, let’s address the issue of repeating alternative text for apartment photos that fails to describe the actual content of the images.
Imagine how cool it would be to give people with visual impairments the ability to listen to a detailed description of each photo! With the current pace of AI development, this can be done. ChatGPT version 4 has the ability to work with images and has opened access to the API via plugins (an application needs to be submitted).
Imagine the possibilities of providing detailed descriptions for each photo, allowing individuals with visual impairments to gain a comprehensive understanding of the image content. With the rapid advancements in AI development, this vision can become a reality. ChatGPT version 4 now includes the capability to analyze images and has opened access to its API through plugins (application submission is required).
Once developers gain access to the API, they can send each photo from the database and request a textual description, which can then be inserted as alternative text.
Another option is to explore the Hugging Face aggregator, which offers a vast collection of trained models. In the dedicated section for object detection models, you can find suitable options to detect typical items such as furniture, decor elements, lighting, and more. Although the process might be more involved compared to ChatGPT, it provides the opportunity to create descriptions based on these detected elements.
In conclusion
I hope you found this analysis useful and interesting to read. I would appreciate hearing your thoughts and experiences on working in large teams. Please feel free to share your comments below.
To learn more about the topic, I recommend exploring materials on strategies for working with large teams. You can find valuable insights in resources such as this article on design consistency and this guide on working with a huge team.
Additionally, it’s worth checking the latest statistics about people with dyslexia to gain a deeper understanding of their needs and challenges.
Thank you for reading, and I look forward to further discussions and exploration of these topics.
