AJBL – The Architects’ Journal Buildings Library

The brief

The Architects’ Journal is the world leading journal for architects everywhere and for over a century has been the place where architects go to share their work, to learn new ideas, and seek inspiration. AJ is famous for publishing detailed plan drawings and unique feature detail drawings, and at the start of a new project, junior architects are often dispatched to the library to trawl through the back issues to find similar exemplar projects and inform new design thinking.

In 2010, conscious of their rich archive of detailed drawings and professional photography, AJ decided to commission a bold new project to bring the best of the AJ’s hundred-year archive online. They hired a buildings library editor and I was delighted to be asked to lead the project on the technical side, building the online product to deliver their vision of making the AJ building archive accessible to all.

I worked with their graphic designer to develop a design identity for the new product, one that was clear and put the buildings up front, showcasing the incredible photography that accompanies these projects.

The first iteration and pivot

We built a prototype and launched a basic version to solicit feedback, which led to our big pivot. Initially research had indicated that the library should be focused on the past, but once they had a version of the product in front of them, it became clear that “1930’s municipal swimming pools” for example were not of great use to modern-day architects; what they needed was access to exemplar projects from the last ten years, great search functionality, and filters such as floor area and project cost.

This insight led to a fundamental shift in the nature of the product, from simply putting the AJ historical archive online to creating a living, current library of the best recent exemplar projects from working, modern architectural practices.

In essence, we flipped the product inside out. Where we had planned a simple CMS for AJ staff to upload projects, it was now clear that we needed another user-facing side of the application, for third party architects to upload their projects.

The final product – key features

The home page is the landing page for the product; originally this was envisaged as a standalone paid-for product, but it now integrates with the EMAP content management system used for subscriber access to the online version of AJ, and latterly the Buildings Library became a subscription benefit to help bolster subscriptions to the main publication.

There are usually free-to-view projects that are fully unlocked to view, and every project can be viewed without logging in – you only require a subscription to view the high-resolution images and plans.

All significant building projects will be photographed by talented professional architectural photographers and practices are keen to use these to promote their best projects.

The biggest part of the AJBL is its ability for users to upload these very high-resolution, high-quality images and then for it to process these in the background using a worker queue into thumbnails as well as the “pyramid” format that is needed for the image viewer – see below.

01 home page.png

The project page – there is one page per project and the centrepiece of it is the image viewer. This uses the Seadragon AJAX image viewing library which works in the same fashion as Google Maps – a “pyramid” of tiles is created representing the image at stepped resolutions – as you zoom in and out, the viewer intelligently switches in the tiles that work best for your current viewing area and resolution.

This enables the user to zoom in to remarkable levels of magnification, excellent for the architect to examine fine details of construction.

02 Project page start.png03 Image viewer zoomed in a bit.png04 Image viewer zoomed in fullscreen.png05 Search for flats, london.png06 Login screen.png07 User settings screen.png08 Manage projects.png09 Project page.png10 Edit project 1 - overview.png11 Edit project 2 - details.png12 Edit project 3 - Photos.png13 Edit project 4 - team.png14 Edit project 5 - editors tools.png