  

 

 



#  The Carmen Collection    

- Interactive
- Campaign
 
 

 

 

  ## Celebrating 150 years of  
**challenge**  
&amp; **triumph**

at The Ohio State University



 

 

    Read More Read Less    

 

  

 

   ![Image showing the intro design layout for an OSU Carmen Collection story](/sites/default/files/styles/16_9_small/public/2024-05/Story_Slide_1_2.jpg.webp?itok=hTTSNAJQ) 

 ![Image of the Carmen OSU Website story header](/sites/default/files/styles/16_9_small/public/2024-05/Story_slide_2_3.jpg.webp?itok=K-auG2ZW) 

 ![Image of the Carmen OSU Website story header](/sites/default/files/styles/16_9_small/public/2024-05/Story_slide_3_1.jpg.webp?itok=f17IJ6iS) 

 







 

 

   ![two images showing a carmen collection story detail page](/sites/default/files/styles/16_9_small/public/2024-05/carmen-03.png.webp?h=d5a29e98&itok=dPuiHOSW) 

  ![dark background image with a video player overlaid on top](/sites/default/files/styles/16_9_small/public/2024-05/carmen-04.png.webp?h=ce91db7d&itok=QDvmMtUW) 

  ![view of a large quote and audio clip player](/sites/default/files/styles/16_9_small/public/2024-05/carmen-05.png.webp?h=9ea50176&itok=C-jbNryu)   ![black and white image drum major of dwight hudson in 1978](/sites/default/files/styles/1_1_small/public/2024-05/carmen-06b.png.webp?h=48ecabe1&itok=FDFyhrt_) 

  

  ![three snippets of stories that happened around the same time period as the main story](/sites/default/files/styles/16_9_small/public/2024-05/carmen-08.png.webp?h=9f71e20a&itok=no2XAp_E) 

 

   

 

  

 

    ![Image showing an About section on the OSU Carmen Collection website](/sites/default/files/styles/16_9_small/public/2024-05/about_grid_image_1_0.jpg.webp?itok=UX9AcPxN) 

  ![Image showing a paragraph and graphic styling for the OSU Carmen Collection website ](/sites/default/files/styles/16_9_small/public/2024-05/about_grid_image_2.png.webp?itok=Oa8eERZr)   ![Image showing a double image grid for the OSU Carmen Collection website ](/sites/default/files/styles/16_9_small/public/2024-05/about_grid_image_3.png.webp?itok=f0JgEvG2) 

  ![Image showing a quote section on the OSU Carmen Collection website](/sites/default/files/styles/16_9_small/public/2024-05/about_grid_image%204_0.jpg.webp?itok=YMUYP180) 

 

    ![Image showing various phone screens of different layouts of the OSU Carmen COllection Website](/sites/default/files/styles/16_9_small/public/2024-05/Mobile_screens_0.jpg.webp?itok=R4ADU-9U)  

 

  

 In celebration of its 150th anniversary, we joined forces with The Ohio State University’s Office of Diversity and Inclusion to unveil the Carmen Collection web experience. Crafted in collaboration with Ohio State archivists, the Carmen Collection serves as a dynamic chronicle, capturing the myriad of individuals and events that have shaped one of the world’s most diverse educational institutions over the past century and a half.

The narratives featured within the Carmen Collection were unearthed through meticulous research conducted within The Ohio State University Archives. Dedicated archivists and student interns delved into a plethora of publications, documents, images, and artifacts, revealing the pivotal experiences, struggles, and triumphs of Buckeyes whose voices had long been buried within the annals of history.

Working in tandem with the archival team, our mission was to conceive and cultivate a flexible and captivating platform that would breathe life into these profound tales, despite the uncertainty surrounding the artifacts accompanying each narrative. Drawing inspiration from the tactile nature of archival work, we crafted a homepage that emulates the sensation of sifting through stacks of aged newspapers. Rooted in the spirit of exploration, visitors to the site are invited to pan through an infinite grid of images, each one a gateway to a forgotten story waiting to be rediscovered.

#### Visit

[Visit the Carmen Collection](https://carmencollection.osu.edu/)

#### Technology

- Drupal
- GSAP
- ScrollMagic
- Bootstrap
- fullPage.js
 
 

   [](/case-study/john-glenn-college) ![](/sites/default/files/styles/16_9_small/public/2024-06/OSUJG-Hero_1.jpg.webp?h=a485cb38&itok=tMjxGnWW) 

## John Glenn College

- Interactive