Responses by Sabrina Pfautz, creative director and partner; Sean McBrearty, senior project manager; Jeff Ciocci, web designer; and Chris Tremoglie, lead developer, Push10.

Background: “The new website had several primary goals,” says Sabrina Pfautz. “At its foundation, we aimed to communicate the core purpose of the Templeton Prize along with the award’s criteria and process of selection. Equally important was to convey the history and prestige of the Prize by showcasing the achievements of notable present and past Templeton Prize laureates, as well the founder, Sir John Templeton, giving particular spotlight to his philanthropic activities.”

“We sought to engage with the Prize’s unique audiences through curating a rich collection of content for journalists, thought leaders, laureates and laureate organizations, judges, and the greater public,” says Sean McBrearty. “We wanted to create an ideal environment in which visitors could learn.”

“The site was the culmination of months of brand strategy, messaging and visual identity work, intended to connect to the announcement of the new laureate each year,” Pfautz adds.

Design core: “The site combines thematic photography with a minimal palette and elegant type hierarchy, serving to emphasize The Prize’s tradition and prestige,” says Jeff Ciocci. “The themes behind the Prize—inquiry, curiosity, asking "The Big Questions”—gave us the opportunity to craft a germane, sophisticated visual style that feels indicative of the Prize’s pursuits.”

“The website utilizes a simplistic yet versatile scroll function that not only enables for a unique smooth scrolling animation across browsers but can also trigger a large number of custom transition elements when items are in view,” says Chris Tremoglie. “They are all triggered by the same code, so the load time is not hindered; however, each element can have various animations, allowing for a more app- or material-design-like feel to the site.”

Challenges: “The previous site was so far out of date and had simply turned into a compendium of PDFs, especially for the laureate profile pages,” says Pfautz. “Some laureates had extensive resources and documentation, while others had next to nothing. We needed to create flexible pages that could accommodate both scenarios and more.

“When we first started the project, there was very little public information available about the inner workings of the Templeton Prize. Our stakeholder conversations and research revealed that this simple fact had resulted in pretty pervasive confusion and misinformation about the organization. We worked with our client to shape brand new pages about the selection process, the judges, common questions, and even little-known quick facts and stats to promote transparency and understanding of the organization.

“As a practical matter, the website needed to represent all three Templeton organizations (John Templeton Foundation, Templeton Religion Trust, Templeton World Charity Foundation), which presented some unique hurdles in relation to stakeholders, review times and decision-making. While not typical of projects involving one client, our history and established understanding of Templeton helped us in managing such challenges.”

“Functionality wise, the load times are always a concern with website performance—however even more so in regards to Templeton Prize due to the high resolution images, and the sheer amount of data and movement created,” says Tremoglie. “This was alleviated by creating a custom loading icon that detects image-load triggers prior to viewing the page.”

New lessons: “In working through this project, we confirmed our instincts and belief that many competitions and prizes are anchored by stories, as it’s those stories that provide color to the extraordinary intellectual achievements heralded,” says Pfautz. “We don’t always watch the Olympics because we love sports; We most often watch for the personal stories of struggle and strength. At the end of the day, that’s what these organizations need to be all about, if they want to capture the attention of the public.”

“The site optimization that we originated while making the Templeton Prize site was so effective that it has now become a new high standard for our websites moving forward,” adds Tremoglie.

Navigation structure: “Our goal was to serve key audiences with a clear and consistent structure,” says Pfautz. “The general public, thought leaders and journalists need to start by understanding exactly what the Prize is all about; our first navigation item focused exclusively on answering common questions and building that background. After that, these primary groups want easy-to-skim information and resources about the current and past laureates. We endeavored to make it really easy to find those crucial items. While judges, members and the laureates themselves want to see themselves reflected on the site, they’re to some degree a secondary audience.”

“In addition to general user flow, it was important to answer the expressed objective of prominently featuring the Prize’s founder, Sir John Templeton,” says Ciocci. “Dedicating a top-level page to his story helped elucidate his goals and ambitions. This added more dimension to the Prize’s purpose in the context of the site.”

Special features: “The smooth scroll animation technically triggers an overflow overlay, instead of taking over the scroll bar functionality,” says Tremoglie. “This seamless integration enables an almost-identical smooth scrolling between browsers, which has always been a huge caveat for implementing smooth scroll onto other websites. This—combined with a custom jQuery functionality that looks for a specific class while scrolling through the site—enabled our dev team to implement a variety of animations using CSS transitions. The code used was extremely responsive and easy to implement, simply adding a scroll-watch class to anything that needed to trigger an animation. When it came into view, a second class was added. This class then could be used to trigger any animation via CSS and then was debounced once out of the view port. All animations are simple opacity, pseudo transitions or X/Y axis movements combined in various ways to give a very unique feel to the website.”