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.





UX PRODUCT

Responsive Web Interface

desktop landing
Landing Page
Mobile Landing Page



desktop resources
Educational Resources Page
desktop rules prizes
Rules & Prizes Page
Mobile Rules & Prizes and Educational Resources Page

BACKGROUND

Inspired by the Documentary

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

Mood Board and Concept Sketching

While discussing functional needs with the contest's project managers, I began by assembling a mood board over Pinterest and by sketching aesthetic features for the site.

pinterest concept sketch



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
Mid-fi Landing Page Option 1
rough2
Mid-fi Landing Page Option 2



Hi-fi Mockups

main page opt
Landing Page
lesson plans opt
Educational Resources Page
video gallery opt
Video Gallery Page
individual video opt
Individual Video Page

With the graphics prototyped at a high fidelity, and with the website leveraging traditional interaction patterns, I decided to move into development rather than create a clickable prototype.