Royal Academy of Engineering
Manufacturing and engineering
6 months
What we did
Design research
User experience design
Interface design
Front-end development
A graphic that features the following text - discover your future in engineering. Also included is a collage of 5 images of people working on engineering projects and as well as a mobile preview of a This is Engineering website page.

This is Engineering is a campaign by the Royal Academy of Engineering. Aimed at teenagers, it sets out to bring engineering to life for people of all backgrounds and encourage them to pursue a career in this exciting field.

The campaign has been running for five years now, and the Academy wanted to refresh the website to ensure it was still relevant to the intended audience while meeting the ambition of the project.

Having previously worked with EngineeringUK on their Neon project, this was a cause dear to our hearts.

Clearleft took the time to really understand us, our brief, the campaign and our audience. They challenged us to question our assumptions too. We are pleased with the new site, which was delivered on time and meets the ambitions we had for this project.
Kiran Anderson Head of Digital Communications

The Results

A streamlined website

We simplified the information architecture across the site and on individual pages, so people get to rewarding content faster.

A workflow optimised for content creators

We created a back-end interface that makes life easier for editors and can scale as the campaign evolves.

Continuous validation

We tested with young people throughout the project to ensure we were on track.

The Full Story

How do you make the best use of great content?

This is Engineering really shines on social media. The team have created terrific videos, and they’ve got an amazing library of photography. But the website was little more than a hub for this great content – there was no journey or destination. Getting young people to engage was the real challenge.

For most people, the job title isn’t why they choose a career – they care about what they’ll be doing and the impact they’ll have. This is even more important to young people today; starting with job roles and qualifications just wasn’t going to land. So we showcased fascinating people and amazing engineering projects.

Any talk from teachers and adults took a step back and we put the inspirational and aspirational content front and centre. Then we showed our users how they can make a career in engineering a reality, whatever their learning preference or background.

This approach was reflected in a simplified site structure. We prioritised the content young people needed and deprioritised everything else. This continued on to the page level. We cut away anything that wasn’t directly relevant. We also made sure the content was chunked into easily digestible bite-sized pieces.

Content layout
We removed irrelevant information and organised the content into digestible chunks with forward journeys.

But there was another user journey that was just as important. If someone arrives at a specific page – via social media, for example – what happens next? What are the next steps? If we’ve got them curious about a career in engineering, how do they proceed from here?

By answering those questions, we made sure there were no dead ends.

How do you design for a young audience?

On this project, we worked with existing brand guidelines. Ripping everything out and starting from scratch wasn’t an option. Instead, we needed to make sure our changes worked with the already-established design language of the campaign.

A graphic used to show the colour palette used on the This is Engineering website.
Revamped brand colours for digital appeal, adopting a minimal palette with bold, high-contrast shades, primarily incorporating black.
Working with Clearleft on our new This is Engineering website was a smooth process from start to finish. Communication was clear throughout and the team gave us regular updates through the delivery of a weekly postcard to show their progress. They worked iteratively and in the open, were responsive to feedback and responded to our queries promptly.
Kiran Anderson​​​​ Head of Digital Communications

We wanted to make sure our work was appropriate for the audience. But none of us are teenagers. Instead of pretending to understand what works for young people, we talked to them.

Luckily for us, the Royal Academy of Engineering already runs market research sessions on a regular basis. We were able to add our questions to those sessions.

But we also wanted to stress test our work in a hands-on way. Usually, we’d do one-on-one usability testing, but that wasn’t feasible – the timelines of school holidays and exams would make that very tricky. So we went where our audience was. We coordinated with schools to run in-person sessions in Hassocks and at The Portsmouth Academy.

First, we ran the initial designs past a room full of young students. As hoped, they were forthright with their opinions. Fortunately, their responses validated that we were on the right track. We turned those designs into production code.

We revisited the schools when we had the website closer to completion. Once again, we got the unvarnished truth, which was exactly what we wanted. And once again, we received valuable confirmation that what we had built was working for this audience.

To use the parlance of the people we talked to… the site slays.

Best of all, we saw how people from under-represented groups responded to seeing people like them in engineering careers.

It’s good to see South Asian girls there. I’ve never seen anyone from my culture doing that.
A year 10 student at The Portsmouth Academy
Students looking at printed versions of a website in order to provide feedback with the addition of three post-it notes that read - it looks great, the design pops and really good, has everything you need.
We got valuable confirmation that what we had built was appealing to our audience.

How do you work best with the people behind the campaign?

The website for This is Engineering needed to be:

  1. attractive,

  2. easy to navigate on the front-end, and

  3. easy to update on the back-end.

As well as writing the front-end code for the website in HTML, CSS, and JavaScript, we also built the back-end. With the previous site, the Academy team were stifled by a simple and rigid format that hindered creativity. The Academy team is making fantastic inspiring content; we needed to make sure the content management system didn’t limit them getting that content onto the website.

Using Umbraco CMS, we optimised the back-end for the content creators and editors. We created a system offering full editorial control over a page’s layout by using a page builder. The team can access over a dozen bespoke content types that have been designed and built to work together, regardless of how they are laid out on a page. This gives maximum flexibility while allowing the content to shine.

There are a lot of different types of engineering jobs that I didn’t know about. Before I saw this I thought engineering meant you had to get your hands dirty.
A year 9 student at The Portsmouth Academy

We're better together

The client really responded to our process of showing work early and often. There were no big reveals. We had a continuous feedback cycle. They articulated any concerns clearly, and we worked with them.

When we say we worked with the team from This is Engineering, we really mean it. It felt like we were on one team. On the Clearleft side, we were so impressed by the client’s expertise and domain knowledge. Meanwhile, they trusted our design and development experience.

When we launched the website, there was a bittersweet feeling. On the one hand, we all loved working with such great people on an important mission. On the other hand, launching the website meant that our time together was done. It felt like the band was breaking up.

If there’s a young person in your life who perhaps hasn’t previously considered a career in engineering, tell them about We’re proud to have played a part in it.

More work