Responses by Lori Burwash, president, Energyphile Media; and Peter Tertzakian, founder, Energyphile Media and Collection Science.

Background: Part museum, part library and part business school, Energyphile is the brainchild of energy economist and quintessential energyphile Peter Tertzakian. After having written two bestselling books, Tertzakian wanted to communicate his ideas in a more accessible format as well as showcase an energy museum. Energyphile deconstructs the traditional business book into smaller interactive chunks of content. The site includes short, creative nonfiction stories—in both print and audio formats—and even shorter content cards that highlight the museum’s objects. Targeting stakeholders in energy transition—including investors, policymakers and corporate leaders—Energyphile was created to get people thinking and talking about energy in a whole new way.

Design core: At the heart of Energyphile is PhileSpace, which enables a quick display of large volumes of content with unlimited scalability and without latency on display and search. Leveraging the storytelling power of the collection, PhileSpace connects content thematically through a relational database that drives the platform. This allows objects in the collection to be related to one another by degrees of separation, much like a social network. The visualization is protected by an industrial design patent in the United States, Canada and Europe, and has patents pending in other jurisdictions.

On the homepage, we wanted a cool way to present featured content. The sliders housing this ever-changing content were inspired by the animation and interaction of PhileSpace. They’re simple but interesting enough that they encourage users to keep scrolling while, in turn, seeing all the callouts.

Navigation structure: PhileSpace’s navigation reflects the way people browse physical collections. They can explore vignettes much like they would cards on a table. This intuitive, more organic interface invites serendipitous exploration of the content, unlike how a typical grid does. The collection offers visitors a choose-your-own-adventure experience.

In addition to encouraging free-form exploration, there are more directed ways users can interact with the material. Sidebars sort material by categories and timeline, and display stories related to a vignette. Users can also search by keyword and choose from four different layout views.

Technology: The front end of PhileSpace is built with React and uses custom logic and canvas technology to organize and display the data, which is fetched via Apollo Client. The back end consists of a relational database model using MySQL to store data, paths to assets and a complex tagging structure that connects items.