Background
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
Credits
Agency— C&G Partners
Role— User Experience Design, Wireframing