Team Mustard


Gooo! Team Mustard!

Our design partner at Odelay! brought us this project from the agriculture ministry of the Saskatchewan Provincial Government. The site was designed to educate youth about the mustard crop, a primary crop in Saskatchewan. The design and structure of the site was built as a set of simple educational games or puzzles to be used as a teaching resource for youth educators.

Animated Mustard

HTML5 and CSS3 animation was a primary element for this site. It was designed to be visually appealing to young children in order to promote interaction with the site. Because the animations had to work on tablet devices, Flash was automatically removed as an option. All of the animation and interaction was accomplished with javascript, HTML5, and CSS3. Animated elements ranged from simple infinite loops, scolling triggered blocks that appeared and disappeared and moved dependent on how far down the page the user had moved, to game result triggered animated elements.

Games and Puzzles

Interactive functionality had to be completely thought through. We had to anticipate any and all interactions that someone might have with each of the 4 games or puzzles. For the visitor to progress through the games, we had to be sure that all of the prerequisites for each game were met. The first "game" required the visitor to read through each of the four steps of the growth of the mustard crop. The second "game" requires the visitor to know the 8 parts of the mustard plant. The third "game" wants the visitor to know the "math" of the mustard plant, and finally the fourth "game" is a simple multiple choice set of questions the visitor can answer to show what they've learned about mustard.