Web Designs from Around the World: McDonald's
McDonald’s was founded in 1940 primarily selling burgers and fries; fast forward to a few decades later, the restaurant chain has 34,480 restaurants in 119 countries making McDonald’s the world’s largest restaurant chain and one of the most recognisable brands in the world. A global brand like McDonald’s will have a wide audience with different cultures and dietary needs. I will explore how McDonald’s advertise their products in different countries and the use of images and content.
Australia
When you first enter the website you are struck by a rotating feature just like other McDonald’s websites, however below the slider there are 4 grid boxes for different sections. The menu has been split into 3 distinctive menu items, unlike other McDonald’s websites which have more than 3 menu items. When viewing the menu you are met with a full-screen header which is a bit deceiving as when you enter the page you aren’t sure where the menu is until you scroll down. The menu is presented in a grid format with tabs for each category and the menu reduces or increases depending on the category. All the items are on a clean background which matches the background colour of the page. The product pages have a full-width header on the item and then the nutritional values are in tabs which expand when you click, however you will need to scroll down to view the values. The overview page is presented in a clean way, which highlights the products well.
Please note: The Egyptian website uses the same layout.
Austria
The Austrian homepage sticks to the typical content slider, however below the slider, its items are centre aligned and a smaller size than the page width, which is strange for a homepage leaving huge white spaces both left and right of the page. The menu page displays the items in a grid format with sections split by a heading and keyline. The page uses an interactive filter, which refreshes the list according to the options selected. The concept of the filter feature is great however the use of the filter seems clucky, this could be due to the fact that it takes a second for the list to refresh. You also have to remember to hide the filter once you have chosen your options otherwise the filter will stay on the page covering the items. The product page is presented in a clean manner which helps showcase the item and show the nutritional values and information about the product. There is a back arrow that appears on the header which takes you back to the menu page, however, if you open the page on a tab the button doesn’t work anymore. The placement of the arrow makes it look like it’s a glitch but the button does serve a function.
Brazil
The Brazilian website is much simpler with an image header and a heading below the header. They have used a grid layout to display products or offers. This would normally be in a content slider on other websites. The menu is not your typical mega menu, it incorporates images of the categories and you scroll from left to right. When looking at the burger section, the burgers are displayed in a grid layout with the images of the burgers themselves. There isn’t a CTA although you can click through to the product page. There is a hover state for each burger, which states the ingredients that are used to create the burger. The products page is simple with the use of icons for each nutritional value. Throughout the site there isn’t much imagery regarding family or enjoyment, the site is more to show off the products that are available to the Brazilian audience.
Please note: Argentina uses the same template
China
The Chinese website’s loading speed is slow due to the image-heavy site for mainland China. Straightaway you can see a huge difference. Firstly the layout used is a mosaic layout with images and text. Their homepage uses an infinite scrolling to display news and announcements. This makes the page slow to load, however based on the imagery there, they use a lot of cartoon/animated font styles which align to the cartoon/playful look that appeals to parents and children. The Chinese site uses a mega menu format. Clicking on the menu page, a vectorised playful header and tabs are used to separate each category with the products displayed in a grid layout. Their product page shows a nice simple layout that consists of a header and information about the product.
Germany
https://www.mcdonalds.com/de/de-de.html
The German website uses the website template from the United States, which is a clean white colour scheme. The homepage has a content slider advertising offers and between a more clean card approach. The menu page features left navigation, similar to McDonald’s self-service screen. Clicking on the item on the left refreshes the associated products on the right panel. The products page is clean with an image on the left and a brief description to the right. The nutritional values can be found in the accordion.
Please note: The United States website uses the same template.
https://www.mcdonalds.com/us/en-us.html
Hong Kong
https://www.mcdonalds.com.hk/en.html
The Hong Kong website has kept everything above the fold with the navigational mega menu on the left. The homepage features a slider which consists of banners showing offers, as the slider changes colour, the background of the homepage changes accordingly to the banner. This is a good idea, however it is not executed well as you can see it’s just a separate image underneath. When clicking on the ‘Our Food’ menu you are met with a straight food page with text links to the categories. They haven’t spent time trying to make the page fancy, they have just ensured that users can easily access the pages which are simple for the user to use. When you click into a category, they present the burgers on a fancy carousel, which presents each burger as you click along giving you that showcase feeling with the presentation. There is an option for a list view but the default option is the rotating carousel. There is no product page to show the nutritional value for the item, which does not follow the content across the other websites.
Please note: South Korea uses the same template
http://www.mcdonalds.co.kr/www/kor/main/main.do
India
https://www.mcdonaldsindia.com/home.html
The web design of the Indian website displays all content above the content slider if possible. On the homepage, you are welcomed by a full-width content slider display current offers and meals. This content slider dominates the whole page. When navigating to the category page, they have used a grid/table layout with sections for each type of product. This use of display for the variety of products is great as all the available products are viewed on one page. When you hover over a product the nutritional values are displayed. When clicking on the product themselves, all the information is displayed above the fold with the simple full-width image and text with a CTA that displays the nutritional value.
Japan
When viewing the Japanese site you are first struck by the bold auto slider. You can see the Japanese market likes bold striking images with impactful font types. The homepage has an organised structure with a lot of visuals although keeping with a clean colour scheme to allow the colour banners and images to be eye-catching. The menu using a tabular format is the same as a couple of other McDonald’s websites to organise the variety of different burgers, drinks and chicken nuggets. Each product photography is clean without any distractions, hence allowing users to find the product they are looking for. Clicking on the product page shows the profile page of the product with the image to the right and a heading. The tabs show the nutritional values. With the clean colour scheme, it allows the information to be easily digestible.
Qatar
https://www.mcdonalds.com/qa/ar-qa.html
The Qatar variant is imagery driven. The homepage is occupied by a full-width content slider displaying deals and events. Below that there are four sections in a grid layout that have image backgrounds with text and CTA overlays. When viewing the full menu page, they show the more popular items in carousels with each item displayed as images. Each section has a ‘View All’ link to display all items in case you can’t find your desired item. When viewing the products page, the page is again dominated by a full-width image with the main ingredients displayed as individual images on a full-width banner. The more technical information is in tabs, which expand when triggered.
Russia
https://mcdonalds.ru/?ver=flash
The Russian website seems to follow a similar layout design to the UK. The homepage has a content slider displaying offers. The images used in the slider are bright and bold with heavy use of blue to match summer colours. They have incorporated the McDonald’s yellow into their advertising. The logo used on the website is just the yellow ‘M’ in the McDonald’s logo. Below the homepage slider, they have a few sections which utilise tabs and they are set to automatically change tabs after a certain amount of seconds. Some of the images used for some thumbnails show family and people giving that family vibe to their McDonald’s restaurants.
The product menu page is displayed in a grid format with text and images for each category. Once you click into a category page, it follows the same layout using a grid format however, they have used a tab function to separate each type of burger to ease the user experience.
South Africa
The South African website sticks to using a full-width carousel, however they have opted for a page width one. Below the carousel, there is a grid layout showing 6 distinctive categories. Each category is represented by an image that enlarges when you hover over them. The menu page uses the same grid layout split into sections like other sites however, the filter options are represented as icons. I also noticed that the header states that the tableware in the photography isn’t included which is the only website to state that. The product pages are presented in a two-column layout with the image on the right and the nutritional value on the left. The more detailed information such as ingredients can be found in an accordion.
Spain
The first thing you notice is that the logo and colour scheme have been changed to green going away from the traditional McDonald’s red. The reason for this is that McDonald’s is changing its European restaurants to be more eco-friendly, therefore the change of the logo is to reflect this message. There is not much use of animations on the Spanish website. There isn’t much interaction for the user, it’s just a simple click to go to the next website. They have not utilised the space on their category page that displays the different types of products they offer. All the types of products are displayed on the left with special meals displayed in the middle. The product page is simple with an image of the burger and nutritional values displayed in a graph.
Thailand
When visiting the Thai website the first striking feature is the width-rotating feature, which advertises certain events or offers. Below the slider, you are met with a structure clean layout using the traditional colours. When viewing the menu page, there is secondary navigation showing you the variety of categories, so when the category is clicked then the page below refreshes with the corresponding items. The items are shown in a grid format, however there isn’t a product page for any further detail of the items.
United Kingdom
https://www.mcdonalds.com/gb/en-gb.html
When you first load the United Kingdom website, a full-width content slider with bold images that introduces its special products being offered comes into view. Meals and burgers displayed in a grid format with large bold images to entice your appetite with a simple CTA.
Browsing throughout the site you are met with clean photography of the products they sell and a lot of family imagery, showcasing a family vibe restaurant that you want to take your family for a meal.
Conclusion
From what I have seen from a number of countries, I can see some similarities and differences between the websites. Firstly, almost all of the sites I visited used a rotating slider to advertise their regions offers and selected products. However, the content themselves varies depending on the region. The Asian countries prefer to have striking banners with plenty of bright colours and bold font types to catch your eye. While the European countries and Australia prefer subtle contemporary images allowing the products to speak for themselves. The Chinese website uses a lot of imagery on their homepage causing slow loading times on the Chinese site.
Most of the sites have adopted top navigation with a mega menu. Australia has reduced the number of items in the top menu to 3 distinct categories which will cause users to click even more to get to a product page. On the other hand, this implementation will make it easier for users to choose from. Meanwhile, Hong Kong uses left mega menu navigation through which their menu page uses simple hyperlinks to the category pages.
Regarding the menu page, most of them have implemented a grid layout with distinct sections. The German and USA sites use the same implementation as their self-service machines which is great for user experience as the user will be familiar the with layout.
There are countries that use the same templates as others such as Brazil and Argentina using the same template, which could mean that the countries’ demographics are similar to each other so they can use the same template. While many countries have created their own bespoke templates and layout to cater to their audience and demographic, some countries do have an option to flick between their native language and English. Some countries have this feature because English is their second language so it’s best to cater to both languages.
All the sites use a clean background to allow images to pop up and catch the audience’s eye. The navigation menu is simple to use and the method of getting to the products is bespoke to the individual sites. The examples shown above show that every country needs some kind of personalisation to suit their audiences. There isn’t one template that fits all, with different languages and cultures the design of the site will have to adapt to the country rather than the country adapting to the web design. I have learnt from this research that web design needs to meet the demographic demands and needs in order to make the user experience simple. When designing a website for another audience in a different country I will need to consider their users. I cannot assume that a user experience in one country is the same in another.