Creating educational videos developers actually want to watch

Anthony: I feel like I was coming down like a tunnel, like I'm going to go play a game or something. Alrighty. Are we all good? Let's do it. Alright. This is a cotton-top tamarind. It is a species of monkey that is indigenous to the northwest rainforest of Columbia. And while this little guy is incredibly cute, he is also incredibly endangered. So when I was in college, I was staffed on a research project to help build an app that would help preserve the cotton-top tamarind species. And I was thrilled to be on this project. I mean, who doesn't want to protect this cute little face? But there was just one problem. The project that we were working on was using this new backend as a service platform called Firebase. And I had never used Firebase before. And so naturally I, you know how these projects go, right?

There's no time to learn the new tech, you just have to meet deadlines immediately right off the bat. And so I dive immediately into the Firebase docs and I am trying to find anything I can to just get up to speed on Firebase, but I quickly realise that there is a tonne of information and I am feeling immediately overwhelmed. There's just so much to learn and I don't have the time for this. And so I ditch the docs and I decide to go look around the web and try to find some kind of resource that can quickly get me up to speed on Firebase when all of a sudden I find a video by a creator named Fire Ship Go. Next slide. Firebase in 100 seconds. And my first thought was, there's no way. There is no way that someone can capture all of what I saw on the docs in 100 seconds in a video, but I was desperate.

So I click on the video and sure enough, in 100 seconds I have a high level understanding of how Firebase works. So I watch another one of Fire Ship's videos and this one goes a bit more in depth. I spend five minutes and after five minutes I feel confident that I could at least start playing around with Firebase. And so I start working on the act. This was the first moment that I realised the power of educational videos. I can still remember that feeling of going from sheer anxiety to confident developers in five minutes just because of these videos that I watched. And the special thing here is I realised this was such a huge unlock for me because this meant that anytime that I needed to go and learn a new technology, I could just go and go to YouTube and watch a video. Except I quickly realised that that wasn't always the case. Because while there are plenty of quality videos like Fire, there are dozens if not hundreds of low quality tutorials as well. And I know this because I've made a lot of them.

Hello everyone. My name is Anthony Giuliano and I am a developer relations engineer at Block where I lead our developer video programme. And as I mentioned, I have made my fair share of not so great videos, but over years of improving my videos and honing this craft, I have developed a series of tools and techniques and strategies that have helped me to create educational videos that developers actually want to watch. And so today I'm going to walk you through my entire process. I'm going to tell you everything that I do and everything that I think about when it comes to creating educational videos. And by the end of our time here today, you'll walk away with an end-to-end process that you can use to start to create your own educational developer videos. So let's get into it. Why is it that fire ship is one of the most popular tech YouTube channels out there and yet he doesn't use any kind of flashy animations, he doesn't have some fancy studio with cameras and lights, he doesn't even show his face in his videos.

It's because he understands what I believe is the secret, the foundational element that you must have in order to create effective educational videos comprehension. At the end of the day, your viewers are coming to your videos to learn something. They want to get answers to their questions. And if you can't effectively communicate your ideas to your viewers, then nothing else matters. It doesn't matter if you have a fancy studio with cameras and lights or flashy animations and motion graphics. None of that matters if you can't articulate an idea to your viewers. So everything today we're going to be talking about a lot of different elements of the video making process. And everything today is meant to serve that end goal of comprehension. Next slide. So let's talk about your audience. Is it critically important that when you make a video you know who you're talking to because you wouldn't explain something to your coworkers the same way you would explain it to your grandma, right?

You have to know who you're speaking to. So for me, I like to think of a few different things when I'm thinking about my audience. First is what is their technical experience level? Are these junior developers, senior developers, students? And secondly, and more importantly, what is their familiarity with this specific topic that you're talking about? Because even if you're talking to senior developers, if you're trying to teach them something in Python and these are senior JavaScript developers, then you need to factor that into your approach. The other things here that I like to take into account with regard to the video itself. First and foremost, what is your key takeaway? What is your audience going to learn? What are they going to take away from this video? And secondly, what is the level of depth that you're going into in this video? Is this supposed to be a more high level and conceptual video, or is this going to be something a bit more in the weeds, maybe in the IDEA bit more hands-on? It's critically important that you establish these things early in your process because that way when you go to actually make your video, you'll know exactly what direction you're going in and who you're trying to serve.

Now, if this sounds like a lot, don't worry. I've put it all in a script template. Now, full transparency, I stole this template. This actually comes from another Deb advocate named Todd Pelman, who Fittingly used to work on the Firebase team and made a lot of their videos. But the thing I like about this template is that at the very beginning we establish our target audience and our key takeaway, we're putting these things at the forefront of your mind. So you're thinking about them as you're going through and scripting your video. I also really like this things I wanted to cover but will have to be deferred to separate videos section. The reason we have this here is because your videos need to be streamlined and focused. And by putting this here, I have a space for all of my tangential thoughts that probably don't fit in this specific video.

Now, the script itself, what's really powerful about this is it's divided into two columns. You have the actual script, the words that you're going to be saying, but you also have this action on screen section. And the reason we have that is because what you're showing on screen is just as important if not more important than what you're saying. And so as I'm going through and scripting my videos, as I'm writing out all of my script, I'm also establishing what the viewer is going to be seeing at any given point in time. And by doing this, I ensure that what I'm saying lines up with what I'm showing. So this is our script template. How do we actually create our script? What do we put in it? Well, any video is going to be divided into three main parts, a beginning, a middle, you'll never guess the last one and end the beginning.

We'll go next slide. The beginning is where you're going to hook your viewer. This is where you're going to convince your audience that this video is going to be worth their while. Now, there are a lot of different strategies out there for different ways to write effective hooks, but for me, what I've found with educational content in particular is that there's one strategy that works really well and it's really simple. Just tell them what you're going to tell them or better yet, show them what you're going to tell them. So introduce your videos with phrases like in this video, you will learn by the end of this video, you will know today we're going to walk through and then insert the concept that you're talking about in that video. That's it. And like I said, if you're building something in your video, show the viewer what you're going to be building.

There is nothing more enticing for a viewer than being told that this video is going to have the answers to all of your questions. Alright, after we've got the beginning, we get to the middle, and now the middle is where there's going to be the most variety depending on what you're talking about and how you want to present it. But what's most important with the middle of your video is that you have a logical sequence of your ideas. And that could be anything from starting very high level and moving more granular. It could be going through a progression of steps. Again, it's going to depend on specifically what you're talking about, but the key focus here is that when you're going through these ideas, you're stringing everything together with, but and therefore, and what I mean by this is you want to establish a causal relationship between all the elements that you're talking about doing.

This will create some kind of logical thread that makes it much easier for your audience to follow. And it doesn't necessarily have to be these specific words, and therefore you can use words like however. And so any kinds of these transitional phrases that create that logical connection, and now our last part, the end. The end is really good for two things in particular. First, it's a great place to recap what you covered in the video, ensure understanding. And secondly, it's a great place to give a call to action. So go and check out the GitHub repo for this project. Go and learn more in the docs. Go and build the app that you're actually trying to build. It doesn't necessarily matter what you're sending them to as long as you're pointing them in the next step in their learning journey. Now, I know what you're thinking, a script.

You want me to write out every single word that I'm going to say yes. And the reason that I recommend writing a script is because it serves that main goal of comprehension because at the end of the day, we are trying to articulate, trying to convey complex and technical ideas to our audience, and that understanding is paramount. And the only way that you can guarantee that your audience is going to understand what you're saying is if you write out a script, because you can try to do a video speaking of bullet points or off the top of your head, and that may work, but there's no guarantee that what you say is going to be the best that it can be. Only a script can guarantee that.

So now we're going to talk about the most important part of video audio. And I know that may sound a little strange, but think about the last time that you left a video because it was too hard to watch. I bet it wasn't because lighting was a little bit off or because the background was maybe not that exciting. I bet it was because the audio quality was poor. People are willing to sit through a video with poor visual quality, but they are not willing to sit through a video with poor audio quality. And so what that means is you have to invest the most in your audio, and that means getting a good microphone.

Now, there are a whole host of different microphones that you can get some really great ones at just about every different price point. But no matter which microphone you choose, there is one thing that I recommend you always do. This is Adobe Podcast. Now, I'm not one for hacks, right? These quick little things that you can do to dramatically improve your videos, but this is the closest thing that I have found to a hack. All you do is you take your audio or take your video, you throw it in Adobe Podcast and it fixes everything. And if you don't believe me, check this out. What's up, dev Han? I am on the busy streets of New York City right now to show you just how good Adobe Podcast is when it comes to cleaning up your audio.

What's up Devra Ka. I am on the busy streets of New York City right now to show you just how good Adobe Podcast is when it comes to cleaning up your audio. And if that doesn't blow your mind, it's also free. To me, this one is a complete brainer. Now, of course, the better audio that you put into Adobe Podcast, the better audio you're going to get out. So the next thing that you can do to improve your audio quality is room treatment. What that means is doing things to the room that you actually record in to make your audio a little bit better. So the biggest thing here is you want to record if you can in a room that has carpeted floors. If nothing else, put down a big fuzzy rug like this one. I also like to hang up blankets around me in the room when I'm recording.

And what this does is when you have all of these soft materials around you, they absorb the sound really well and they reduce the amount of echo and room noise that gets into your recording. The other thing, the best thing that you can probably do when it comes to improving your audio is if you are recording and you're not filming yourself actually on camera and you're just doing a voiceover record yourself in a closet. I know that may sound a little bit strange, but being in a tiny little room with all of these soft materials around you, it makes for the best audio quality. I'm telling you, you already have a sound studio in your home and you did not even know it. Okay, so we've got our audio sounding clear and crisp. Now we need to start talking about what you're actually going to see on screen.

And I know I'm going to sound like a broken record here, but this again is going to hark back to that idea of comprehension. How can we show things on screen in a way that optimises for understanding? Well, it just so happens an entire textbook has been written on that subject. This is Richard Mayer's Cambridge Handbook of Multimedia Learning, a 628 page textbook that explains in incredible detail the 12 fundamental principles of multimedia learning. And I read it so you don't have to. Essentially what Mayor defines here are these 12 principles, these 12 dos and don'ts of multimedia learning. And if you implement all 12 of these principles, you will optimise your videos for understanding. And so I considered walking you through all 12 of these principles, but to be perfectly honest, while this book is really great, it's also very academic and a bit pedantic.

So I thought instead I'd walk you through some of the most fundamental principles and maybe make this a little bit more fun. A funny thing about me is that when I was a kid, I was obsessed with watching reruns of seventies game shows. I loved them, and I always dreamed of being one of those hosts who got to wear one of those fun colourful suits and have the long skinny microphone. It was my dream. And so with that being said, I'd like to welcome you all to what's wrong with that video. So the way this is going to work is I'm going to show you a series of videos and each one of these videos violates one of the 12 principles that Richard Mayer defines. So I'm going to show you a video and you are going to try to pick out what you think is wrong with it. And if you have an idea, raise your hand and I'll call on you. Okay? Let's play the first video. An API, which stands for Application Programming Interface defines how different software components can communicate with each other. When you make a request to an API, you're asking a server to perform some action or retrieve some data. The API defines what requests you can make and what responses you'll get back. Any ideas? Yes, unnecessary.

Let's go to the next slide. You're spot on. So this is what mayor calls the redundancy principle. And like you said, what happens here is by having my voiceover plus the onscreen text plus the graphics becomes redundant, and all of this information actually ends up overwhelming the viewer and it makes it harder for them to process. So when it comes to making content like this, you want to ensure that if you have a voiceover, you have only graphics or text on screen at any given time, never, both at the same time. Alright, let's go to the next video. You can run Goose, configure, select goose settings, goose mode, and then pick whichever mode you want to use. Alternatively, if you want to change the mode when you're already in a session, you can do that with the slash mode command, followed by the mode that you want to use.

Your options will be auto approve or chat. What do we think? Nothing is perfect. You're kind. Any ideas? Yeah, spot on. We're two for two guys. Next slide. This is the coherence principle. And so what ends up happening here is if I'm showing something on screen, but then I also have my face in that lower third, what ends up happening is the viewer's attention gets diverted to two different places and they don't know what to focus on and they can't focus on one thing at a time. And so I've also heard that a lot of people find this video to be really fast and it's actually not, but it seems fast because you're trying to move back and forth between two things. The other major violator of the coherence principle is the IDE. When you're showing code in your IDE, it is critically important that you remove all of the visual clutter.

So if you're not talking about the project, the file structure of your project, hide the file tree, get rid of all of your extensions and your mini maps, all of these things are creating distractions. You want your viewers to be able to focus on what's most important. Alright, last video. In our Use effect, we have a function called fetch authorization state. And in there we're calling Get Authorization state, which comes from the mobile payments SDK. And this function does exactly what you would expect, just returns the authorization state. With that, we can check if the app is authorised or not authorised and set our local state accordingly. What do we think, Angie? Everything was too small and I didn't know where to focus based on your words. You didn't know where to focus. Next slide. This is called the Signalling Principle. It's a close cousin to the Coherence Principle, but the idea here, like Angie said, is that you need to be directing your viewer's attention and showing them what to focus on.

So in this video, I have a whole bunch of code on screen, but I'm not really showing you where to look. And so what ends up happening is you have to do all the extra cognitive work and play. Where's Waldo just to find the specific line of code that I'm talking about. And again, this becomes cognitively overwhelming. So I know I said that there are 12 total principles and we could play this game for a while and I would really love to. You guys are good at it, but these are the most foundational of the principles. And what I find most interesting about these principles is that they're not entirely obvious, but that's what makes them so powerful. When you implement all of these principles, your audience probably won't even notice, but they'll be able to understand your videos so much better, and that's what's critically important. Alrighty, we've got our audio, we've got our Screencast, we've got our structure and our scripting. Now it's time to put it all together. Now, there is a very deep rabbit hole when it comes to editing, and there's a lot of different things that you can learn, but I would argue that you don't need to go that far deep down the rabbit hole to be effective. When it comes to editing, I use three main kinds of tools.

First is screen capture software. So this can be your computer's built in screen capture software. It could be something free like OBS. I personally like to use a tool called Screen Studio. And the reason, oh, there we go. The reason that I use Screen Studio is because it adds just a few quality of life improvements for me. So it'll do things like resize my windows to be the right aspect ratio, add a background for my windows, and even add a little extra zooming to add focus like we talked about. The second tool that I use is some kind of animation tool. Now, I'll admit I am not a professional animator far from it actually, but I do have a secret little tool that I use to create animations for my videos. Keynote, believe it or not, presentation software is excellent for creating simple animations for your videos.

All you have to do is put some elements on the screen and then you can use the built-in animation features to animate all of your content. So we'll go to the next video. I'll show you an example here in this video. So as you watch this, everything you'll see here is all made in Keynote. And what I do with a lot of my animations is I use keynote's Magic Move feature. This is what Keynote is particularly good at. And the way this works is you can have some elements on a screen arranged in some kind of format, and then on the next slide, rearranged them in some new format. And then you use the Magic Move feature to magically animate between these two. And Keynote takes care of all of it. And so the reason that this all works is because you can export keynote slides as videos.

This is the secret to it. And then once you have those videos, you can throw them in the third tool. Oh, we'll go to the next slide, your video editor. Now, there are a tonne of different video editors out there. I personally use Premier Pro, but other options like DaVinci Resolve or Final Cut Pro, these are all great options because all you really need is a tool that can compile all of your audio, your keynote animations, your screencasts, and put them all into one place. And then all you need to do is just cut up your videos and align them to your audio. That's it. Now I know what some of you are thinking. Okay, but what about the studio setup? What about the cameras and the lights and all of that fun stuff? And listen, I love that stuff as much as anyone, and I'm happy to give some recommendations after the talk today.

But the thing that I really want to drive home is that it's the structure, it's the audio, it's the visual principles. These are the key elements to making effective video content. Now, that being said, if you do want to do some of these talking headshot and add them to your videos, they are a really great tool for engagement and for making your videos feel a little bit more. So these are my top three tips when it comes to doing that first smile. If you appear on camera with a smile on your face, people are drawn to you, you're more likeable, you're more approachable. People want to hear what you have to say. Number two, use your hands. Your hands are the most effective tool you have for good communication. If I were to try to explain something to you that's very complex and technical with my hands behind my back like this, it's really hard to understand.

But as soon as I bring my hands out, I can show you if something works in a progression, I can show you if things are layered on top of each other. This becomes my tool for conveying meaning. And the last tip is be more energetic than you think you expect to be. I know some people say that the camera adds 10 pounds, right? We've heard this. I don't know about that. But what I do know is that the camera zaps 20% of your energy. Okay, I made that number up. It's a hard thing to quantify. But the thing that I'm trying to drive home is that you need to be more energetic than you expect. Not all the energy that you have is going to make it through to the other side of the screen. So I say you need to be about 20% more energetic than you are in your day-to-day life.

That's it. These are all of the elements that you need to create educational videos that developers actually want to watch. The best thing about all of these features is that they're all available to you right now. You can take this process and start making videos today. And just like anything else, if you work on this and work on it consistently, you're going to get better at it and things are going to be easier. And if you just make every video just a little bit better than the last, then you may end up making a video that inspires some developer out there to build an app. Next slide. That saves this little Colombian monkey. Thank you so much.