Responses by David Boissonnault, lead developer; Maxime Faucher, project manager; and Philippe Lepage, creative director, Stereo.
Background: Montréal-based public institution McGill University has launched an initiative to turn The Vic—the local name for the Royal Victoria Hospital site in Montréal—into an innovative research center to help heal the planet and tackle the greatest challenges that threaten it. This site makes the initiative’s information accessible to everyone, encouraging participation by inviting anyone to submit new ideas or express concerns, if any.
McGill University hopes to keep the process as transparent and collaborative as possible. This site aims to convince everyone about the usefulness of the project, how it will attract researchers from around the world and how it can bring all communities involved closer together. The New Vic will bring benefits of all kinds to not only the McGill community but also to Montrealers, the people of Québec and to all Canadians.
Design core: The horizontal display is probably the site’s most noticeable feature. We wanted the user to feel as though they were going through the pages of a book and reading a story, if you will. The left-to-right motion was an intuitive way of achieving this. Also, we think the graphic material from archive photos dating from the late 19th century all the way to the architectural representation of what the future site will look like is very breathtaking.
Favorite details: The “Phases of Work” section, which includes a timeline for the whole project that features a few animated elements such as background colors, icons and the active year at the bottom. It was a challenge to make it work fluidly whether the user would continue scrolling using the mouse wheel or the arrows in order to switch between milestones.
Challenges: First, the whole storytelling process took a while to brainstorm. We had to come up with simple, concise chapter titles and then place every piece of information we needed in its own special subsection. We carried this puzzle throughout the process, second guessing ourselves on the order of the chapters and their contents from pretty much beginning to end!
The horizontal navigation also proved to be challenging from a technical perspective. Browsers expect to render elements vertically, so we had to be careful about the positioning of elements and event handling. This also brought its fair share of problems regarding the height limitation of the content we could fit within each block.
URL management also presented an issue. The site is, in fact, only one page—except for the Contact page—so we needed to make sure that the proper page URL would show up at the right moment whether you came from a previous section in a continuous motion or if you entered the site at a specific position.
Time constraints: The New Vic project team wanted to use the website as a way of showing that the project was well underway, so we had to deliver the site in time before some key decisions were made about the project’s implementation by major stakeholders, such as the government of Québec and the city of Montréal. In the end, some features had to be discarded in order to make the deadline.
Divergent paths: Once we had settled on a horizontal scroll, we could have already started working on a fully functioning prototype at the same time as the design and writing phases were being done—instead of implementing those phases subsequently as we normally do. That way, it would have saved us a few long days as we approached the deadline!
Navigation structure: Even though you can scroll through the entire site without noticing a single navigation link, we also made a navigation panel by which users can access every chapter of the site from anywhere at any time. We also thought it would be interesting to have a progression indicator on the left, so that if you are in for the long ride scrolling all the way to the end, it tells you how far you have gone and how much is left.
Technology: The website was built using WordPress with the Bedrock framework. The interaction was built with Locomotive Scroll, a tool built to implement a cleaner scroll interaction. We worked closely with the Locomotive team to get the horizontal scroll within their Locomotive Scroll bundle working, since it was originally built only for vertical scrolling.