The website’s focus is to teach the fundamentals of programming and computer science to students aged 4 – 18 (I focused on the 4-6 year old activities).

Review

Aside from teaching younger students the fundamentals of coding and computer science, studio.code.org also exposes them to the idea that coders can be of any background whether it be female, black, hispanic, or athletic. The front page of the website is covered with a myriad of coding activities that a student can click on, ranging from coding fundamentals to coding games with characters from Frozen/Star Wars. This gives users a lot to choose from, but at the same time, the choices are all appealing. I played a Star Wars coding game and did a few coding fundamentals.

For the coding fundamentals, the course started with a video that introduced pair programming – the idea of coding with a partner. This video was interesting as it did two things. One it was presented by two little girls, with one being caucasian and one being black. Two it also talked about how to treat your partner with respect and not fight over the mouse. It also encouraged the pair to communicate and talk with each other. I thought this was really nice because it exposed users – especially young ones – to the idea that demographics that are usually underrepresented in tech can code. After the video it had me go through a few mouse clicking and drag and drop exercises. I think this is useful because it not only gets young users familiar with how the mechanics of course’s lessons but also dragging and dropping objects on the computer in general. Once these drag and drop exercises were completed the next thing the course had me do were basic block code problems involving Angry Birds characters. It had me drag and drop blocks that directed the bird to go in certain directions. My job was to guide the bird to the pigs. Presenting code in the form of simple blocks is a method used at UC Berkeley and Harvard and is a very common way for teaching coding. Doing it this way helps users develop the intuition behind functions or methods, which are essentially blocks of code meant to perform a certain purpose. After a lesson on blocks, the course moves onto a basic look over algorithms. Before starting to code, a fun video about making chocolate is shown and algorithms are presented as instructions on how to do something, which is a basic but great way of doing so. The algorithm activities were filling in steps and directions. From the fundamentals I decided to play the Star Wars coding game, which involved similar mechanics as the lessons, but were less directed. I was left to solve the problems on my own. It was fun to see how they utilized the droids from Star Wars as characters.

Overall, it was a really great way of presenting and teaching 4-6 year olds how to code. The games and lessons were fun and interactive. The inclusion of characters from popular culture was really nice as well. In addition, the videos that were shown added a great dimension to the whole experience. They touched on subjects such as perseverance, respect, and communication. The videos also does a great job at focusing on people who are underrepresented in tech. Throughout the video I saw girls and boys who were black and hispanic. I think this is valuable for development because this would essentially be telling young users that anyone can code.

Redesign

The biggest thing that I would redesign about the site is who it focuses on. As of now a lot of the games show “All Ages” or even “4 – 18.” While the games and lessons can be play by people in middle school or high school, they wouldn’t be very fun or too educational. On top of that, almost all the videos had children who were introducing the topics. Overall, I it felt like it was trying to appeal to too many ages. This can be summed up by a look of the front page:

To me the front page can be redesigned to represent what age group the lessons are focusing on. For example it can look like this:

To me the front page can be redesigned to represent what age group the lessons are focusing on. For example it can look like this:

Here there are dedicated tabs at the top for each age group. By selecting an age group at the top users would be brought to a different web page that is dedicated for just users of those ages. That way, each age group web page could be decorated differently to reflect users. Ages 4 – 6, for example, could have the background filled with Star Wars or Frozen characters. Similarly, ages 14 – 18 can have a more sleek and modern design that is more mature.

Description:

URL: http://www.vidcode.io/

Objective: get teen girls excited about coding by creating fun video and graphic effects

Target age: teens

I chose to study Vidcode, an online platform that empowers teen girls to learn to code and unleash their creativity by creating music videos, motion graphics, and fun video effects. Vidcode attracted me attention in the first place because it’s very different from many other coding websites and apps out there: it leverages the popularity of social media and allows kids to create something cool and express themselves, and the educational goal of teaching kids how to code follows naturally. (LEARNING GOAL)

Just by exploring the website, I realized that Vidcode does a great job creating communities of learners. It not only provides educators with resources including curriculum and projects, but also creates an online community for kids to share their projects with others. By involving educators, the kids’ learning experience can take place in formal learning environment in school as well. And by exploring what other people have done, kids are very likely to be inspired and even collaborate with one another. (SOCIAL)

Other than making the learning experience social, Vidcode promotes active, engaging, and meaningful learning. Since kids are working on media that’s interactive and moving rather than static, they are more likely to stay engaged; more importantly, they stay active because they can see the changes of the media based on the modifications of code (ACTIVE, ENGAGING). Since kids can upload their own videos and images to work on, what they’re doing is relevant and meaningful to their own lives (MEANINGFUL). As a result, they are more motivated to learn.

After registering an account as a student, I found that the design of the project screen is intuitive and easy to navigate. Video/image is shown on the right; codes that are generated based on drag and drop are in the middle; lessons are on the left. The lessons are short descriptions of computer science basics with actionable items, keeping kids engaged (ENGAGING).

Vidcode is pretty effective as a learning tool; I would say that it scores high in all 5 criteria: active, engaging, meaningful, social, and learning goal. However, there are three aspects that I’d to add to make it better. First, it does seem to me that it’s tailoring at very beginning users with drag and drop blocks and limited options regarding blocks. I would add more functions, or even guide students to create their own cool functions to keep the momentum of more advanced programmers. Second, the learning goals are currently grouped by what media the kids are working on (i.e., movie, animation, graphics, etc.). It would be great if those learning goals can be connected to the bigger picture, such as Common Core and AP Computer Science, so that kids can find more meaning and relevance in what they’re learning. Third, users cannot collaborate online; I would make the project workspace collaborative so that more collaborations could happen virtually.