Designed and built in close collaboration with U of T’s marketing and communication team, and including the input of more than two dozen stakeholders and subject matter experts, insulin100.utoronto.ca mixes rich storytelling and narrative experiences with high utility news, events, and resources. The homepage is a long form, scrolled experience telling the story of the discovery of insulin through archival footage and printed media including excerpts from Banting’s notebooks and letters and photographs from some of the first patients to receive the life-saving cure. The discovery and its impact established, the narrative then transitions into a high impact timeline covering a century of innovation and discovery in the health sciences before looking ahead to the next 100 years of transformative research with global reach.

Some of the most challenging aspects of this project included the complexity and informational density of the content, and the need to create an experience that was wholly unique and yet clearly references and reinforces the University’s brand. Key to overcoming these challenges was an incredibly close working relationship with the U of T team. O/B designers and developers established a digital workspace using InVision Freehand, enabling all stakeholders to participate in storyboarding, wireframing and sketching sessions. The collaborative space is where the O/B team mapped and remapped multiple drafts of the Discovery story as it was written by U of T’s content team, and worked closely with U of T’s art director and archivists to source and sort through over a century of imagery and footage. The digital workspace became a hub for the project allowing for both synchronous and asynchronous collaboration, and continues to host semi-regular working sessions as the site itself continues to grow and evolve over the course of the campaign.

Early on we identified that the length of the scrolled experience could prove daunting for some users, and that the content may need to change and evolve post launch–meaning there would need to be some level of editability and templating of content without being overly prescriptive or repetitive. To tackle these issues we designed and built more than fifty component templates which could be mixed and matched within the content management system to create an almost unlimited number of layouts and sequences.

To keep the reading experience manageable we designed a mix of big, high-impact but low-density components which would provide visual waypoints through the narrative, as well as a selection of smaller, more informationally dense components to be used within the major sections of the narrative. We then implemented a hybrid table-of-contents and progress indicator UI that clearly outlines the structure and flow of the narrative while telling the user how far they’ve progressed.

Finally, we implemented a number of custom analytics to track engagement throughout the narrative experience so that we could identify drop off points and adjust the experience accordingly. We also implemented a global kill switch for all of the site’s transitions and animations to ensure a comfortable and accessible reading experience for all users.

Since its launch, the Insulin 100 campaign’s impact continues to grow. Engagement metrics for the site have regularly exceeded the team’s expectations, and our approach to structure and flow of the Discovery narrative has paid off, with minimal drop-off throughout the experience. O/B’s componentized approach to templating has allowed the site’s content to continue to evolve, and as new events are scheduled, new stories and experiences will be added to the site. Most importantly, the campaign sparked an increased interest in the power and impact of research and innovation at U of T, and helped to pave the way for the next 100 years.