Inside look: Scalable developer video production

In our last post, we shared our new Stripe Developer Foundations video series where we cover nine core topics (authentication, making requests, pagination, metadata, webhook helpers, idempotency & retries, versioning, expanding objects, and environmental variables) for working with the Stripe API across seven different languages (Ruby, PHP, Python, Node, .NET, Go, and Java).

Here, we are sharing our experience producing the series, challenges we faced, and how we’re working on making developer video production more scalable. By the end of this post, you’ll learn how we made 63 videos across nine topics and seven languages in less than half the usual time.

What did we set out to do?

Stripe has seven main client libraries — Ruby, PHP, Python, Node, .NET, Go, and Java — and we aim to provide junior developers a foundation of broadly applicable knowledge to help them in all of their Stripe development going forward.

Our goals

• Make sure we provide content in the programming languages a developer is most familiar with.
• Create content covering the patterns that are applicable to all Stripe API endpoints and resources.
• Supplement the most core content in our API Reference with an audiovisual learning experience.

Resources

The developer advocacy team at Stripe is small but mighty, and this project called for contributions from all across the company. For every video, we had:

• Technical solutions engineers reviewing scripts for accuracy and granularity
• Docs writers reviewing scripts for information flow and knowledge scaffolding
• An external contractor who edited the video, and
• The actual on-screen talent of the developer advocates, who also wrote the script, created the animated explainers, and designed the basic visuals

Typically a video takes us 10-20 hours of work. We estimate that each of these videos took less than 6 hours to make.

Our toolbox

Screenflow is a lightweight tool for screen recording and video editing that we use regularly at Stripe. All of our developer advocates used it for screen, camera, and audio capture, as well as for creating animations. While it has worked well for our current video needs across the team, it is worth noting that Screenflow does not support livestreaming.

Figma is a collaborative graphic design tool that allowed us to quickly create and share design assets, such as thumbnails for each video.

While the battle between Google Docs and Dropbox Paper rages on, we drafted scripts in Dropbox Paper so that we could collaborate and include formatted code-snippets.

Challenges

With such a small team, we ran into a number of expected and unexpected challenges, some common to video production, some specific to the quirks of working in the financial field.

• Challenge 1: Seven languages, five dev advocates

  • We want to ensure that we could cover all 7 official Stripe client libraries, but each of us was an expert in only 3 or 4 languages.
  • We started by creating standard scripts with the accompanying code around a language family we knew best, then worked together to fill in the extra correct steps and prose for other languages. This capitalized on our team’s breadth of knowledge, since we were all able to explain each concept but not necessarily be able to create scripts in every language.

• Challenge 2: Editors can’t edit concepts they don’t understand, and editors aren’t animators.

  • We spent a lot of time trying to explain esoteric financial/technical topics like idempotency to our contractor editor and finally realized we were trying to create a unicorn.
  • We had also thought our editor would be able to handle more of the animation work, but we learned the lesson that editors are not necessarily animators.
  • We decided to bring animation in-house and leaned more heavily on the editor for time-intensive work, like polishing screen captures and wrangling the longer parts of the videos.

• Challenge 3: Animations take a lot of time to create.

  • When we first sat down to sketch out the resources needed for this video series, we quickly realized we wouldn’t be able to create bespoke animations for each video, otherwise this project could take a year.
  • In our biggest time-saving choice, we extracted the concepts from those standard scripts that were the same across all languages and made just one animation that could be reused. You can see an example of that in our video on webhooks in Ruby.

Walkthrough of our process

Planning

• For every video, we created a demo outline that made clear how detailed the video would be. We hope to hit the sweet spot between consumable but still comprehensive, laying a strong foundation for future integrations.
• To start, we drafted each script in a single language and reviewed the script with Docs writers for flow and information architecture and with Technical Solutions Engineers for technical accuracy.
• We refactored the script to front-load the conceptual pieces that were the same across all videos, since we would be using the same voice over and animation across all languages.
• Then we worked with fellow language experts on the dev advocacy team to populate the code snippets and other prose for each of the six other languages

In the recording booth*

• At this point, we only had to record the conceptual piece once, since we designed it to be re-usable in both audio and visual form across all seven languages
• We had different developer advocates own each topic across the languages, rather than the other way around.

*Since our entire team was remote even pre-COVID, we don’t have an actual recording booth, but you can learn more about what equipment we use here.

To the editor

• We had our contractor edit the voice overs and screen captures, but then brought the footage back for the developer advocate to merge in the animations since this was the most technically complex part.

• This is what our contractor worked with:
  

• This is what our developer advocates worked with. (If you’re familiar with Screenflow, you’ll know that this is a number of different tracks to have at once!)
  

Our end result was that we only needed to do the heavy lifting of animation once to produce 7 consistent videos covering a topic and were able to cover a 9 x 7 matrix of topics and languages across just 5 team members.

Marketing
We’re not done yet! Once we made all the videos, we needed to make sure they got in front of the right people.

• We published batches of videos weekly by topic across each language, so that we could ensure equal staggering across languages. While we could have worked on publishing all of the Python videos or all of the Ruby videos at once, we thought it more equitable to go broad rather than deep.
• We created a Twitter thread for each language, adding a tweet for each topic as it went live.
• We then did a big “go to market” push at the end, featuring the completed series in our dev digest, on DEV.to, and by RT-ing all of those individual threads on @StripeDev.

Conclusion
Overall, we were able to create 63 videos across nine topics in seven languages in less than 400 hours, which is a reduction of over 60% from the ~1000 hours this project would have normally taken. This definitely required the collaboration of a number of teammates across the company, all in different functions, but we all have the same goal of improving the Stripe developer experience. You can check out the videos here.

Are you just getting started or trying to do something similar with video content? We’d love to any questions or comments from you below or on Twitter.

CJ Avilla is a developer advocate at Stripe and lives in Nevada. You can find him on Twitter at @cjav_dev or on YouTube.