/How we built/ McDonaldsMenu.info
27/07/2006 | Filed under Design > How we built
Chris Hassell explains how Ralph created a healthy site for McDonald’s
When working with a big multinational brand such as McDonald’s the design and branding work is usually done by a number of agents. For this project we worked alongside Birmingham-based design consultancy Boxer (www.boxer.uk.com) and brand specialists The Marketing Store Worldwide (www.themarketingstore.com). Boxer won the global packaging account about three years ago, which put it in a good position to take up the challenge of designing a labelling system that was relevant to McDonald’s consumers and that spoke to them on a level they could understand and engage with.
When the team at The Marketing Store started working on the McDonald’s nutritional project, Boxer was asked to do the design of the communication platform and consider the best way to engage with consumers, and, bearing in mind the fairly staid topic that nutrition is, this was a challenge. Boxer approached us at Ralph when it was decided to do a trial run of a kiosk and develop the web site.
We conducted a prolonged trial period, which took place in Spain and Scotland and stretched for about three months last year. The actual development of the site then had to proceed quickly before and after Christmas because we had to have it ready to go live in Italian, French and English in time for the Winter Olympics starting on 10 February. In the event, we had the site up and running early in the new year, and it received some good publicity during the Games.
We had already completed a number of completely different multi-lingual web sites in 2005, and the experience gained in the development of these was invaluable for the development of McDonaldsMenu.info. It’s also been interesting learning the global legal and cultural checks that need to be done regarding various design components, such as icons and colours.
The concept
The site is designed to be very positive and uplifting. It’s based on the iconography and design that Boxer had developed for offline material, including packaging and tray-liners. The nutrition icon system Boxer created for the brand’s packaging is based on five graphic icons that represent key nutritional elements – calories, protein, fat, carbohydrates and salt.
A trial of touch-screen kiosks were developed for use in Spain and Scotland, and these were amended numerous times based on consumer feedback for a few months last year. This provided a great platform for the development of the site interface. The navigation was developed in several different forms for people to test, and this was done without content on the site.
The original brief was essentially to communicate what was in-store online, in addition to providing a resource for even more detail, and a place for people to visit when it’s not possible to have the full nutritional information on packaging.
Working closely with Boxer we had a great deal of input on the structure and design of the site and this has been one of the great things about the project. We knew there were to be certain requirements to take into consideration – the single biggest being multiple languages – and we were able to advise about factoring these into the design from the outset.
Building blocks
We didn’t want the site to be too graphic-heavy or rely on a lot of buttons with text inside them because, with the varying length of words in the languages we had to allow for, this could have created all sorts of problems. Having a layout that worked across multiple languages was, therefore, very important right from the beginning of the project.
Designing the site template to work effectively for all languages meant we had to make the navigation and whole structure of the site very icon-driven. It also had to be kept simple to ensure the site would work across the various different languages in Flash and HTML.
Everything in the site had to be easy to use, especially the menu calculator. As soon as we had the menu calculator in place we were able to get a better idea of how valuable and informative it was. Visitors to the site can discover their own Guideline Daily Amounts (GDAs), and then pick items from the McDonald’s menu to see how different combinations contribute to their recommended daily nutritional intake.
For the construction of the site, every screen was created as a flat first and presented as though the site was being browsed. Then we moved on to developing the Content Management System and produced a Flash-animated site that encourages customers to interact and play. The graphics are fun and bold, and the layout of the user interface intuitive. The bright colours create a friendly feel, which is totally in contrast with the cold and sterile feel inherent in traditional nutritional sites. We also produced a pack for each territory to use when preparing to roll out the site. Due to the way the site has been developed, this is easy to implement and manage.
The site is heavily XML-based, utilising JavaScript to manage this data through an extensive Content Management System. The content is also passed into Flash via XML. Fireworks was used to create any graphics that didn’t use Flash, and the HTML parts were put together using CSS 2.0.
The visitors
It’s amazing to see how keen people are to make informed choices about what they eat. The number of visitors to the site is increasing daily and will continue to do so as the fully multilingual version of the site is rolled out across Europe later this year. Details of the site also appear on McDonald’s packaging and tray-liners and this will help to raise awareness of the initiative and drive traffic to the site.
McDonaldsMenu.info is aimed at everyone interested in making an informed choice about what they eat at McDonald’s. Boxer also designed free pocket guides and tray-liners to help promote the site, along with communication material designed to help employees emphasise the project in-store.
Comments
Nate K / 27/07/2006 / 14:43 / http://www.theklaibers.com
Definitely not feeling the Flash and mystery meat navigation. It just wasn't that impressive. Yes, there was information there - but I had to dig around to find things - and then had to wait for them to load.
Personally, I wouldn't consider this site 'healthy' - but then again I guess *maybe* I am not their target market. It just seems outdated with the design, mystery meat navigation, and overuse of flash.
djn / 29/07/2006 / 09:13
Not my cup of tea really, an exorbarant use of Flash. I would recommend taking a look at Jakob Nielsen/Hoa Lorangers 'Prioritizing Web Usability book; for me the site lacks any good usability.
Tony Geer / 31/07/2006 / 03:34 / http://www.tonygeer.com
I closed the site after I was told I had to click on one of 4 or 5 different circles to get to the content, without having any idea whatsoever about which one meant would lead me to what. Not impressed.
Calrion / 01/08/2006 / 09:48
I have to echo the earlier comments.
If I were a normal user, without a specific and significant interest (based on the article) in the site, I would have left after the first page. (Why are there only three languages? Why are they all cyrillic? Why are there down and up arrows if they don't do anything (when clicked)?)
Standards (HTML, XML, CSS) are there for a reason. Drop-down boxes look the same across all major operating systems (including the default Flash widgets) for a reason: people recognise them and know how to use them. This is the biggest advantage of the GUI -- users don't have to learn new applications from scratch.
Many documented benefits are gained by utilising the above standards; they include lower page load times, better browser compatibility, improved accessibility and more. For more information, and to get started, visit http://www.webstandards.org/.
I'd also like to note that I'm not anti-Flash. Flash is great! It's very useful for particular things, but it's not well-suited for whole sites.
Mikkel / 01/08/2006 / 23:51 / http://www.create4web.co.uk
Visually the site is absolutely stunning.
In terms of usability, I have no idea what was going on. I didn't click the mouse once and pages kept changing on me as I moved the mouse. i felt like I had no control over the experience what so ever.
Iain / 02/08/2006 / 19:13 / http://www.halogengraphics.com
The graphics are hardly ground breaking and not intuitive at all, the site pauses everytime you change section (and I'm on a 8mb connection!) and even if it didn't I struggled to know where I was going and for what reason. Even with these short falls it could have at least looked like a MacDonalds product but didn't.
I know it's trying to put a good spin on the healthy side of MacDonlads but I just don't get the point of it. Waste of time, got bored after about 5 minutes, closed the window, will never go back and it doesn't even have the UK as a country of residence at the start menu!
Francis / 05/08/2006 / 00:22
What a usability nightmare. First of all there seems to be no UK option for country of residence and yet you trialled the site in Scotland! Surely a better way to do this would be to filter on language rather than country of residence, or do McDonalds not want entire populaces (for example UK residents) to access the site?
It's never a good sign when you have to put a prompt on the screen telling people how to navigate the site. And you do that twice with the "use the coloured circles to navigate" text! I also appear not to be able to navigate through the site using my keyboard. I can tab through part of the page but then get stuck. For example on GDAs (no abbr/acronym tags?), I can get as far as the right-hand "information" bar and that's it - I can't get to the Flash-embedded "proceed" button. Was even basic accessibility a concern or does McDonald's not care about its disabled customers?
I could go on, but I think you get the idea.
"McDonaldsMenu.info is aimed at everyone interested in making an informed choice about what they eat at McDonald’s": You may like to think so, but the reality is somewhat different, unfortunately.
Jason / 12/08/2006 / 18:20 / http://www.greenlush.com
I like this its great, its not going to make me go to macdonalds though, but its seriasly well made.
nacrenos / 16/08/2006 / 00:56 / http://blog.nacrenos.com
I've visited the page before I read comments for this article. I was almost thinking as "what is wrong with me?? Is it ordinary to hate this site?? This site is rewarded to have an article about, on netmag!". But after reading the comments, I've taken a deep breath.
This site is absoletly bad designed. It has nothing to be attractive except natural effectivness of the light colors. I can't even see "u" letter of usability on this site. So crowded, so tiring and so boring. Frames are organised in a very bad way too.
As a result, I think it is an unsuccessful project.
Robert Sargent / 25/08/2006 / 10:38 / http://www.therecreationground.org
Poor navigation and the flash content crashed Firefox when i tried it on a slower PC!
dave / 05/01/2007 / 10:38 / http://www.davidgafford.co.uk
Absolutely dire navigation - there may be useful content in there somewhere but how the fcuk are you supposed to get to it.
It amazes me how companies can get away with producing such rubbish.
Whoever did the usability testing must be very patient and calm people, i lasted about a minute before i got bored and frustrated.
Dan / 23/01/2007 / 13:11 / http://www.thisishartlepool.co.uk
I always hate sites designed fully in flash but this one just takes the biscuit- how are you supposed to navigate round the site?!! It takes ten times longer to find the information you want because of the dire navigation.
As for anyone needing accessibility - unlucky!
McDonalds - sack this company and get a decent site that people can actually use.
Rob / 21/04/2007 / 19:03
While the graphics are nice, the site is overdone and the navigation is not intuitive. I also have no idea why I should care about this site or what the main message is.
C-
