Project Overview

A large biomedical research institute tasked us with creating a new website that, while having the same approximate primary audiences as the Ragon, had as its top strategic goal attracting the best global talent, both PIs and scientists. In exploring fresh solutions we landed on using the metaphor of a scientist’s notebook to guide the design of the site. This project is still in the design phases so we have anonymized the client and are sharing designs to illustrate creative ways that institutes can break out of the traditional corporate mold.

Style Exploration

  • First Concepts

Homepage

  • Early Concept

Institute Page Header

  • Concept

Animated People Page Header

  • Concept 1

  • Concept 2

  • Concept 3

  • Concept 4

Join Page Header

  • Researcher collage concept

  • Conceptual layout

First Concepts

Visually exploring the core idea: how do we use the scientist’s notebook metaphor to make a design aesthetic that stands out from other Institutes?

 

 

Early Concept

This early concept explores how a grey/neutral colour palette can interact with colourful main visuals and accents.

An example of how the final site, using code, can animatedly transition a greyscale visual into colour with a watercolour effect while the user is scrolling.

Concept

Leveraging a beautiful aerial shot of their building against the skyline, we integrated the human element to juxtapose a sense of the importance and beauty of their organization with the human heartbeat at its core.

Concept 1

The Institute is full of diverse professionals, both scientific and not, that come together to make it great. These concepts are different takes on manifesting that with an animation that shows different levels of their facility and the team’s journey and collaboration therein.

The first concept depicts different layers of collaboration starting with an architectural view (top), down into a focused collaboration space (middle), and finally, those collaborators spreading their knowledge and impact across the Institute in a cross-disciplinary way.

Concept 2

The Institute is full of diverse professionals, both scientific and not, that come together to make it great. These concepts are different takes on manifesting that with an animation that shows different levels of their facility and the team’s journey and collaboration therein.

The second concept has the same parts as the first but puts the collaboration front-and-center, demoting the architectural view to be the foundation and least emphasized space.

Concept 3

The Institute is full of diverse professionals, both scientific and not, that come together to make it great. These concepts are different takes on manifesting that with an animation that shows different levels of their facility and the team’s journey and collaboration therein.

Keeping the architecture as the foundation the primary focus now flips to first show the cross-disciplinary researchers distributed among larger teams before then coming together for direct collaboration.

Concept 4

The Institute is full of diverse professionals, both scientific and not, that come together to make it great. These concepts are different takes on manifesting that with an animation that shows different levels of their facility and the team’s journey and collaboration therein.

The final approach, a, interaction of Concept 3, concretely shows more of the characters working with and surrounding the core collaborative heroes of the story.

Researcher collage concept

This concept proposes a morphing collage that shows – not tells! – the importance of both diversity, equity, and inclusion at the Institute as well as the integrated and cross-disciplinary nature of our people and teams.

Conceptual layout

This concept features an aerial video of part of their space, both showing off their new facilities but also showing life, movement, and action as opposed to the staid, typical photography that would usually be expected.

Style Exploration

  • Visually exploring the core idea: how do we use the scientist’s notebook metaphor to make a design aesthetic that stands out from other Institutes?

     

     

Homepage

Institute Page Header

  • Leveraging a beautiful aerial shot of their building against the skyline, we integrated the human element to juxtapose a sense of the importance and beauty of their organization with the human heartbeat at its core.

Animated People Page Header

  • The Institute is full of diverse professionals, both scientific and not, that come together to make it great. These concepts are different takes on manifesting that with an animation that shows different levels of their facility and the team’s journey and collaboration therein.

    The first concept depicts different layers of collaboration starting with an architectural view (top), down into a focused collaboration space (middle), and finally, those collaborators spreading their knowledge and impact across the Institute in a cross-disciplinary way.

  • The Institute is full of diverse professionals, both scientific and not, that come together to make it great. These concepts are different takes on manifesting that with an animation that shows different levels of their facility and the team’s journey and collaboration therein.

    The second concept has the same parts as the first but puts the collaboration front-and-center, demoting the architectural view to be the foundation and least emphasized space.

  • The Institute is full of diverse professionals, both scientific and not, that come together to make it great. These concepts are different takes on manifesting that with an animation that shows different levels of their facility and the team’s journey and collaboration therein.

    Keeping the architecture as the foundation the primary focus now flips to first show the cross-disciplinary researchers distributed among larger teams before then coming together for direct collaboration.

  • The Institute is full of diverse professionals, both scientific and not, that come together to make it great. These concepts are different takes on manifesting that with an animation that shows different levels of their facility and the team’s journey and collaboration therein.

    The final approach, a, interaction of Concept 3, concretely shows more of the characters working with and surrounding the core collaborative heroes of the story.

Join Page Header

  • This concept proposes a morphing collage that shows – not tells! – the importance of both diversity, equity, and inclusion at the Institute as well as the integrated and cross-disciplinary nature of our people and teams.

  • This concept features an aerial video of part of their space, both showing off their new facilities but also showing life, movement, and action as opposed to the staid, typical photography that would usually be expected.