The Vaccine Makers Project (VMP) is a subset of the Children’s Hospital of Pennsylvania’s (CHOP) Vaccine Education Center (VEC). It’s a public education portal for students and teachers that features resources such as lesson plans, downloadable worksheets, and videos.
The Vaccine Makers team approached Zivtech in need of a site that closely aligned with CHOP’s existing site. They also wanted a better overall strategy for site organization and resource classification. Our team worked alongside theirs to perform a full discovery. Together we created a mood board, mapped out wireframes, and completed a site architecture plan. We then built an intuitive, on-brand site that allows teachers to easily access educational resources.
About the project
Functional Resource Classification
The site is dedicated to education, so resources were a main focus. Resources needed to be separated by education level: elementary school, middle school, and high school. We also needed to organize the information by segment so users could easily navigate and locate the resources they were looking for.
Our developers created a functional grouping system on the back end to group and display resources on the front end. They created a custom tagging system to display each video depending on which level of education was most applicable.
A Simplified Front End
After our developers came up with a system to classify and tag each part of the site on the back end, our design team created a tiling system for easy reference on the front end. Colored tiles appear under each video resource so that users can choose which level they want to access it in: elementary, middle, or high school.
Users can also easily navigate the site by clicking on the appropriate grade level in the lessons drop down menu. Each page provides access to all available information for that grade level in one place.
Cohesive Branding
The Vaccine Makers team also wanted to relate the site to the CHOP organization as a whole. The site lacked cohesion with the rest of CHOP’s digital branding. With a style guide already established, Zivtech’s design team determined how the existing concepts would best fit in with the new Vaccine Makers site. This part of the project required alignment of font styles, call to action button formats, color schemes, and content organization style.
The Vaccine Makers team wanted visitors to be aware that the site closely related to the information already offered on CHOP’s main site. This would now be evident through the use of repetitive elements, such as the same drop down menu style for content organization.
The project resulted in a new site that is easy to navigate for all user segments. Teachers can find lesson plans and videos to help reinforce topics, resulting in better education around vaccine science.
Why Drupal was chosen
Drupal has great media integration, especially for videos, and intuitive content authoring. The desired functionality could also be built with just Drupal core and a few contrib modules. Additionally, the parent organization was already using Drupal, so the client was familiar with the CMS.
Technical Specifications
Drupal version:
Key modules/theme/distribution used:
Views
To build out landing pages for each lesson level
Breakpoint
To easily implement the responsive design
Responsive image
For optimizing images for various screen sizes
Display suite
For creating multiple displays of content, such as videos, which are displayed in 4 variations
Mailgun
To solve the problem of outgoing email getting flagged
Mailchimp
To integrate mailing lists with a signup form on the site
Svg image
To display custom icons in various sizes
Twitter block
To embed their Twitter feed
Paragraphs
To build out the elements that make up the parts of the lessons
Recaptcha
To block form submissions by spambots
Contact emails
For better email handling on contact forms for site staff
