Orangina’s homepage

The website for Orangina is dripping with character (pun intended). It’s fun, colourful and alive. In this edition of Learn from Great Design, I will be looking at how an external design agency has breathed new life into the website of a drink brand almost 80 years old.

Having just been to Japan for six weeks, as part of travelling the world for a year with my wife, soft drinks have been a source of fascination for me. The selection in Japan is tremendous, so when I came across the Orangina site, I immediately knew I wanted to review it because we can learn from the great design and also because the fascination born from my time in Japan.

Shake Things Up!

I actually noticed Orangina bottles while I was in Japan (Orangina is currently owned by a Japanese company called Suntory) but I didn’t ever have the urge to buy one because they didn’t stand out to me in the sea of amazing drinks in the vast array of vending machines and combinis (convenience stores) all over the country. That was probably because I was wowed by all the new drinks I had never seen before.

Orangina’s heritage page

I used to love Orangina as a kid. It seemed special to me because of the bottle, but without realising it, I saw their drinks as “old and tired” once I got older and haven’t drunk one for about fifteen to twenty years or so.

Orangina are rebranding themselves in an attempt to stand out again, with design agency Achtung! taking up the role of the creative work. As a starting point, here’s the recent posters they created:

Orangina’s new poster designs

Personally, I find the posters to be a bit plain, and what on earth does a overweight topless man, stretching in exercise gear have to with shaking things up?! The other two posters look really nice visually but they don’t really stand out. They’re generic and the message gets lost. They certainly aren’t anywhere near as iconic as the old posters for Orangina:

Orangina’s old iconic poster designs

Now, those are great designs, even if a little dated. Anyway, I digress. Wasn’t I supposed to be reviewing their website? Of course, this is Learn from Great Design in web design but I want to demonstrate what the website does that the posters don’t, and that is, stand out.

The analysis is split into the following sections: branding and visual design, photography, animation and typography. These are the key areas of the new Orangina design.

Branding and Visual Design

Previously, in the first issue of Learn from Great Design, I showed you why Avis are miles ahead of their competition. Orangina is a purely informational site. You can’t do anything on the Orangina site, other than learn about Orangina but that doesn’t mean there weren’t branding lessons to learn from Avis too.

It’s important to always remember this:

User experience is a key component of branding.

That means everything you do on the site, even how you go from point A to point B is part of the brand. The mere fact that Avis had created a great user experience adds to their brand. They put themselves ahead of the competition online and that user experience will be remembered as part of Avis.

Visual Design

Often confused as the only element of branding, visual design is certainly still an important part of a brand, including web design of course, and Orangina does not disappoint. Strong colours are derived from the products themselves which sit on top of the blue background with orange contrasting very well for buttons, icons and anything else that needs to stand out or to simply help with visual hierarchy.

Menu design (with and without icons to demonstrate effectiveness
)

Look at the top menu for example. The orange icons are not only look great, they also add a visual element to the menu, making it more noticeable as well as differentiating the three sections.

In the lower part of the image above, I’ve removed the icons to demonstrate their effectiveness in this particular design. You can see how we’ve already lost an element of the strong visual design in something as simple as the menu. It functions just fine, but doesn’t contribute to the overall fun and fresh look and feel as effectively.

Buttons

You’ve probably never seen buttons designed quite like this, yet they’re still easily recognisable as buttons. Above are a few examples. They have a unique shape, yet aren’t too distorted from the expected shape. They demonstrate how we can “shake things up” and do something different even something small like this and with standard elements such as buttons.

Photography

I’m a keen photographer in my spare time and I believe learning photography has helped me become a better designer. You can see how great photography has helped with the design of Orangina’s website, not that the designer has taken the photos but it helps create better composition.

Orangina’s products

Actually, I wouldn’t be surprised to discover the bottles were created in 3D modelling software and made to look exactly like the real life thing. This allows them to place the bottles however they like, without having to assemble an expensive studio and use them over and over again. If you look closely at the condensation on the outside of each bottle, you will notice they’re identical, suggesting they’re most likely to be 3D renders.

I’m not saying you have to learn 3D modelling, of course the web designer wouldn’t have created them, but it’s interesting to know what goes on behind the scenes. Entire rooms are created in 3D these days and no-one even notices. This is the new age of (product) photography.

Imagine if you were designing a product site like this and you could have images from any angle or position you like with a simple request to a 3D designer. Perhaps something to consider for future projects, budget permitting.

Animation

The animations make the site feel more alive and evoke the brand of Orangina, much more so than if it was motionless. By doing so, they squeeze (pun intended, again) more out of the brand on the web.

Menu animation

CSS3 animations give life to the various flavours of Orangina drinks on the products page. Upon hover, they shake as though you are actually shaking them, as instructed to do so when you’r physically holding a bottle in your hand.

Shake it up (low quality GIF
)

Rather smartly, Achtung! took the Orangina’s established shaking gesture as the starting point for the rebrand which has worked very well translating into animations.

We took the all-time famous Orangina shaking gesture as our starting point. We also developed brand new product design materials accompanied by a total revamp of Orangina’s online presence, including social and mobile.

It’s important to note they haven’t overdone the animations. Too much and it would dilute (yet another pun!) the effect and become distracting. Too little and it won’t add anything worthwhile. They’ve got the balance just right.

Much of the animation on the web up until now has been used for aesthetic purposes. Thankfully we’ve long gone past the days of pointless Flash animations and I believe we’re entering a period where designers are using animation to add more meaning to designs.

Typography

The main typeface choice of Berthold Block Condensed is organic in style, with its not-rough but not-smooth edges. It’s subtle but very effective at fitting in with the design as a whole.

The screenshot below shows how the slight irregularities of Berthold, used for headings, compliments the design so well.

Berthold Block Condensed in all its glory

Mobile

Unfortunately, the vast majority of animations on the mobile responsive version are lost, due to the lack of hover of course. I would have liked to see the bottles randomly shake (not too frequently though) on the products page as a way to keep some of that animation alive.

Orangina is responsive

The strong visual design is adapted perfectly well to mobile screens. The simple layout of the site appears just as you would expect on a mobile device.

Additional Notes

The Orangina-Schweppes mission statement (not directly Orangina but it filters down) is as follows:

To be daring in everything we do with the aim of delighting our local consumers with fun, refreshing and natural moments of pleasure.

I wouldn’t necessarily say it is “daring” but the new design certainly delights with fun, refreshing moments of pleasure. I’ve looked at the site for hours as part of my research for this Learn from Great Design series and I still find it to be just as fresh as when I first saw it.

Shake it Up

The message of shaking Orangina is prominently displayed through the site, whether it’s the actual message itself on the product page or by the bottles and icons shaking too. Like the animations, it doesn’t draw too much attention but still gets the message across.

As a result of everything they’ve done, the site is fresh (last pun, I promise!), fun and unique to the values of the Orangina brand.

If you’ve ever held an Orangina bottle, you will know it has a dimpled texture, imitating that of the peel of an orange itself (like I said, I haven’t drank Orangina for over ten years but the feeling of the bottle has stayed with me). It’s great to see Achtung! have also paid attention to detail in bringing the new Orangina brand onto the web.

It’s this kind of attention to detail that allows Orangina to “shake things up”.