Screencast Recorder

  • Company / UX Team SizeAutodesk / 1
  • Release Date / My Design SpanJune 2014 / 17 months
  • Platforms Designed ForOSX & Windows App
  • Project DemoLatest Version by John Angelo

  • The vision of Screencast Recorder is to provide people with a way to document and share their product workflow knowledge. As the solo designer on this first official release (code-named "Chronicle" in labs), I designed an easy and intuitive recorder that people use to capture their screens then edit/share their workflows. As users upload their "screencasts", the technology adds an interactive timeline that shows command data (buttons pressed, keystrokes, annotations, dialogs, etc) to help viewers follow along.

As the designer converting this R&D project to a new Autodesk product, I crafted a simple, enjoyable, and effective 'YouTube of interactive tutorials'.

Research / Usability Tests, Card Sorting & Cognitive Walkthroughs
I’m a firm believer in testing early, often, and in lightweight fashion. Teamed up with a researcher and used Applause tools to conduct formal usability tests and contextual inquiries. Administered my own heuristic evaluations and in-person cognitive walkthroughs with users from various backgrounds. The feedback led to numerous design innovations and also a few design retractions.

Information Architecture / Inventory, Guides & Content Models
Established a taxonomy centered around personable friendly phrasing. Used OptimalSort to card sort and poll users on which categories were most important to them and used that as my basis for focused publishing efficiency. Created content maps and screen inventories to analyze and organize both the recorder and video gallery.

Interaction Design / Sketches, Journey Maps, Prototypes & Interactive Wireframes
I absolutely live for prototyping. To me, it’s the best method to convey designs and, for Screencast, I do whatever prototype deliverable is best to convey the feature design in the sprint time allotted. Designed mostly in code, because my roots were in game programming so doing this is just efficient for me. To save time, I use a variety of javascript libraries including famo.us, bootstrap, and jQuery. Also communicated some interactions via interactive wireframes.
View Prototype
View Interactive Wireframe

Visual Design / Diagramed Mockups, Assets & CSS
Did a completely overhaul of the Screencast Recorder visual design for the 2.0 release. Focused on minimalism and simplicity while still providing access to advanced features for power users.
Gallery Prototype

Demo
This video describes the product design vision of Screencast from recorder to gallery app.
Download Recorder (Windows) Download Recorder (Mac)

Share