SketchTheDocs: visual storytelling for tech

Nitya Narasimhan: Alright. Alright. Thank you so much. Hi, everyone. My name is Nithya Narasimhan, and my talk today is called sketch the dots.

It is my passion project. And at the core of it, it's really about me wanting to explore visual storytelling in developer advocacy. So a quick note about me. I'm a senior cloud advocate on the Microsoft developer relations team. But prior to my prior to my kind of joining Microsoft, I actually worked in academia, worked in startups, I worked in research.

The thing the core that ties them all together is all of us are constantly learning, and we want to find new ways to transform our awareness of technology into actionable, impactful learning. So about this talk, what I'm really gonna focus on in this talk is the other hardware, which is visual storytelling. And the question I hope I get to answer at the end of this is, can visual storytelling be an effective tool for developer advocacy? And when I think about this, I actually want you also to think about it from two perspectives. One is visual storytelling as content.

How can we use visual storytelling content to drive awareness and engagement around other developer resources or events or activities? And second, how can we use visual storytelling as a skill that we can teach to learners to help them improve the ways in which they understand and retain complex concepts? So let's start with the definition. Right? What is visual storytelling?

Different people will call it different things. So I just wanna set the stage for how I see it. On the right, you see what you might have heard of as a sketchnote, also known as a visual note taking artifact. To me, this is kind of like the basis of my visual storytelling road map. And what makes a visual storytelling artifact is that it uses visual vocabularies.

It combines words and imagery. You can see here, this is actually summarizing an introduction to Azure fundamentals learning module. And I'm doing this by using text. Yes. But there's lots of visuals and colors and containers and navigational cues to help break it down.

Second, it is storytelling. So there has to be a structured narrative that lets or guides me through consuming this content. And that could be done with layouts and hierarchies. It can be done with navigational cues. But there's a third element which makes this super interesting to me, and that is knowledge transfer.

We actually heard about knowledge transfer in, I think, one of the earlier talks in DevRelCon. But at the core, what does knowledge transfer mean? It means that it's super hard to learn something. But if I can connect something I'm teaching you to something you already know, you should then be able to transfer or build on those familiar concepts to pick up new things. So the example here is you look at the visual guide I showed you previously.

It's for introduction to Azure fundamentals. On the right side, you see in black two segments from those tutorials, right, or from the docs. What is cloud computing and what are cloud computing advantages? It's text, lot of text, and a video. I can't really kind of scan it at a glance.

But if I look at it, I hear or or I see that cloud computing is a delivery of services over the Internet. Visual storytelling means I can use that to create this idea of a truck that's delivering something. Right? Now can I explain all those textual concepts? Availability, reliability, scalability.

Can I explain those using trucks? Right? So the idea is that knowledge transfer becomes the powerful kind of tool to take visual storytelling to the next level. And that brings me to how we get started. When I think about visual storytelling, I always start with the sketchnoting one zero one workshop slash talk that I give again and again.

And it's really about helping you build your visual storytelling toolkit. Visual storytelling starts with sketchnoting, which is really visual note taking. So So it's about rapid note taking, means learning to write really fast. So you're capturing things as people are sharing them, capturing ideas visually, which means being able to distill a lot of text into a simple picture, and most importantly, summarization and synthesis. At the core, what makes visual storytelling different from documentation is that it is your perspective, and you are unique and that makes your content unique.

But once you've kind of mastered the essence of, like, you know, basic note taking, The thing that really elevates visual storytelling is the next three concepts, which is anthropomorphism. Can you start creating characters to represent things in that story because people will emotionally connect and resonate with the messaging? Can you explain things metaphorically so that people can transfer knowledge or connect the dots to things they already know? And finally, use a consistent vocabulary. If I'm gonna use trucks to describe delivery in one sketchnote and then use trucks in the same sketchnote to describe something else, you'll confuse the user.

So consistency is key. So today, I wanna share a few examples from my visual storytelling journey. The things I've been trying in developer advocacy to see if we can make this interesting for supporting our developer ecosystems. How it started? It started at Microsoft Build last year.

Pandemic had hit. The physical event was canceled. We were moving to the digital event in a matter of weeks. And someone asked me, hey. We have a community skilling slot.

Would you like to teach people how to SketchNote? And I said, sure. We did this for an hour. And I basically was going through the toolkit, teaching them how to, like, draw simple things, but I gave them three calls to action. Pick them a documentation page, pick a training tutorial, or pick a video and summarize it for me and share.

If you go check just hashtag MSBuild, hashtag sketch the docs, you'll see a whole bunch of these. And if you read the comments, you immediately get two interesting things. One, these are people who would not who have not sketchnoted before, and their sketchnotes are still valuable. They kind of share information in a unique way which makes them stand out in a social stream. But second, they give you perspectives on what they took away from the versus what you thought you were putting in there.

And that kind of knowledge gap or awareness gap is super useful to us for getting feedback. How it's going? So it started at Microsoft Build. A few days ago, we had Microsoft Ignite. If Microsoft Build was the start of my visual storytelling journey in teaching people how to sketch, Ignite kind of showcased yet another step in the journey where we started using it to create content.

If you go check out the Interfocus session at Ignite, Don Juan Brown was explaining cloud native and actually introducing Azure Container Apps, which is a new service. And what we did is we actually kind of used Sketchnotes to create a lightboard effect. So as he spoke, I sketch noted these videos, and they were being synced up to what he said. The value is now when he's done, we have a nice interactive talk. All the visuals can be taken out and made into this comic that we give away as a cheat sheet.

Right? So between these two, how do I teach people to sketch, and how do I then use these sketch notes to build useful content to drive awareness? That journey is what I wanna talk about next. So the road between is all these experiments in visual storytelling that I've been doing for about a year now. If you wanna know more about them, follow at sketch the docs on Twitter.

Go check it out. You'll see all the visual guides I've done. It's a spam free account that'll just kind of give you visual stuff that I'm working on. Or sketchthedocs.dev is a site that I just set up that I'm going to start, you know, pushing more articles and how to use and all that stuff on soon. But if I wanna kind of break this into two different areas, when I think about visual storytelling, there's actually two different aspects.

Visual storytelling as content creation. That's what we'll focus on first. And here, it's really about me creating those sketch notes and visual artifacts and then using them to build awareness or engagement with our developer ecosystem. Visual storytelling as a learning strategy is actually about teaching others to sketch so they can give us feedback and also because and this is actually an interesting article. Teachers, educators have found that in this current realm of online learning, getting their students to Skechnote had two advantages.

It made them pay attention even if it was ambiently to what was being said in an in a in a session where not everyone is seeing. And second, by submitting the Skechnote at the end of the session, the educator is able to see what they understood or what they misunderstood. Right? So we're gonna focus on visual storytelling as content creation now. And this is where I'm gonna speed walk through about 10 different things that followed by experimental thought.

Right? First, talks. Sketchnoting one zero one. Sketchnote live talks and use it to drive engagement with the content that was just delivered. This is an example of my live sketchnotes from Ignite.

There is Satya's keynote followed by two core sessions from some of our VPs. So this uses Procreate, and I can actually get the time lapse, but I can also export it out as an image. Sharing that image out later on LinkedIn got a 150 k views. Why? Because two things.

One, this is a keynote that is full of content and giving you a visual spatial reference that provides a unique perspective is valuable. Second, it helps me kind of amplify key messages and connect with others who are there at the same event. But you don't have to do this just live. Experiment two. What if it was a prerecorded talk and I knew about it?

Now I can sketch note ahead of time, which means I can create much higher quality sketch notes. This one has colors. It actually looks like it's a finished product. We can coordinate with the creators on the messaging. So we're not writing everything they say, but perhaps highlighting a few key things.

And more importantly, this allows you to create these moments for engagement where maybe the speaker themselves, because they know the sketchnote exists, can say, hey. If you actually go check out our account here right now, you will see a summary of this entire session that you can take away. So this one is really about going from awareness to engagement. Experiment three, can I use this for learning? So Microsoft has Microsoft Learn, which is a property where we have a whole bunch of tutorials, learning paths, and so on.

We also have channel nine where we have learn live sessions where instructors or cloud advocates and other experts walk through these modules interactively with you. A visual guide like the one you see here, this is actually for a learning path that was done with Carnegie Mellon, hence the Crimson. But what this does here is it gives a kind of it helps bookend that learning journey. Right? So when that session is being advertised, by sharing this ahead of time, we give users a one page summary that's a preview.

It's really priming them with the keywords and the flow that they should expect in the conversation. Then they attend the workshop or they go through the module themselves. And once they're done, they can come back to it and use it as a post recap summary to say, okay. Now I know what it actually did. What are my gaps?

All the things I'm seeing, did I cover them? Did I understand them? Right? So bookended learning journey. You can also start now thinking about intentionally structuring.

All those so far have been very chaotic. Right? But if I structured this into a grid like this, I can actually take this visual content and convert it, as you see at the bottom, into slides But each of those and this is a really high resolution sketch note. It's the size of a four k TV image. Every individual cell is the size of a slide.

So now not only do I have a one page big pictures visual spatial learning asset, I can convert it into interactive slides, are now gonna reinforce the same terminology and colors and vocabulary. And I can also take subsets of this, put it together, and write a blog post. So I can effectively reuse that at the same time providing this consistent learning journey. But learning is beyond sketchnotes. Where are we going beyond sketchnotes?

This is one of my favorite examples. Visual puzzles, same toolkit. Once you've learned to sketch, same tooling aspects, I can help teach you concepts by making you play a game. It turns out that we have puzzle based learning or games. It kind of stimulates our creative thinking processes.

And because we're working to find that solution, we tend to remember it. Also, this is an example of, like, a little puzzle that's actually explaining PowerApps component framework. Because I have put this image, this image will stick in your head, and you're likely to remember the service longer. And going back to visual metaphors, now I should be able to use this metaphor of, like, hey. There's a DIY truck pulled up and did something to do other stuff, to teach other things.

That same puzzle can also be used as interactive content. It's not just for throwing out interstitially as, like, you know, in between talks. It can be used in a live audience attending event. We do this on Hello World Live, which is a show on Learn TV. And what we found is when we put these puzzles, we actually have the people in our, like, our team, though those who are doing talks in that session.

We all get together at the end and just have this fun session where we're trying to play this game. Turns out that the attendees start jumping in with the answers. Right? So you can actually incentivize them to engage in meaningful ways, and it's just fun. But you can start going from there to expanding out where you can take this.

So how about academic audiences? We've used the same kind of techniques to try and experiment with curriculum content maps. So IoT for beginners is a twelve week, 24 lesson, all free open source curriculum from the academic team, academic advocacy. By visualizing the entire series in a road map, the student kind of gets a sense of what that looks like. Learning journey from farm to table, ambient reinforcement.

A teacher can print this out and put it up in the classroom and connect that to the slides that the person sees. And advocates or teachers can use the same things to build content, like literally a talk that they can play, which now again reinforce the same content. So there's an opportunity to make these and to train the trainer where you're giving open source content that can convert from static imagery to interactive presentation. Next, you can use this to build awareness around new technologies. I only have a couple of minutes or, like, thirty seconds, so I'm gonna wrap this up really quickly.

But what this is about is really about using this to drive traffic to a new product launch or to a new technology sustainable sustainable green technology engineering. But I'll stop by just talking about the other side of learning thing. The challenges in visual storytelling are all these are great use cases. We're seeing engagement. We're seeing awareness.

Scaling it out is tough. There's just one me doing all these storytelling things. Right? How do I get how do I get this to scale so we can use it across the board? How do we measure impact?

I can measure awareness and engagement with content, but how do I measure retention? And finally, how do we make it inclusive? If it's visual, we are leaving out people who don't have a visual ability. So with this, the last three things that I wanna leave you with are the experiments we've done to teach people. There are workshops that we can do, visualize it for yourself.

Second, you can run content campaigns literally throughout a week or a month's worth of prompts. So here we've got 24 prompts and get people to tell you what they understood. Or you can look at experiments like AI to actually study and build models for sketchnotes and have those recognized as sketchnotes and give people alternative content. Or as we can see in Microsoft Research at Kai, we're looking at ways that you can kind of distill this into tooling that can make this easier for even the bay bare bones visual storytelling newbie to build their own content. And I think I just made it.

Hopefully, I'm not sure if I'm if I still have time or not. But the big picture for me is this. What we're really looking at is using visual vocabularies with structured narratives to communicate ideas, using visual storytelling as content because we can use it to build awareness and engagement, but most importantly, also teaching it as a skill to the community. Because when the community starts trying to build this, not only can they help us scale because now we can have community generated visual sketch notes to support, but it helps them understand and retain what they just learned. And last but not least, and this is where I'm most interested in going forward, it is challenges.

How do we make it accessible with AI, and how do we make skilling scalable with tooling? And with that, I think I don't know if I have time for questions or if I went over, but I hope you found this interesting. If you have any questions, find me at Nithya on Twitter or check out at sketch the docs.