Skip To Main Content

Retrospective project: Sea Life website for Merlin Entertainments

Sea Life website

Intro

Fifteen years on, I can clearly remember this huge project for Merlin Entertainments. It was the biggest website I’d worked on. The brief had some very challenging creative requirements – which was exciting!

Now working from a newly built office extension on my house, I’d partnered with Darren Hurrell, the owner of a web development company called Addictive Interactive. My role was web designer and project manager. Addictive’s lead developer was Darren Hodges. Not surprisingly, with three Darrens and DHs, the client chose to refer to us by our surnames!

We almost lost the pitch when Merlin’s marketing manager asked a question that knocked me for six; “I’m concerned about appointing two separate companies. What happens to our project if he (Darren Hurrell) sleeps with your wife?”. I can’t remember my answer but it must have worked as we got the job.

What was the objective?

Merlin Entertainments owned 23 Sea Life centres and two Seal Sanctuaries, all based in Europe. They now have 50 aquariums in 19 countries, attracting over 20 million visitors each year.

Our mission was to design and build an engaging website, primarily aimed at children. It had to be ‘fun, colourful and interactive’, as well as ‘wavy’! This made sense as their sea creatures live in water. I can remember specifically being asked to avoid straight, boring wording on the website and to make it ‘curvy and wavy.’

Another key requirement was to ‘build a range of interactive games for children.’ Fortunately, Adobe’s Flash was alive and kicking in 2007 and I’d just completed a 6-month course on ActionScript – Flash’s programming language that enables interactive animations and games.

I’ll never forget the final key requirement as it was new territory for us at the time; ‘Each of our 23 Sea Life centres requires its own microsite with all content translated into the local language(s).’ This didn’t seem too bad at first until we realised that most of the microsites had to be available in more than one language. For example, all 10 microsites in Germany had to be available in German, Dutch and French.

Our solution

Design

I started with something I’ve always loved doing from a young age – drawing. It wasn’t something I got to do very often on website projects, but on this one it was essential. We wanted the sea creatures from their aquariums to be the main feature of the website and interactive games. I sketched a range of creatures and then traced them in Illustrator.

Sea Life creatures
My illustrations of the Sea Life creatures

These vector images were rasterised in Photoshop for the website designs and imported into Flash to be animated in the children’s games.

When it came to website design, there were some major limitations back in 2007, primarily around widths and heights.

Although Apple released the first iPhone that year, the vast majority of users surfed the web on computers with fairly low resolution displays. Most websites, including this one, were designed at a fixed width of just 800px. Worse still, the client insisted on the entire website sitting ‘above the fold’ (so users don’t need to scroll) which restricts not only the design but also the content! This resulted in a somewhat busy, cluttered design – unlike today’s spacious, ‘less is more’ approach with long scrolling pages.

With those restrictions, I produced a design based on colour-coded content panels relating to the main areas of the site, plus bespoke, isometric icons in the navigation. I chose a few child-friendly fonts (avoiding the dreaded Comic Sans of course!) Back in 2007, web fonts weren’t much of a thing, so all wording powered by the CMS was displayed in good old Arial.

Sea Life website homepage
The Sea Life website homepage

The brief specified a design with depth / 3D, rather than being ‘flat’, so I applied drop shadows and bevels to the panels and titles. Fortunately, ‘ranking high in Google for popular search terms’ was not a key requirement, so I was able to create images of the ‘wavy’ titles using Photoshop’s warp tool. And we made sure all images were uploaded with the necessary alt tags.

Although the client loved the colourful wavy titles, they proved problematic when I started designing the microsites in other languages. The French and German ones weren’t too bad but the translations were very long in Swedish and Norwegian. e.g. ‘Press Releases’ in Swedish is ‘Pressmeddelande’.

The Sea Life Berlin microsite homepage, in German
The Sea Life Berlin microsite homepage, in German

Interactive Games

Designing and building the children’s games in Flash was really enjoyable. David Vary (my only full-time employee in 2007) helped me create five games, all of which required some fairly advanced ActionScript programming.

  • Sea Life Quiz: A multiple choice quiz based on sea creatures.
  • Fishy Pairs: Good old fashioned matching pairs, but with sea creatures. This didn’t last long thanks to a strong legal letter from Ravensburger!
  • Create An Aquarium: An aquarium designer where children drag and drop animated sea creatures then print out their masterpiece.
  • What Am I?: A reveal game where you guess the sea creature as quickly as possible.
  • Sea Hero: An environmental game where you (as the diver hero) have to help conserve the oceans by removing plastic bags and other pollution.

Development

The site was built on Addictive Interactive’s own proprietary CMS. I oversaw the project management and implementation of the build which took over nine months to complete.

How well did it work?

Despite some technical challenges, it was an enormous success. Merlin Entertainments were delighted with the result and the feedback from children and parents was very positive. We supported the websites for many years.

What did we learn?

That designing and building multiple international websites in other languages takes a lot of hard work. 

Also, even though it’s important for a website to look good, the design shouldn’t compromise other factors. Creating so much of the content as images (to make them ‘wavy’) was a bad idea and we should have pushed back on that. Not only did it create a huge amount of work – particularly due to the translations – but it restricted the content, increased the file size and load time of the site, and was poor from an SEO point of view. It’s something we wouldn’t dream of doing today.

How would we do it differently now?

Firstly, we’d produce responsive designs for desktop, tablet and mobile. 

We’d develop the sites in-house with our team of eight full-time web developers. We’d build the master theme (parent website) in WordPress and use Multisite to create the international sites. This provides the client with one single CMS installation that powers all sites.

We’ve successfully used this solution many times:

  1. For companies with multiple brands that require a separate website for each one. We applied this approach to the Freightliner, Pentalver and G&W websites. Read the full case study here.
  2. International companies with a single brand that require dedicated, translated websites for each country they operate in. We applied this approach to the Flexiteek website, which now has ten international translated microsites. This also works on a smaller scale for companies with a few locations such as this example for Cambridge Econometrics.
  3. Companies that require a website with individual micro-sites, one for each sub-brand, product or service. We applied this approach to the Genesee & Wyoming website, which has a microsite for each of its 113 freight railroads in North America.

For building websites in multiple languages, we use the excellent WPML plugin, as demonstrated in our website for Beacon, which is available in four languages – English, French, German and Spanish.

As for building the games, we certainly couldn’t use Flash as it officially died (EOL) on 31st December 2020, although the Flash Player was deprecated in 2017. Nowadays, we’d embrace the Progressive Web App (PWA) approach as the core development environment and use modern languages including Javascript and HTML5. This Ionic article explains how the BBC adopted this solution when rebuilding their children’s games which were previously created in Flash.

We use a similar approach when building Apps, as shown in this case study for our SaveMoneyCutCarbon app.