Designer CU.png
 

Adding a brand new interface to Trapcode Particular and Form, two very established motion graphics tools.

My Role:

UX design, content design and creation.

Screen Shot 2019-07-22 at 9.45.40 AM.png

Challenge

Flagship products Trapcode Particular and Trapcode Form are loved by advanced power users of Adobe After Effects. However, with hundreds of parameters in each product, they are intimidating to new users. How can this complex software more accessible to more novice users without changing the experience that advanced users know and love?

Screen Shot 2019-07-22 at 9.43.18 AM.png

Solution

With a limited number of options to create a visual experience in the host app (Adobe After Effects), a new environment was needed. The solution therefore was to provide an alternative dialog for designing and exploring the myriad of controls in these products with instant visual feedback on settings. This can be achieved with a modal interface that has 1:1 parity with the settings found in the host app controls. Data would be sent from the host app to the new window, and vice versa.

Screen Shot 2019-07-22 at 9.47.36 AM.png

Process

I took a deep dive into the interface of each tool, creating a spreadsheet detailing each parameter and how it can be organized and grouped in a new environment. Careful attention was paid to not group parameters too much, or too little.

Too much grouping of parameters into the same section would present too many controls at once, and approach the same problem that we were trying to get away from. Creating too many groups of controls would present the user with visual clutter.

Screen Shot 2019-07-22 at 10.20.08 AM.png

I collaborated with the UI designer and product manager to create the visual feel for the new environment for these two plugins. The window consists of a real-time playback frame, and blocks of content that contain subsets of data that define the particle settings. As blocks are selected, only the relevant parameters are shown, reducing the number of visible parameters at any given time from 300 to about 30.

Focusing on a left-to-right workflow, and with images that would visually represent the settings, the interface would convey settings at a glance, even to new users. The window itself becomes a teaching tool in learning a complex piece of software,

Screen Shot 2019-07-22 at 9.53.51 AM.png

With the separate block sections defined, I was able to design presents and visual elements that convey complex types of motion, such as wind, gravity and fluid simulations. With this approach, the user can begin to understand the visual impact of various physics controls, particle emitter types and more.

Trapcode-Particular-Designer (1).jpg

With a built-in preset browser, presets can be accessed via gesture or hotkey, divided into multiple categories, such as text, explosions, fluids, and motion graphics.

Trapcode-Particular-Presets.jpg

Since its launch, I have created over 500 presets have been created for these two products.

Impact

The community reaction to these additions to Trapcode Particular and Form have been overwhelmingly positive. Despite increasing competition in this space from other developers, these tools have maintained their position as flagship revenue earning products for Red Giant.

Screen Shot 2019-07-22 at 10.37.45 AM.png
Previous

Universe Dashboard

Next

Universe Transition Effects