ABOUT VIDCODE
Vidcode offers award-winning computer science courses to students ages 9 & up. The course catalog includes 22 courses, including Computer Science I - JavaScript, Cross-disciplinary Coding & Physical Computing with Makey Makey. Vidcode works with parents, schools, and B2B partners to distribute the courses to over 11 million students.
Vidcode is unique in that students learn to code through media computation. Media computation is a research-backed method of teaching computer science with digital media and graphics at the center of the projects. Students create stop motion, face tracking, and meme projects as they learn computer science fundamentals.
Watch ‘Vidcode in 90 seconds’
REDESIGN & RESEARCH
Problem
In 2019 Vidcode had an outdated interface. Teachers were having a hard time evaluating our complete course catalog.
As you can see in ‘Course Page - version 1’ to the right, teachers select their course via a simple pull-down menu on the upper left-hand side of the screen. Once the course is selected, they view the units on the left and the tutorials within each unit on the right.
Hypotheses
Since our computer science courses are highly visual, we assumed that adding more images to the course page would benefit teachers and students. We took these hypotheses and built the wireframe ‘Course Page - version 2’ to test with teachers.
Solutions - Research methods and processes
Usability Study
Does the Dashboard & Course Page help teachers select, understand, and plan the content they teach for their coding course or unit?
During the study, we showed teachers the wireframe for ‘Courses Page - version 2’.
Findings & Results
Overall, teachers felt that the design of the new Course Page was visually appealing, clean, and easy to navigate.
One teacher appreciated that it looked like “a cross between Google Classroom and Instagram.”
Teachers felt that the images and design helped display pertinent information regarding the course content and praised the view for being “straightforward” with a “clean landing page.”
We ended up landing on ‘Course Page - version 3’ for production. We toned down the black edges and built a horizontal timeline to replace the unit navigator on the left in ‘Course Page - Version 2’.
The result was a 50% higher completion rate for each course.
Problem
In 2019 Vidcode had an outdated interface. Teachers were having a hard time evaluating our complete course catalog.
As you can see in ‘Course Page - version 1’ to the right, teachers select their course via a simple pull-down menu on the upper left-hand side of the screen. Once the course is selected, they view the units on the left and the tutorials within each unit on the right.
Hypotheses
Since our computer science courses are highly visual, we assumed that adding more images to the course page would benefit teachers and students. We took these hypotheses and built the wireframe ‘Course Page - version 2’ to test with teachers.
Solutions - Research methods and processes
Usability Study
Does the Dashboard & Course Page help teachers select, understand, and plan the content they teach for their coding course or unit?
During the study, we showed teachers the wireframe for ‘Courses Page - version 2’.
Findings & Results
Overall, teachers felt that the design of the new Course Page was visually appealing, clean, and easy to navigate.
One teacher appreciated that it looked like “a cross between Google Classroom and Instagram.”
Teachers felt that the images and design helped display pertinent information regarding the course content and praised the view for being “straightforward” with a “clean landing page.”
We ended up landing on ‘Course Page - version 3’ for production. We toned down the black edges and built a horizontal timeline to replace the unit navigator on the left in ‘Course Page - Version 2’.
The result was a 50% higher completion rate for each course.
Course Page - version 1
![]()
Course Page - version 2![]()
Course Page - version 3
![]()
Course Page - version 2
Course Page - version 3
Taking the findings from our usability study we redesigned the homepage of the Vidcode coding app. When beginning a course tutorial, we learned that teachers need quick access to relevant resources to support student learning. We added icons for lesson plans, sample solutions, and video walkthroughs.
We tested our first iteration of the course view with a group of 2 teachers and 97 students. Each teacher had been teaching coding for three years. Analysis of the qualitative data suggested that Vidcode's programming interface helped students feel more like coders.
We received feedback to consider building walkthroughs that introduce teachers to the new Vidcode features. This feedback inspired us to include onboarding videos at the bottom of my new dashboard design.
Homepage 2.0
We divided the homepage into three main areas: sections (classrooms), assigned coursework, and onboarding videos. Our need to train/onboard customers on the phone has been reduced by 75% since the redesign launched.
When asked what they liked using Vidcode, students reported that Vidcode scaffolded their learning, was enjoyable to use and allowed them to express individuality.
A subset of student survey quotes::
"That you can personalize your Vidcode."
"It teaches us how to code, and we can take our time with it."
"It makes learning to code fun and easy."
Teachers and students both reported high student engagement in using the Vidcode activities. Teachers said that some students planned to continue using the curriculum on their own after the study. In one classroom, many students completed all the modules in the JS 101 course by the midpoint of the intervention period (within two weeks) - suggesting that students are engaging in the lessons beyond what was instructed during their formal instructional time.
I redesigned the Lesson Plans page to be efficient, thorough, and informative for schools evaluating our curriculum for their long-term use.
Lesson Plans 2.0
Overall, students reported high engagement in their Vidcode use, finding the platform easy, fun, and relevant to their age demographic. Teachers felt that they could successfully use Vidcode in their classroom for three weeks during distance learning.
The redesign successfully created ease of use for teachers and students. It also allowed for an engaging and fun experience for students, which is a good sign that the platform is easy for them to use. The lesson plan redesign has allowed our current and new customers to navigate the resources more quickly during their busy school day.
After the redesign launched, Vidcode went on to receive the 2020 Parent’s Choice Award for ‘Best Website’.