The situation:

Showing student journeys virtually.

Grinnell College, a private liberal arts and sciences school located in Grinnell, Iowa, came to Hounder in need of developing Drupal backend components that enabled them to interactively showcase student journeys, origin stories, and student accomplishments post-graduation. Grinnell communicated a desire for seamless navigation throughout and between each individual student’s page, as well as embedded journey maps that display student movement as their academic paths led them from home, to school, and abroad.

So, after spending time getting to know Grinnell, their needs, and their vision, our development and design teams got to work cranking out Drupal solutions and planning UX/UI strategies. 

Navigate the journey & tell the story right

With our solutions in motion, we realized that our efforts needed to work toward answering one vital question: How do we utilize our dev and design expertise to help the fine folks at Grinnell realize their storytelling needs?

After all, these are real stories told by real people chasing a meaningful academic experience in a very real world... And we wanted to bring Grinnell's site visitors as close to that fact as possible.

To answer the question at hand, first we resourced our design team to come up with a user experience committed to communicating Grinnell’s student journeys in an interactive and eye-catching manner. With wireframes and creative input firing full bore, our developers got straight to work transfiguring their deep dev expertise into pure Drupal magic.

Some examples of dev magic on this project:

  • Streamline UX with Drupal components.

  • Implement UI and animation improvements.

  • Create a templatized system for easy user/editor navigation.

  • Build sweet and slick navigation.

  • Buttress the frontend with backend usability + reusable set of design components.

Breaking down the vision

In order to build Grinnell an ability for interactive storytelling, complete with navigable story maps and easily curated student images + videos, Hounder strutted our tried and true process map according to this sequence of team operations: 

1. The development and design team worked closely with Grinnell representatives to form an in-depth understanding of their needs and creative vision. 

2. Design team: Envision and create templates that will as inspiration for development. 

3. Dev team: Templatize design. Code Drupal components based on design team’s work. 

4. Execute, launch, and bring it all to life. 

Delivering key items for successful storytelling

Grinnell received a thorough development and design treatment, with long hours spent fine-tuning the design's intended look, feel, and function. Our dev team and their propensity for some seriously hot keys took Grinnell's vision and broke it down into the bits of logic necessary to code an intuitive yet detailed Drupal backend—a tool Grinnell will continue to use as their forthcoming students' journeys begin to dot across the map.

Here's what we delivered:

  • 20+ revamped student journey pages

  • 11 major components for student content

  • Incorporated existing code/modules into Acquia Cloud

  • Created story maps: Placed existing content from Arc GIS into new pages

  • Configured Drupal CMS

  • Component-driven flexible content editor

  • Reusable code blocks

  • A templatized system

Developers corner: Look inside the dev mind

Interested in the deep technical details? Join Hounder Developer Rashad Naime as he discusses some of the development decisions we made while building Grinnell's site navigation.

Grinnell's custom Drupal CMS

By the end of our own journey with Grinnell, we delivered custom Drupal components with easy, intuitive editing, as well as a templatized system for seamless editing, navigation styles that highlight the unique aspect of each individual student journey, and reusable code blocks that are easy to apply to each student’s page. 

. . . But don't just take our word for it. See for yourself!

Read more Hounder case studies