3D Capture Tutorial Video

Tutorial Video

Client: Hewlett-Packard Inc.

Category: Video

Timeline: ~2 months

Challenge: Create a tutorial video explaining how to use Sprout’s new 3D scanning software.

Role: Storyboarding and UI Design (with 1 other designer)

Project Overview

This tutorial was created for a Sprout by HP app called 3D Capture. 3D Capture allows you to utilize Sprout's scanning functionality to scan high-quality 3D models as .obj files. It’s a rather uncomplicated process, but is somewhat foreign because there isn’t anything on the market like it. We were requested to create an animated tutorial showing users to to use the 3D scanner to create their own 3D files.


We first gathered information from our managers about who the main audience is and what the goals of the video were. We knew this would be a somewhat big undertaking because it was different than most other projects that we were used to. Neither of us had a ton of experience in After Effects.


Next, we started laying out the general scenes that we wanted to show in the video. The tutorial was supposed to be long enough that users would have enough info to 3D scan well, but short enough that they wouldn’t lose interest. We decided on about 3 minutes. We decided on several key steps, and added additional scenes around those key scenes. Then we wrote a script and sketched out the thumbnails.

Designing, Iterations, and Lessons Learned

After creating the storyboard, we decided on an overall style. This part was pretty easy because we already had a style set for Sprout, and we needed to stay consistent to the brand. The brand uses a lot of blue and white, with HP Simplified font.


Because Sprout is a complex-looking product, we decided to stick with the original product shots, and create the rest of the items to match those. We were not allowed a budget for imagery, so we had to shoot everything ourselves. We took a few days and shot most of the objects with *surprise* our phones! Then we went through all of the shots and chose the ones that turned out the best and masked out the background.


Then it was on to animating! Editing all of the keyframes was the most tedious part.


When we added in the text, we had to be conscious of readers of all skill levels. We wanted to pace each scene so users had plenty of time to read the text without feeling rushed. In the end, I thought that the pacing could have been sped up a bit so there isn't as much waiting time, but this decision was overruled.


We learned quite a few lessons on this project! An important one being that localization is a nightmare when dealing with text in a video. The amount of countries that the video will be localized in should be carefully considered. We had at least 5 languages that we had to change all of the text for in After Effects, which was very costly. One trick we learned was to make the text in a separate composition, so each language could be saved separately, but within the same After Effects file. So we didn’t have to keep track of 5+ different “latest” AE files for each language; they were all consolidated into one. At the same time, any adjustments we made to the visuals did not affect the text, but were included in the same file.


We also found a helpful plugin that allowed us to enter new text into an excel doc that linked up with the compositions and would replace the old text with the new. This saved time so that we didn’t have to scrub to new keyframes where each text block was. One downside to this was that the text was cut off in a few instances where the text box wasn’t extended enough, and we couldn’t see that from the excel file.


Another lesson was that voiceovers are very expensive, especially if you’re planning on having frequent updates to the text. Usually it’s better to plan for calm but upbeat music in the background, so the user can read at their own pace, but mostly to save a ton of money by not using a voiceover artist.


The final video informs users how to use 3D capture in a fun, simple way. We learned a lot in the process! Press play on the video above to watch.

professionalAndrea Hock