modular web design for scientific research


Rockerfeller University a center for scientific research, dedicated to attract the most brilliant biomedical research scientists, freeing them to choose their pursuits, and surrounding them with diverse and collaborative colleagues who are all leaders in their fields.


Target Audience

With their primary website audience as prospective and current grad students and faculty, they wanted to revamp their website to reflect more visual appeal and easier navigation.


Navigation Prototyping

We simulated two types of navigation design through interactive prototyping tool Invision App. The first one is the traditional mega dropdown menu that shows 2nd and 3rd tier submenus.


Animation 1: Traditional 3 tier mega dropdown menu

Animation 2: Accordion fold reveal


We wanted to push the concept further by integrating an accordian fold concept on the main navigation that expands and contracts as you hover over each section – while applying the same content hierarchy behind the megamenu.



User Interface Design

The client liked the accordion fold concept, so we proceeded with an aesthetic that follows the organic look and feel of the navigation. As Rockerfeller University’s goal is to use more scientific imagery to attract a younger crowd, the homepage reveals a background image on hover within the modular grid system.




X-Ray Hover Interactions

As you hover over each section, it reveals an image from their research institute that represents its respective category.


Background image reveal on hover state

X-ray vision: Reveal background image on section




Agency— C&G Partners
Role— User Experience Design, Wireframing