An elegant design that gives prominence to the site's rich content
We designed and built templates incorporating fluid typography and layouts.
- Client
- The Baillie Gifford Prize for Non-Fiction
- Sector
- Media and publishing
- Duration
- 8 weeks
- What we did
- User experience design
- Development
- Product design
The film industry has the Oscars. Music has the Grammys. For publishers of non-fiction books, the Baillie Gifford Prize is the big one.
Approaching the 25th anniversary of the prize, the awards team was looking for a website that would mirror the quality of the books. The client also wanted to broaden the focus away from each year’s winner, showcasing their treasure trove of hand-picked non-fiction. This required a new design on the front end and a complete rebuild of the back-end content management system.
One more thing. The new website had to go live in time for this year’s shortlist announcement. That deadline was non-negotiable.
The Results
A content management system powered by a web of relationships
Building on our expertise with Craft CMS, we encoded all the different ways that information could be related.
A process for maintaining the site for years to come
Working with the client, we made sure they had everything they needed to run their website without us in the future.
The Full Story
How do you create an immersive experience that encourages discovery?
The audience for the books in contention for the Baillie Gifford Prize are a discerning lot. They’re seeking out quality non-fiction writing, and they’re open to reading something that wouldn’t normally be on their radar … if it’s recommended on the Baillie Gifford Prize website.
We wanted to reward that trust and make sure that whatever path they took through the website, they’d find the right book. The experience should be a pleasure. It should feel like perusing a well-curated bookcase instead of filtering a database.
Under the hood there was indeed a database holding all the relevant information. We realised that the relationships between the information were crucial. Books, authors, genres, years … there are so many different ways of grouping and navigating this 25-year goldmine of writing. Evergreen and newly created content should be equally discoverable.
One of our guiding principles was that there should never be a dead end. No matter what page you end up on, there were always related pages that you could explore. Effectively, every page is a landing page and a node for onward discovery.
Discovery would continue off the site as well: we set up the content management system to format links using Open Graph. This means that any finds shared via social media provide context and encourage visitors back to the site.
How do you use the power of design to let the content shine?
The books are the stars of this website; it was important that the design shouldn’t draw attention to itself.
The client wasn’t looking for a complete rebrand. The logo, the colour scheme, and other brand elements would remain much the same. But we could use the palette of typography and layout to create a suitably refined structure to support the great writing on display.
We got into the nerdy details of typography, selecting new typefaces that were legible and subtle, but still with interesting character. It’s unlikely that anyone would consciously notice these details. But that was the intention: the focus should be on the content and the books themselves, not the design. We created three different grid layouts, all of them relatively simple. There was only one design element allowed to break free from the grid structure: the book covers.
Every page had to look good regardless of how much content was available. Whether the page featured a wealth of information or had more minimal content, the design needed to work either way.
How do you build the infrastructure to support this website?
When it came to building the site, we knew the data structures and metadata relationships we wanted. And we had the right design direction. But we needed to implement both. The clock was ticking.
For the typography and layout, we created templates with well-structured HTML and modern CSS. The Utopia project – which we incubated here at Clearleft – was perfect for fluid type and spacing. No matter what device or screen size you were using, the design would look just right.
Meanwhile we were encoding data structures and relationships using the Craft content management system. Once we began to populate the database, there was a lot of collaboration between design and development. As so often happens, design decisions needed to be revisited once we were working with real content. But thanks to a nimble process, there was nothing set in stone.
How do you make sure the content management process is future-friendly?
It wasn’t enough for us to just hand over a website. The Baillie Gifford Prize for Non-Fiction is an annual event that will continue far into the future. We knew we had to leave the awards team with the tools and knowledge to maintain their high standards from here on out.
As well as providing hands-on training, documentation and instructional videos for the content management system, we worked with the prize team to make sure they had everything they needed to maintain the site for years to come without our help. We worked hard to make ourselves redundant.
The content management system isn’t the only way that information is processed. There’s also a place on the site for publishers to enter their best books for the prize. We overhauled this form, making it much easier to use.
A relaunched website as a destination for discovery
All the pieces came together in time for launch day: the front-end templates, the back-end content management system, third-party integrations including analytics and newsletter sign-ups.
The 25th anniversary marks a significant moment to celebrate the prize’s illustrious history aswell as to look to the future. The new, flexible publishing platform enables the Baillie Gifford Prize for Non-Fiction to support readers old and new to discover the world’s best factual writing.