Eurofighter
Building user-centred Laravel websites with custom imagery, creating a seamless experience across online and offline channels
Cyber-Duck has worked with Eurofighter since 2013, providing robust user-centred digital strategies, Laravel website development and secure hosting for its digital ecosystem. In 2023, we continued our partnership by launching the latest version of their website, with a new unified backend and striking custom UI design that continues aesthetic style of their physical Demo Centre.
Key stats
5
weeks from kick off to launch
27%
increase in the proportion of mobile visits
5,000
downloads of their technical guids
What is Eurofighter and how did they begin working with Cyber-Duck?
Eurofighter is Europe’s largest military collaborative programme. Its flagship product is the Eurofighter Typhoon, one of the world’s most advanced swing-role combat aircrafts. Eurofighter operates in a niche, yet highly competitive industry, competing with key players like Lockheed Martin, Dassault Aviation and Saab AB. Cyber-Duck has had a working partnership with Eurofighter since 2013. We launched their brand new, consolidated and upgraded website with a Statamic CMS and custom UI design in 2023.
Back in 2013, we revamped Eurofighter’s main website in time for the Dubai Airshow. This took just 5 weeks from the kickoff to the launch, thanks to our Agile approach, with weekly sprints and daily catch-up meetings between our team in the UK and the client in Munich.
The project began with detailed stakeholder and persona research, which formed the basis for a new information architecture creating intuitive user journeys. The goal was to appeal to key audiences, including potential buyers (like government and military officials), journalists, students and enthusiasts.
We rapidly progressed from initial sketches to functional prototypes using Hoisin, our fast, flexible responsive CSS framework. Ultimately, we designed a compelling new art direction and infographics to communicate key statistics about the aircraft. Through revealing the people behind the organisation, we added a valuable 'human face' to the brand.
This was a significant chance for Eurofighter to demonstrate excellence, as the Dubai Airshow is a flagship event for the aerospace industry. The new website was celebrated as the showpiece for their stand at the event.
Objectives
- Build a new website to merge Eurofighter.com and Eurofighter World into a single, streamlined Laravel backend.
- Collaborating with Schwarzbild, design and create UI with animations and visuals to follow the new branding.
- Incorporate clear information architecture and content to meet the needs of Eurofighter’s different audiences, from government officials to hobbyists.
- Present key information in interesting and engaging ways to increase awareness of the aircraft’s quality and features.
Creating a custom CMS for Eurofighter World
This was the beginning of a productive, decade-long working partnership between Eurofighter and Cyber-Duck. Since then, we’ve continued to help evolve their digital ecosystem, designing and building microsites for internal use and other events including the Farnborough International Airshow, as well as launching their new website in 2023.
In 2017, Eurofighter approached Cyber-Duck to implement a digital-first approach to their content. The Eurofighter World magazine contained excellent editorial content; new editions were published quarterly, and were accessible online via a PDF download.
However, this quarterly schedule meant the editorial team was often sitting on articles for months. The reach of the magazine was limited to approximately 200-500 downloads per month.
By building a new Laravel-based CMS, we empowered Eurofighter’s editorial team to publish articles faster and more frequently.
They could also increase awareness via social media, SEO and email. Through this, they could increase the reach and impact of Eurofighter World articles.
As the website was featured on a subdomain, we ensured there was a seamless, consistent user experience. We designed a robust information architecture and designed new interfaces and page templates. Our developers integrated SilverStripe, an intuitive user-friendly CMS, so the team could populate editorial content and articles easily, setting them up for efficient governance in the future. We built complex, bespoke blocks to match the specific layouts of the original magazine, such as a Q&A and quick facts. All were dynamic, flexible and easily editable within the CMS.
Based on Eurofighter’s meticulous security requirements, we implemented a publication workflow within the CMS with different levels of content editors and administrators.
A new website for 2023
As part of their ongoing evolution, Eurofighter wanted to launch a new, improved and upgraded website for 2023 that would help them continue reaching their target audiences. As they have done many times over the last decade, they turned to Cyber-Duck.
Eurofighter has a physical Demo Centre located in Germany, where guests can explore the features of the aircraft in an immersive experience. For this new website, our mission was to translate the visual style and feeling of the Demo Centre into a new website, providing users with a seamless and cohesive experience across Eurofighter’s physical and digital channels.
Eurofighter had a dream and a vision: they wanted a website that would elevate them to the top of their field, not merely be “as good as” the competitors. They are at the top of their game, and they needed a website that showed they are the best in their field. They wanted to demonstrate Eurofighter’s amazing capabilities, showcase off the technical details of the aircraft, and inform people about the future development and evolution of the programme, telling an exciting, human-centred story.
Eurofighter have 3 important pillars of messaging that the new website needed to rest on:
The features of their aircraft that are consistently adapting and evolving; the European aspect of their programme, and how profits are kept within Europe; and how they shape the future – there are plenty of new milestones and features consistently happening with the programme.
They knew Cyber-Duck would be their perfect partner to help them tell this compelling story, expressing the Eurofighter journey.
Some of the main challenges we faced:
- How could we make the best of the content we already had, such as the existing website, and showcase it in the best possible way?
- This project would involve collaborating with Schwarzbild, the agency that created many of Eurofighter’s existing visuals and animations. How could we work together in the most efficient and productive way for both sides?
- How could we bring the new website and redesigned visuals to life in a way that used the right technologies, while also being functional and accessible?
Defining the goals with UX discovery
We kicked off the UX discovery portion of the project by meticulously defining Eurofighter’s goals and really understanding what they wanted to get out of the project.
We reviewed the four main persona types of users who would be using the website:
- Customers who are planning to invest in the Typhoon and work with Eurofighter.
- Partners: Eurofighter are part of a consortium with partner companies in different countries throughout Europe.
- Press: the website would be a resource for press releases and information on events and the latest happenings in the programme.
- The public: although the public are not direct customers, public support is a critical component of investors’ decisions, so they are an important user group for Eurofighter.
Although each of these personas has different needs, we had a common mission for all of them: to inform, entertain, surprise and inspire by creating an exhilarating and informative visual experience.
A consolidated content strategy
As part of this project, we would be consolidating the main Eurofighter website with the Eurofighter World magazine website we had previously built for them.
To successfully consolidate them, it was necessary to craft a design strategy with new user journeys that brought together the content in an accessible and communicative way.
We completed an extensive content audit of the current site, working from Google Analytics data. We identified which content was no longer driving traffic and recommended what to remove and what to keep, lightening the website by focusing on higher-value content and removing that which was no longer serving Eurofighter’s goals.
Following this, we reviewed the information architecture, designing a new IA that emphasised Eurofighter’s three pillars:
- Features of the aircraft
- European aspect of the programme
- How they shape the future
We also added a press area of the website to further improve the user journeys for the different persona types, making it easy to locate news articles and updates. Once the new IA had been designed, we crafted a user-centric content strategy. During the content audit, we had identified all the relevant content from the existing websites; we now mapped this onto the new IA, creating an intuitive content strategy where users can easily find the information they need.
Creating an exciting, human-centred experience with UI design and visuals
When it came to the visual design of the website, our key goal was to build a cohesive and consistent visual experience across Eurofighter’s online and offline channels. We were given the creative freedom to tell the story of Eurofighter, features of the Typhoon, and the partners and European countries involved, making this a very exciting creative project for us – we were thrilled to have the chance to explore new ways of telling this story.
We took some film and interactive visuals from Eurofighter’s existing media repository to use on the website; however, this was not a straightforward lift and shift. To begin this process, we completed an art direction audit. Their media incorporated various aesthetic styles – from 3D photorealistic renders to more illustrative artworks. We determined what would work for the website, and how we could reformat and recut it appropriately, while also designing new visuals from scratch to support and augment the existing visuals. In this way, we came up with key brand visuals for the three pages under the Aircraft section: features page, our mission, performance.
Two pages, “The Programme” and “The Aircraft”, were identified as a good place to tell long stories. We used background video controlled by scroll with sticky content elements. This allows the user to scroll for long stretches through the story in a compelling, continuous way, becoming immersed in the experience while keeping a logical content flow. This technique posed some challenges: the website still needed to be accessible, and not too heavy in terms of bandwidth required.
Extensive storyboarding was needed to figure out the animations for each page, so we could create a smooth, seamless and visually compelling visual experience, with transitions and angles that felt natural and smooth. To reinforce this, we created a technical proof of concept to explore technical options, a short 3D animation to show how we would move from one slide to the next.
We also created storyboards for the website’s intro animation. This involved editing and cutting up existing video footage (supported with bespoke animations and illustrations) to make a reel with hero shots of the aircraft and pilots, relevant tech such as navigation systems, and close-ups of the vehicle. This reel showcases the impressive scope of the aircraft and what it can do, making an extremely powerful visual statement as soon as a user enters the website.
Once the designs and transitions had been worked out, we moved on to low-fidelity wireframes, eventually refining these into high fidelity designs. We continued honing the visuals to a very high quality, working with Schwarzbild to build the animations frame-by-frame.
Ultimately, we created a complete new visual experience, telling the story of Eurofighter compellingly while supporting their overall brand and aesthetic. Besides the animations, we came up with various other UI ideas to make the website more dynamic and visually interesting, such as CSS microanimations, having pictures which animate when the user reaches a specific section and animated infographics to pull out important statistics and facts, so users can see them at a glance on the page.
Developing the new website
In the previous version of the website, we had built two public sites and two internal ones; the main Eurofighter.com website was built with Laravel with a custom CMS, and the Eurofighter World magazine website was built on top of the main site with Silverstripe.
There were also two internal microsites which were only for Eurofighter’s internal staff and partners; one was a static site with no CMS, while the other had a custom CMS. All in all, the four sites were disjointed. For the new website, our goal was to build a more cohesive, consolidated backend.
We merged Eurofighter.com and Eurofighter World into a single site using Statamic, a powerful, scalable CMS which is built on top of a Laravel backend. Statamic is fully integrated with the Laravel framework, but the frontend is completely independent from the backend, so it is highly flexible and can be customised in endless different ways, making it a great choice for complex or unusual pages – a vital consideration for a site such as this, which has such unique visuals.
Because the old Eurofighter World articles were built with Silverstripe, they were based on blocks. Meanwhile, Eurofighter.com’s news articles and multimedia items such as photos and videos were in the custom Laravel CMS we had built. This meant we had to perform a complex migration of the articles and media from both old websites into the new unified Statamic CMS, which involved recreating some of the blocks; Statamic gave us the flexibility to do this successfully. The new CMS is highly intuitive, with a simple drag-and-drop interface, so the Eurofighter content teams will find it easy to update content and add news and articles, with a real time preview that Statamic offers.
Besides its flexibility and customisation, another major reason for choosing Statamic was its excellent security - a crucial consideration for Eurofighter. It does not use a database; instead, the content is stored in flat files on the server, which means it offers excellent security because there is no risk of the database being hacked. We placed an IP restriction and two-factor authentication for logins, so only Eurofighter office staff can access the admin section of the new website.
The Eurofighter Show
Alongside the new website, Eurofighter ventured into a new platform by launching their YouTube channel, the Eurofighter Show.
The first video launched at the same time as the new website; we have integrated the YouTube show into the new website’s multimedia library to help promote it.
As with the new website, the YouTube content all contributes towards presenting human, personal stories, continuing to create a cohesive and consistent image and style across all of Eurofighter’s different channels.
Supporting with DevOps and cloud hosting
As part of the DevOps process, we set up Production and Staging environments for the new unified Backend on Amazon Web Services, following the best practice which was already established for the previous version of Eurofighter.com.
We set up Cloudflare for security and caching and provided DNS management.
We configured the deployment pipeline and provided the necessary DevOps support for the launch of the new website, which went ahead successfully.
We continue to support Eurofighter to ensure the website is secure and protected from digital attacks. We produce monthly reports supporting the internal InfoSec team, reporting on software update, security fixes and potential threats.
Next steps and results
Our next step will be to use Statamic again as a backend to serve two internal microsites for Eurofighter staff and partner use. Similar to the two public-facing websites, we will build one unified, consolidated backend for the two frontends. As always, security will be a major consideration; there will be a separation between the internal sites and the public-facing sites, with multiple security layers for access.
Since the original launch, the website has continued to perform excellently. Users have become far more engaged in comparison to the previous website: 9% of visits result in conversion, and technical reports and magazines have been downloaded over 5,000 times. Mobile traffic increased by over 100% in the first year after launch, and proportionally it rose from 16% to 27% of total web traffic over the same time period.
After the launch of the latest website, Eurofighter now have a modern, interactive website with a streamlined backend, excellent governance and security, providing an exciting and visually seamless experience across their online and offline channels. We look forward to continuing our working relationship and seeing how Eurofighter continues to develop into the future.
You can read more about our approach and how we work with clients to build, renew and scale Laravel applications and projects in our Laravel white paper.
Key stats
5
weeks from kick off to launch
27%
increase in the proportion of mobile visits
5,000
downloads of their technical guids