Vidcode allows anyone to create their own Instagram-style filters, animations, motion graphics and music videos while learning JavaScript.

Vidcode is a project that started January 2014 at a Startup Weekend EDU in New York City, and has transformed into an exciting learning tool and creative coding platform.

Visit our promotional site to learn more, or check out the web app to see it in action.

When Vidcode started, we spent a lot of time talking to girls ages 11 through 17 about their existing interests, and focused on taking and editing photos and videos, and sharing them with their friends.

From there, we built a platform that allows anyone to create video and photo projects with JavaScript. Each project is built around a new programming concept.

See projects people have made using the platform.

My responsibilities at Vidcode include maintaining the web app and promotional website as well as designing and building new features and content, designing our upcoming mobile app, conducting user tests and interviews, designing and sending email newsletters, creating new projects and curriculum, designing content for Tumblr, Twitter and Youtube, creating illustrations and icons and making promotional posters and print media.

Wireframes for profile and project pages

A poster showcasing Anaya, one of our users, and her presenting with her group at the Vidcode Hackathon.

Case Study 1: Tech Jam with Girl Scouts of Greater New York

Vidcode teamed up with Girl Scouts of Greater New York to create a featured Tech Jam for Computer Science Education Week.

Computer Science Education Week took place December 7th to the 13th, and is meant to provide a time for schools, teachers, and communities to set aside a small amount of time devoted to exposing students to a greater realm of CS opportunities. This year, for the first time, Computer Science Education Week offered Tech Jams, model events for a community or school to celebrate computer science.

My Role

My role was to design and build the Tech Jam experience and materials, aligning with the Girl Scouts of Greater New York brand. This included the Hour of Code activity, volunteer training, off the computer activities, a map for classrooms to share experiences and outreach materials.

The Tech Jam centered around a ‘Bestie Greeting Card’ activity. Students recorded videos of themselves, and used JavaScript to add graphics, messages and music to their videos.

The Build

The parts of the Tech Jam that had to be built and tested included (click any link to see the finished product!)

Everything was created using the Girl Scouts of Greater New York’s design and branding guidelines.

As I designed and built the activities, I tested them with whole classes of girls, small groups of girls, and individual users between the ages of 9 and 15 during the design and development of Vidcode’s Hour of Code. Their feedback inspired alternate quiz content, a recording modal built into the platform, a timeline tracking progress, and a badge on the last page. I also helped us find things that weren’t working, such as introductory videos that were too long, and confusing calls to action.

Visit the Tech Jam & Hour of Code

Outreach

We worked with Girl Scouts of Greater New York to reach out to troops around the country, and give them the tools and support they needed to run their own Tech Jam. We also reached out to our list of educators with emails, letting them know about the opportunity and how they could prepare.

See the outreach materials I designed and view the blog post I wrote, letting people know what a Tech Jam is and how they could get involved.

Results

The results of the Tech Jam and Hour of Code were extraordinary. During the week, over 3,500 students participated in the activity in 41 countries and 42 states. In addition, we

One school in New York told us, "Many of the girls in this troop of 4th and 5th graders have never coded before or thought about computer science as a future career option. This first exposure will hopefully get them interested in this field - and continue their love of learning about technology!"

Another classroom in Dallas Texas shared with us that, "This event will be special for my students and I because it will be, for many of us, our first time being exposed to coding/programming. As we learn the programs of Adobe CS6 this will be a great compliment to help us take graphic designing to a whole new level." In Northern California, "The Hamlin School is working with the girls and encouraging them to use code to 'build their dreams' at both the middle and lower school."

All the videos created were published to a Hall of Fame I designed and created, where students voted for their favorite projects and could see each others code.

Read more about the results and event in a blog post I wrote and published after the event.

Press of the event included a news story from NY1, watch it here.

Case Study 2: Girls Code 4 Climate Contest

In Fall 2015, Vidcode partnered with Millennium@EDU Sustainable Education to launch a contest focusing on the earth’s climate - bringing video creation and programming into science classrooms around the world.

I worked on the design, development, writing and outreach on this project.

The Plan

Vidcode joined forces with Millennium@EDU Sustainable Education to run a contest using the Vidcode platform.

The goal of this contest was to contribute to a better understating of Climate and matters related, as a Contribution to the United Nations Framework Convention on Climate Change, and to improve climate literacy, global citizenship and participation as well as technology skills.

The contest ultimately combined video production, programming and environmental science in the classroom in a creative and engaging way.

The task involved planning the scope of the contest, how to make it accessible to students and educators, outreach, and creating the interface for the contest on the Vidcode platform.

The guidelines of the contest were defined as,

“using the Vidcode platform, code a short video on climate issues, such as:

The Build

Before releasing the contest, I wanted to make sure that it would be easy for educators to use with their classes. After speaking with middle and high school teachers and asking them what would be most useful for them, I assembled a ‘Teacher Guide’ offering more information about the contest, sample videos, and a ‘Class Discussion’ section with more information and resources on each of the contest topics. As teachers began planning their lessons around the contest, some reached out and requested a corresponding ‘Student Guide,’ which had access to the same guidelines, glossary and inspiration. I modified the teacher guide, and added the new student guide to the contest splash page.

In addition to the guides, I created an outline for a 45 minute lesson, which covered researching and planning student video, recording and coding videos and submitting them to the contest.

In addition to the supplementary materials, I had to plan how the existing Vidcode workstation would be used to support videos about climate. The first problem was that the Vidcode platform didn’t support sound! I worked with another developer to include sound in our uploading process, and to create a button on the interface that allows ‘muting’ of the video.

The next step was creating a way for students to easily record themselves in the interface. After going through a few iterations, I landed on a modal that appears on page load, where students can choose to record themselves or upload a video they recorded somewhere else. (Example with awkward selfie below).

The final step was content. I created climate related graphics to be used in contest videos, selected effects that could be used to enhance the message of the videos, and added a walkthrough with more information introducing the code (JavaScript!) that students were using to customize the effects and graphics of their videos.

Outreach

For the contest launch I wrote a blog post discussing the goals and motivations of the project. It focused on the importance of giving students the tools to express themselves through art and technology. I’m really proud of it, and would love if you gave it a look.

I also designed an email campaign, reaching out separately to educators, Vidcode supporters, and Vidcode users, encouraging them to participate.

Results

The response has been overwhelmingly positive, around 300 students from around the world submitted videos to the contest. The winning videos were selected and announced at BETT 2016, and I created a winners’ gallery showcasing the winning videos.

The most important result, of course, is the experience of the participants. I worked with the teacher of the winning groups of girls to get their feedback about the experience, and that’s published in an incredible blog post.

Katja, one of the winners, said that after winning the contest, "I started to think that I can do things and can make an impact on the world. So now I’ve entered in a few different competitions." Sudhiksha, another contest winner, said "I love this feeling because many girls are not considered to be engineers or scientists. I don’t like gender inequality. I think that’s one of the top problems of the world. To win against 300 other videos is an honor, and it shows that girls can code."

Similar Projects