Two phone mockups of Arup's project story template for the Sagrada Família: '140 years in the making' hero header with country, client, markets and services details, project facts on tower height and completion progress, and a feature on the LEGO Approach construction method

Arup · with leSHOP

One template, built to publish at scale.

☕ about a 2-minute read

Overview

Arup is a global engineering and design firm with more than 90 offices, behind projects like the remaining towers of the Sagrada Família. The brief, run through leSHOP, covered a set of templates and components across Arup’s site: a project story template, built here around the Sagrada Família, a sustainability editorial hub, the careers and Join Arup pages with job search and alert sign-up, a global office locator, and a topic-preference selector for content subscriptions.

The work was systems work, not one-off page design. Character limits on headlines and sub-headlines, defined module lengths, and restrained editorial typography with red used sparingly as an accent were built into the templates themselves, so Arup’s own teams could publish consistently across a global site, whether the content was a seven-minute engineering story or a job listing.

0
templates and components built across the site: project story, sustainability hub, careers & Join Arup, office locator, topic selector
0+
offices worldwide the locator was built to search
0
editorial system, holding together whether the content is a seven-minute engineering story or a job listing

Rules built into the template.

Every module carried its own constraints: a maximum headline length, a sub-headline capped at 75 characters including spaces, defined lengths for module copy. None of it was decorative. The limits existed so a template built for one story would still read cleanly when a different Arup team, on a different continent, filled it with different content.

Two mockups of an Arup template with content rules built in: a headline capped at 51 characters and a sub-headline capped at 75, sitting above featured and trending story modules including a teaser for 'Completing La Sagrada Família: a collaboration in digital and stone'
Tablet mockup of Arup's topic-preference selector, showing a grid of toggleable subject tags and a 'Select Topics' call to action for choosing which content updates to receive

The flagship story: the Sagrada Família.

The project story template is shown here built around Antoni Gaudí’s Sagrada Família in Barcelona, the subject of Arup’s structural engineering and vertical transportation design work as the building nears completion of its remaining towers. The template carries the story itself: country, client, markets and services in a fixed sidebar, project facts pulled into a stat block, and a long-form editorial read built to hold attention for seven minutes. The engineering is Arup’s; the template is the layer that tells that story consistently, whatever project runs through it next.

Desktop mockup of the Sagrada Família project story page, '140 years in the making', with a fixed sidebar listing country, client, markets, services and a share control
“The same system, whether the story is a cathedral or a career page.” ✳

Careers, alerts and everywhere else.

The same restraint carried through the site’s other systems. The careers and Join Arup pages paired a job search with research, guides, webinars and events, each held to the same content rules as the editorial templates. A job-alert sign-up let candidates flag their interests directly, and a global office locator turned Arup’s network of offices into a searchable map, built to hold up whether someone was looking for a role in London or a project in Singapore.

Two mockups of Arup's Join Arup careers page, with a job search bar for city and keywords, Research & Guides, Webinars and Events modules, and the global office locator beneath
Mockup of Arup's global office locator, with country and city selectors, a dotted world map and a location card showing contact details for the London office
Wide banner mockup of a Join Arup job-alert sign-up, with an employee testimonial quote over a workplace photo and a form for name, email and job interests

Content that scales without losing its voice.

A topic-preference selector let readers choose what they wanted to hear about, feeding a sustainability editorial hub built to carry real engineering stories, bridges, parks, transit, at the same restrained register as everything else on the site: black serif type, generous white space, red held back for links, tags and calls to action rather than spent on decoration.

Tablet mockup of Arup's sustainability editorial hub, 'Ideas for a sustainable world', featuring articles on Dutch steel bridge lifespans, an elevated park in Manchester and London's Millennium Bridge
Desktop mockup of the same sustainability editorial hub, showing the layout holding across a wider viewport