Media On Demand Site for Grad Show 2016

A presentation of the home screen of the MOD system for 2016 Film and Animation Grad ShowA presentation of the project screen of the MOD system for 2016 Film and Animation Grad Show The content screen of the MOD system for 2016 Film and Animation Grad Show

Check out this demo.

Overview

This project was for my Web Practices class. The goal of this project was to build a media on demand system for the 2016 Emily Carr University Grad Show; Students from Animation, Film, and Installation Art major would upload their projects to the MOD system, and present them to the public. This was the first project that involved whole class to work on, and this was also my first WordPress site that I built. It took us about two months to build the site. The result was pretty good; students are happy about what we build. I also learned quite a lot about WordPress from this project.

 

Research

First, we separated into couple small groups, and each group designed their version of this mod system, then proposed it to the representatives from animation and film student. They picked their favorite one, then we as a class build it together. Before we started to design, we had a chance to interview some students from animation and film major for their needs of this MOD system. They wanted something that is modern and clean. They wanted their work to show off on the system. They though some design elements from some MOD systems like Netflix would work for them. Based on those results, our team came up this design.

 

MOD First Version Preview Page
MOD First Version Preview Page
MOD First Version Home Page
MOD First Version Home Page
MOD First Version Brief Page
MOD First Version Brief Page
MOD First Version Project Page
MOD First Version Project Page

 

 

Refine

Then our design got chosen by the students. So the class moved on to build this site. In this phase, we separated our class into three groups; design, coding, and management. I am the lead on the coding team. The management team continued to communicate with students; the design team tweaks the design based on the feedback, then my team builds it. This is the final design came from the design team.

MOD Final Version Preview Page
MOD Final Version Preview Page
MOD Final Version Home Page
MOD Final Version Home Page
MOD Final Version Trailer Page
MOD Final Version Trailer Page
MOD Final Version Project Page
MOD Final Version Project Page

 

Building

It was the first time for any of us to build a WordPress site, but it had a great start, I found out a free theme that is close to what we designed. I also found out a tutorial online that showed us how to make the animations that we want on the home page. We got a solid foundation to work on after we got those things.

a screen shot of Caos theme to build upon for MOD
A free WordPress theme call Caos that we can use to build upon for MOD
A gif of the animation we need for home screen
The animation we need for home screen

 

The process of building this site involved a lot of trial and error. For example, we wanted students to upload a trailer for their project, so we set up a custom field to do this. However, the video is a bit trickier than that just plain text. It’s quite hard to pull video out of a custom field and play it locally. We did a lot google research and finally found one plugin that fit our needs perfectly.

This is what we want to do for the trailer
This is what we want to do for the trailer
A plugin that we used, works perfectly for our needs
A plugin that we used worked perfectly for our needs

 

We used Github to share our codes, but same codes worked differently on different computers. We had a hard time to figure it out. We also have to tweak the design while we build it because sometimes it’s just impossible to do the things that we want. Fortunately, we managed to solve all the problems and get the project finished on time.

 

A presentation of the home screen of the MOD system for 2016 Film and Animation Grad Show