Responses by Quentin Goupille, art director and Lou Marzloff, project manager, BETC and Judith Haussling, project manager/art director and Giovanna Carrer, PR, Alios

Background: The Grandes-Serres de Pantin site shares the story of the unique transformation of the old Pouchard tubes factory in Pantin, the closest Eastern suburb of Paris, by the real estate developer Alios Développement and its partners. The Grandes-Serres de Pantin aims to unite offices, a food court, public spaces and a hotel under one common architectural and landscape project in Paris.

Highlights: The central graphic identity that uses the “hyphen.” This simple line symbolizes the joining of two things together—such as the future bridge that will cross the canal, connecting the Grandes-Serres and the city—as well as the link between artists, talents and people from Pantin.

Challenges: The content management. The website has been divided into three chapters and a timeline of news in order to make the content digestible and less heavy in terms of connectivity. The challenge was to keep the same light, artistic quality as the buildings, and to bring unique modules between the chapters, while applying different graphic principles.

Favorite details: Though we couldn’t show the actual location because it’s still under construction, we still managed to tell a story and give users a feel for the place. Just like the architects who’ve imagined the new building, we’ve illustrated the Grandes-Serres in an abstract way.

Navigational structure: The navigational structure is simple, with a launch page that gives a glimpse of the architectural intention. Users can also click the menu on the right-hand side to visit another part of the site. Lastly, the “News” part shares all the activities that are happening at the Grandes-Serres de Pantin.

Technical features: For the back-end, we used Grav CMS in headless mode, with cached JSON files exposed over a REST API. For the front-end, we created a static website using only client-side technologies, requesting dynamic content from Grav with JavaScript, along with Webpack, Vue.js, Pixi.js and Hammer.js.

Time constraints: To make the most of our time, the interface was designed in parallel to the Grandes-Serres identity. The crucial phase for us was development. It was short, but it allowed us to highlight several problems, such as the animations and the content management.