starfish_admin

The Many Web Designs of McDonald’s

If you want to see how culture, budget and design execution can produce different results, McDonald's is the place to go.

Why study McDonald’s websites?

The McDonald’s set of websites are one of those rare examples of a global company that has different websites selling the same thing in different ways all over the world. 

Most global companies have one website with one uniform design with possibly a few design tweaks per county here and there. 

Imagine the amount of talent, agencies and money involved in keeping these websites looking so good. 

You can learn quite a lot from their websites, building up an appetite for web design and hamburgers at the same time.

What you will learn from this

You will learn how small changes can make a difference, that there are lots of considerations to take in when designing a website and results can vary.

If you’re a designer or looking to build a website with an agency (like Starfish) – this should give you some appreciation into where time and effort goes when making sites.

Hopefully you will see:

 

  • What makes a good website

The Website Money Shot

This is the shot that sells. The hero image, the big impact shot that gets them emotionally involved and thinking with something other than their minds – their hearts.

Actually for McDonald’s they usually have a slider and the food shot is one of them, the others include people and special offers. 

Color combinations for your hero shots

Add Your Heading Text Here

Ask yourself – what is the tastiest looking burger. To me, its the Maestro burger. They are all essentially the same burger but whats different with the Maestro is the deep blacks, the bright greens and shiny bun. 

The lesson to be learnt here is spacing, color contrast and color palette. Compare that to the Russian Big Mac which looks washed out and dry.

Contrast is your friend. To me, the Big Mac on a black background stands out the most.

The Main or Top Level Navigation

There are several variations of navigation. McDonalds used to favor the side navigation, as can be seen in the Moldova website, which looks rather old but now they have all gone for horizontal navigation, probably due to the rise of smart phones.

 

variations in navigation_0000_Moldova
Old style vertical navigation courtesy of Moldova

Fat navs AKA Fat menus

When you hover on the navigation, do you see the sub level navigation? The variations are quite large but the ones with images obviously are more attractive and easy to use. 

The point is to make life easier for your guests to find what they are looking for, whether they know what they want or otherwise.

 

variations in navigation_0006_Argentina
Fat menu with scroll
variations in navigation_0003_Francis
Nice fat nav with highlighted special offers
variations in navigation_0008_Greece
Fat nav with too much going on

Number of navigation  headings

There are between 3 and  8 menu items. Five menu items seems to be the ideal, any more than 6 and you should think about grouping the menu items into primary, secondary and even tertiary groups.

 

variations in navigation_0007_Sweden
Example of primary, secondary and tertiary navigation

Primary Navigation (should be h4)

The theory is that people with the least attention can see the most important things without trying 

Secondary and Tertiary Navigation (h4 but looks like h3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Cryptic Navigation

The Australian version of McDonalds’s tries to keep things simple. Possibly at the expense of clarity. Eat, Learn and Play seem simple enough but I’m not sure that’s how people think.

Also, having 3 unusual top level navigation links, leads to a complex set of sub navigation below.

variations in navigation_0002_Australia
The Cryptic Navigation of Australia's McDonald's Website

Cultural Sensitivities - Workers and families

The genius of McDonalds and other global consumer goods is that they know how to relate to a country’s sensitivities so that the brand feels comfortingly local, even though everyone knows its comfortingly global.

You’ll notice that not only do they people in these photos belong to the country they are from, but they are the right level of attractiveness and race so as to be appealing, relatable and inoffensive.

Even for a small, local companies, its important to play to the local market. This means being sensitive to race, preferences over pretty people over real people or vice versa. 

 

The importance of "real" people in your website

Look at these photos from another angle. These people almost look real – in other words, they don’t look like models – of course, we know they are models but we allow ourselves to be fooled.

That may be obvious but how websites do we go to that look super fake because the fotos are clearly stock photos.

Photos, whether they are of people or hamburgers need to look real even if they did spend 2 hours in makeup. 

 

 

Tips for photos on your website

Its okay to use stock photography but try not to break the illusion that they are real. Try to not use the prettiest model, the guy with the perfect cheesy smile, look for someone that’s humanly flawed.

Use real photos to do this – make sure that the photos are staged (2 hours in makeup) since people don’t want in-your-face real. They want the illusion of real.

Use people, use things that bring emotion to the table. That’s what photos are for! Everyone knows what a person looks like or a Big Mac for that matter – photos draw emotion, not describe facts.

 

Creative layout ideas

When making a website, its hard enough designing it without taking into account factors of design maintenance and up keep. 

Here we look at the how the distinct Chinese and Israeli versions of the a website have fared of the last two yours. 

Two versions of the Chinese McDonald's Website

I was very impressed with the bold look of the Chinese website. With its card design, which I think was quite the trend a couple of years ago. It has the benefit of being flexible and mobile friendly.

The draw back is that the lack of structure makes it hard to give a strong overarching user experience. 

chinese-McD-before-and-after
Chinese website 2018 and 2020

The layout has aged well and has been repurposed to go with the new color scheme and content.

It’s worth noting that the inner pages have a normal layout, 

Two versions of the Israeli McDonald's Website

The original version of the site, the one on the left was a pleasure to scroll down. It was colorful, interactive and full of love. Its was easy to see the appeal of the modular approach. 

Israeli-McD-before-and-after
Two versions 2018 and 2020

However, the layout on the left, the old version looks a lot better than the one on the right. It has a far more congruent look with most images being green and black. 

Once the content changed, even though it follows a consistent color scheme, the modular look see to fall apart.

In reality, once marketing gets hold of the designer’s carefully curated design, the togetherness of the design starts to fall apart.

Take home tips about choosing a layout

Its hard to keep a website looking good and coordinated when the content has to change all the time.

You’ll often see a design fall apart, once the content has been modified over the years. This is normal but what it means is that you’ll need to bring the look and feel together again through small tweaks to entire website – not an easy job unless you have a strong eye for design.

Another option is to choose a design that’s less fussy. Once with white space, that follows standard layout conventions and doesn’t require you to worry about how photo will look when placed up against each other – as they do with card design.

McDonalds USA - a closer look

McDonald’s may be trying to bring some design consistency across the range of their websites. This could be to save on cost and to have a unified global brand look. 

To me the design looks a bit too clinical and modern. Certainly flexible and clean but impossible to create an immersive experience when layout is predetermined.

 

2018.www.mcdonalds.com
The old look
2020.www.mcdonalds.com
The new look

Corporate have lost their mojo

The aim seems to be create a useful, fast to load website that has easy to read text.

What’s gone out of the window is the passion for tasty, juicy burgers. The burgers literally look dry, the shot of the girl looks flaccid – why is she so happy with her fries?? She seems to be smiling inwardly, rather than outwardly and making a connection with someone dear to her.

Where is the joy, the family, the love, the connection? 

Full Range of Services