A new relationship

Over the coming months e3 will be working closely with the Royal Navy teams, including the new Head of Digital, Helen Craven, to create an events template, overhaul the Careers section and render the website in a responsive contemporary design. These changes touch every team in the growing e3 studio from Strategy, UX and Creative to the technical delivery department. In this post, I'll talk about how the e3 way of doing things delivered an ambitious, contemporary website to a high quality, on time and budget.

e3 has been around since 1997, so we have a highly developed approach to project delivery. We understand the value of positioning and architecting a site before getting into full execution; always asking what value is gained by adding each feature. The latest batch of projects for the Royal Navy will see us getting under the skin of this prestigious armed service to re-develop the user experience, content strategy and visual language for a rapidly changing context of use. The start of this Royal Navy voyage was The Battle of the Atlantic (BOA) project.

The Challenge: Tell the story of the BOA in an engaging way, drawing comparisons between today and 1943

Ironically in starting to take steps forward, we are going back in time 70 years. With the heritage of the Royal Navy, commemoration events are an important part of relating the relevance of current operations to key historical events. The challenge for e3 was to come up with an event template that engagingly told the story of the 1940s BOA, with a nod to current big data and infographic trends.

Stage 1 - Brainstorm

In order to make sure we came up with the most compelling and targeted ideas, e3's project, creative and strategy team members held a brainstorm with the Royal Navy in our Bristol office. There a number of ways to run a brainstorm; we opted for a structured approach that includes the use of empathy maps to understand the audience, research stimulus to provoke focused ideas and prioritisation techniques to filter ideas. Find out more about the brainstorm session here:


Stage 2 - Concepts

Once the filtered list of ideas and themes had been identified, the e3 Creative team developed some concepts, exploring different routes around the main ideas and illustrating them in Scamps. Scamps can take a few forms, such as storyboards, but in this instance they showed what the idea could look like across devices in a style akin to the A-ha 'Take On Me' video.These scamps were then refined with the Royal Navy team to something that closely met their aims and capabilities. We opted for a 1940s timeline and newspaper style, which would visually blend the 'now and then' elements in a new way. These concepts were then used to develop estimates, the scope and timings.


Stage 3 - Project Planning

Due to urgent marketing deadlines, we decided to break the idea into Version 1 (a basic page with the defined look and feel) and Version 2 (the full functionality). We used the spirit of Agile by involving all the team in 10 minute daily stand-ups each day, so everyone could understand what was developed. This was also a chance to raise issues that could affect their areas and offer alternative ways of achieving the project aims. These stand-ups have proved really valuable in spotting issues quickly, the teams really love them too.

Stage 4 - Solution Design

Time was tight, but the time we did have allowed us to develop the content ideas, data treatments and overall information architecture. We also gathered sample data sets and mashed around with them in excel to spot patterns which would form a visual narrative.

Stage 5 - Design Production

For Version 1, the page had fairly limited functionality outside of being CMS-able and pulling in Twitter feeds (cached and served within the security tight Navy hosting operation). This meant the look and feel had to create the excitement and distinctiveness. The design brief was to reflect the spirit of the 1940s in a contemporary way, avoiding cliches. our designer, Alec met the brief with a superb mix of British wartime schemes and motifs, whilst still keeping the page crisp and usable. Inspired by poster art, newspaper clippings, plus old maps that had been sent over by the Royal Navy historians, the design kept with a monochrome palate and sympathetic font usage. I haven't seen anything quite like this online. We even got in the mood by tuning into a 1940s radio station for the afternoon.


First iteration of the design


Stage 6 - Technical Production

Once HTML and back-end development brought the Version 1 designs to life, we deployed the template to Royal Navy to populate at the end of March, on schedule. It was extremely flexible with most fields editable in the Sitecore CMS.


Battle of the Atlantic visualised in cargo data.

Version 2 production could start once we received the final data from the historians. These verified stats required us to re-visit the designs to tell the story of the numbers in a meaningful way. We found that simply slicing and dicing the data in Microsoft excel charts helped us quickly decide the best way of presenting it. Our front-end developers then employed the gRaphael javascript charting library to present the stats as vector graphics, which could be flexibly edited by the Royal Navy editorial team in the CMS. The map visualisation was also made extremely flexible, reading JSON feeds output by the Sitecore CMS to position symbols on the map using javascript.


Maps, stats and icons - The Battle of the Atlantic visualised

Although the design was quite bespoke to the 1940s, the template has re-usable components that can be built on for future events, such as next year's First World War anniversary. As the time didn't allow for user testing outside of the office, we are using the live analytics to inform future iterations.

Next up is the overhaul of the Careers section including a new job finder tool, which delivers next month. Then we start planning a responsive version of the site.

Full steam ahead.

View the Battle of the Atlantic site in all its glory.