joshua kery

Take a Shot at Changing the World

Responsive Website for Educators

MEDIUM

Responsive Website

WHEN

March - April 2021

MY ROLE

Design,
Full-Stack Development

GOALS

Celebrate science with teens through a video contest.

TOOLS

Adobe Illustrator
Wordpress

OVERVIEW

To celebrate science and vaccine research alongside the documentary film, Chasing Covid, producer Carl Kurlander and the Allegheny Intermediate Unit commissioned me to build a video contest website.

The contest asks teens grades 6 - 12 to make their own videos and help good information about science go viral.

FINAL PRODUCT

Visit the final website here.

Desktop

Landing

desktop landing

Educational Resources

desktop resources

Rules & Prizes

desktop rules prizes

Mobile

Landing

landing iphone mockup
resources iphone mockup

Educational Resources

Rules & Prizes

rules prizes iphone mockup

BACKGROUND

Chasing Covid tells the story of the research team at the Center for Vaccine Research at the University of Pittsburgh as they worked to develop a vaccine for COVID-19 in 2020.

To engage schools in celebrating the work of vaccine researchers everywhere, Take a Shot at Changing the World invites students to submit their own videos to a contest with a cash prize.

To do so, the contest creators needed a website that could:

  1. Share the film Chasing Covid and information about the contest
  2. Accept and feature video submissions
  3. Share educational resources with teachers looking to add this program to their curricula

DESIGN PROCESS

Collaborative Outline

Together with the contest's project managers, we created the following outline for the site:

  • Main Page

    • General Information about Contest
    • Link or Embed: Chasing Covid film
  • Other Pages

    • Resources for Educators

      • Lesson Plans
      • Links to Covid-19 Resources
      • articles
      • additional videos
      • Historical Information on polio and history of vaccines
    • Video Competition Rules
    • Submission Form
    • Galleries

      • Gallery: Middle School Videos**
      • Gallery: High School Videos**
    • My Info (if logged in) OR Login & Register (if logged out)

      • Logout
      • Profile Details
      • Change Password
      • My Video



Mid-fi Mockups

I produced two concepts at this stage to gather feedback about the aesthetic direction of the site.

rough1 rough2



Hi-fi Mockups

Landing

main page opt

Educational Resources

lesson plans opt

Video Gallery

video gallery opt

Individual Video

individual video opt