It’s been a great joy to see so many people finding the user onboarding teardowns that I create such a help.
Many times, it leads to people reaching out and asking me how I make them. This, friends, should hopefully be the ultimate reference on exactly how they’re created.
Note: what follows is a very detailed recipe for generating the slideshows, not the perspective I bring to evaluating the onboarding experiences themselves. There’s way too much there to fit into a tutorial, and I’ve already written an entire book on that subject as it is.
Anyway, on with the show!
1. Getting Ready for Showtime
It all starts in ScreenFlow, a piece of software I absolutely adore. It makes recording desktop audio/video and editing it afterward super simple, straightforward, and enjoyable. I use it all the time, for a surprisingly diverse range of use cases (podcast editing, capturing audio from Skype/hangout meetings, recording screencasts, etc.). I highly recommend checking it out.
Specifically regarding teardowns, I use it to record whatever’s happening on my screen (more on that in a second), as well as recording live audio commentary as I go (the mic I use is a Yeti Blue and it is a very worthwhile investment). ScreenFlow can record multiple channels at once, so if I’m reviewing a mobile app that has an audio component, I can capture the phone’s audio on a separate track, as well.
Here’s an example of the kind of raw video I record:
I used to try taking screenshots as I went, but I’d always get too sucked into reviewing the experience and forget to grab every screen, or miss out on capturing a rad transition or animation. The screen recording is super helpful for letting me focus on one thing at a time, and the audio commentary helps jog my memory when I go into slideshow-creating mode later on.
As for what’s being recorded to begin with, that greatly depends on whether it’s a desktop/browser product or a mobile app. If it’s the former, I just open up an incognito tab in Chrome, set it to full-screen mode, and I’m off to the races. If it’s mobile, well… that’s slightly more complex.
When Apple released OS X Yosemite, its QuickTime Player got a rad new setting that lets you mirror whatever’s happening on your iPhone on your Mac’s screen. It even sets your cell reception & battery indicators to “full”, which is an awesome touch (I always get stressed out looking at people’s phone screen grabs when there’s, like, 1% battery left).
You can technically even record the audio/video right there in QuickTime while you’re at it, but I’ve found the recording to be smoother when I use Screenflow, and I’m also pretty sure you can’t record multiple audio channels in QuickTime, so I stick with what I know works.
2. Getting It All Down
With the recording in place, I will then play it back to myself and grab screenshots as I go, pasting them into Keynote.
Note: I love Keynote. If I had to pick only one non-browser piece of software to use for the rest of my life, it would be Keynote and I wouldn’t even have to think that long about it. I use it for creating presentations. I use it for wireframing/prototyping software. I use it as a sketchpad. Heck, I even used it to create the entire user onboarding book, adding new slides one by one like how you’d feed pages into a typewriter.
Anyway, with each screenshot added, I turn my audio commentary (and new observations from reviewing the recording) into annotations pointing out what’s happening in the product experience. The typeface I use for the annotations is called Sketchnote Text and was very generously volunteered to the project by the excellent Mike Rohde.
Once I’ve gotten everything in place, I re-read through everything a couple of times to make sure there aren’t any typos or that I haven’t forgotten to black out my phone number or something. About half the time, something slips through anyway. Alas.
3. Getting it Out
Keynote doesn’t really have a “spit everything out as a bunch of web-ready images” option, so I have to do a bit of processing to get things ready for online consumption. The first step is to export the Keynote content to a PDF:
I roll with Best as the quality setting so that I’m introducing the fewest compression artefacts possible this early in the process. (Apple, if you’re listening, please consider defaulting this setting to whatever was last chosen; it really grinds my gears to have to re-select Best every single time I export something!)
Optimizing with Automator & Photoshop
Now I have one big PDF, but what I really want are individual image files. Fortunately, Macs have a tool called Automator which lets you make macros to perform a series of actions when you drop files onto them. After experimenting a bit, here’s the “recipe” I found to work best:
This outputs a high-quality PNG for each page in the PDF, named after whatever page it represents. The files are pretty huge, though, because in my experiments I couldn’t get Automator to make things look non-junky at any resolution below 300 dpi. Photoshop makes things web-ready much better, so I then take the huge PNGs and plop them onto a Ps droplet that scales them down and lowers the resolution to a reasonable 72 dpi.
Web-ready files in hand, I’m almost done. All that’s left is to post the files to the cloud and whip up a new page for the teardown to live. I write up a quick blurb to introduce the slideshow and then view the whole thing as a draft to make sure all the images load (and to try to catch typos one more time).
The slideshow code itself is made out of some very thrown-together jQuery I wrote, originally based on Jon Raasch’s tutorial years and years ago, and now so maladapted it barely resembles his original example script. There’s also a zoom functionality provided by Jack Moore’s jQuery Zoom plugin, which does a great job of making it easier to see details on smaller screens.
There’s actually one final step, and it’s the most exciting one: emailing out a link for the new teardown to the UserOnboard subscriber list. I’ve used MailChimp since day one and have always been super happy with what it lets me do in that regard.
The email list gets the first heads up when new teardowns go out (I click send the moment new examples go live), and I’ve been told more than once that it’s one of the few subscriptions people have that they actually look forward to getting emails from. If you’re interested in joining in the fun, you totally should!
I hope this article gave you a useful insight into my process and how onboarding teardowns are created. I look forward to hearing your feedback in the comments!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post