Employer: University of Connecticut Digital Media Center
My Role: Project Manager & Media Producer

(TL;DR: I was heavily involved in leading a team of 15 to create first ever 20' by 20' interactive video wall incorporating 13 Microsoft Kinects and several overhead optical cameras, along with nine separate interactive scenes to run on it.)

The Challenge: Our client asked us to create an immersive digital experience to act as the centerpiece of their newly renovated public lobby. (Because the installation has not had it's official grand opening yet, I must keep the client confidential and cannot share any video of the interactive scenes publicly. When the installation officially launches, I will update this section with video of the interactive wall in action.)

Our Solution: We set out to build a two-story interactive display that will react to guests' movements and gestures, as they move through the lobby. The system we built consists of 13 Microsoft Kinect sensors, seven optical cameras, 16 rack-mounted CPUs, and 195 Barco LED panels forming an 18-foot tall interactive display. We created several (nine to start) interactive scenes to be run on the wall, as well as the ability to add new scenes remotely.

The Process:

The following is a brief description of the steps we took to develop this huge project from concept to finished product. As the project manager I was deeply involved in every step of the process.

Step 1: Research & Project Definition
Our first step was to define the interactions that our users will be able to have with the media wall. Once our desired interactions were defined, it was time to research possible hardware and software combinations that could be used to build our desired system. During our research we found that nobody had completed an interactive media wall at a scale this large before. We found a few interactive installations that incorporated two Microsoft Kinects. We found some large screen installations that incorporated Kinect interactivity where the user was forced to stand in a certain "hot spot" in order to interact with the system. Our system was to cover an area of 20' by 20' in front of the display and must have seamless interactive coverage for multiple (up to 12 simultaneous) guests.

Step 2: User Personas & Storyboarding
With our broad project goals defined, we created personas for the users that we were building the system for. As the media wall was to be installed in a medical facility for children, we needed to take into account that our system must be able to function with children who may be dealing with physical disabilities. It must also be simple enough for a 4-5 year old child to use, while still engaging to teenagers. This was a very big creative and technical problem for our team. We decided on three interactive scenes to start with and created storyboards to display the creative style of each scene, as well any characters involved in the media, and the interactivity that would be possible.

Step 3: Interaction Flow Charts & Animatic Storyboards
In order to share our desired interactions with the programming team, we created interaction flow charts, interaction tables, character profiles, and animated storyboards. This was the start of a back-and-forth, iterative process that I led between the design team and the programming team.

Step 4: Building the Prototype System
Thirteen Microsoft Kinects + seven optical cameras + 16 rack mounted, networked computers + thousands of feet of cabling + 20,000 lumen projector + MANY hours of programming and testing = working interactive media wall prototype.

Step 5: Interactive Scene Production
Now it was time for our programmers to dive into Unity and for our design team to create animated sprites for all of our characters. As the Media Producer of this project as well as PM, I was in charge of integrating all of the artwork into Unity, animating the characters, and applying the interactive scripts that our developers created. As with every other step in our project, this step required a lot of user testing and many iterations.

Step 6: Testing & Iteration
With our system and interactive scenes functioning, we began many cycles of user testing, interviewing, note taking, and artwork and programming iterations.

Employer: University of Connecticut Digital Media Center
Client: University of Connecticut
My Role: Technical Director

(TL;DR: I helped design the shooting and editing process of 24-camera Matrix-style time-slice video.)

The Challenge: Our team of students, faculty, and staff at the Digital Media Center was challenged with creating a Public Service Announcement for the University of Connecticut. This PSA would be broadcast nationally during commercial breaks of all televised UCONN sporting events, as well as distributed online. The commercial would need to support the new "Unleashed" branding campaign that had just been put in place at the university. We were challenged with supporting the theme of "Search, Disrupt, Succeed" and position UCONN as an institution on the cutting edge of education.

The Process: The process that we followed to produce this commercial can best be described in two phases. The first phase is deciding the "WHAT" and the "WHY" behind our commercial and the second phase is the "HOW" we went about filming and editing it.

Phase 1 (The WHAT and WHY):

We needed to find a way to stand out from every other school's PSA. During our research phase, we watched hours of college commercials and found they were all the same. Every school followed a similar template: start with close ups of smiling students, add a professor in a lab coat, some dramatic inspiring music, include overhead shots of a beautiful sprawling campus, and add in a student voiceover talking about how they are building the future. You could take any two commercials, switch the school logos at the end, and nobody would notice the difference. There was nothing to make one school stand out from the others. We needed to find what we could do to make UCONN stand out from the pack.

UCONN was undergoing a rebranding and adopting a more aggressive marketing strategy. We decided to produce an aggressively themed PSA. Every aspect of the video was carefully chosen to fit our action-oriented theme. The music was chosen to be aggressive and titles were used instead of voiceover actors. We choose to let the imagery speak for itself. To enhance the action-oriented imagery, we decided to use a time-slice video effect. This incudes using multiple cameras to film your subject from multiple angles simultaneously. During editing, the multiple angles are used to create the appearance of freezing time. This effect was made popular in the movie "The Matrix."

Our goal was to have the commercial "punch you in the face." We wanted it to grab your attention from the first second, before you had a chance to get off the couch and run to the kitchen. We wanted people to remember UCONN as a school that stood out from the rest.

Phase 2 (The HOW):
Once we decided to feature the time-slice effect in our commercial, we had to figure out how we were going to shoot and edit the footage. After researching time-slice video photography online, we choose to use 25 GoPro cameras, mounted on custom-built multi-camera rigs.

I worked with a group of four students to develop the filming and editing process. We spent three weeks developing and perfecting our system. When the time came to film with our actors, we only had an hour to set up, film, and break down for each shot, so we needed to have an optimized routine. Filming simultaneously with 25 cameras increased the post-production process significantly. We also had to develop and efficient process to import, organize, and edit all of the footage. In the end, we had the whole process down to a science, which not only made the commercial possible, but also easy to teach to new students in the future.

The video below shows our production process:

Employer: University of Connecticut Digital Media Center
Client: Connecticut Humanities
My Role: Front End Web Development & Server Migration

Project Overview:

Connecticuthistory.org is a large-scale Wordpress site covering the stories about the people, traditions, innovations, and events making up the history of Connecticut. I was brought onto the project to oversee the site's migration to a new server, and to perform several updates to the site's custom built Wordpress theme.

The Process:

When I was brought onto the project, the site was having trouble with server crashing on a consistent basis. The site was one of several Connecticut Humanities sites that were being attacked and taken down by denial of service attacks. My first task was to prepare the site to be migrated to a new server. We chose to use WPEngine to host the site. I worked with the IT department at the UCONN Library to migrate the site over to WPEngine's server.

After the successful server migration, I was next asked to modify the site's custom Wordpress theme. I created a print stylesheet in CSS, hacked several plugins, and created a unique "Featured Article" section that required customized coding. My challenge with the "Featured Article" section was to add the ability for each Category, of which there were hundreds, to have a Featured Article assigned to it. The site's template must also not break if any given Category did not have an assigned Featured Article. To solve this, I created a Custom Field within the Wordpress page and post edit screen, and incorporated that custom field into the template page for the site using php. This addition can be seen on any Town, Person, or Topics landing page within the site.

Live Site Link:

www.connecticuthistory.org