Action Flow

Dreamworks Animation
PROJECT

Action Flow

Dreamworks Animation
Dreamworks Animation

This is a visual programming tool that allows the user to chain operations together to run in sequence and manipulate the data that passes through them

OVERVIEW

This is a desktop application that allows the user to chain operations together to run in sequence and manipulate the data that passes through them.  It connects to the Artist Console's larger workflow between the sender and the receiver of assets.  This application files that can be run on the farm and that intercept the assets along their journey to their recipient.  Any number of actions can be performed on the assets during manipulation including adding/removing data, renaming data, triggering notifications and emails.

PROBLEM

Create a tool that enables technical users to to perform visual programming by chaining together code "modules" into networks that ultimately produce various outcomes.

RESPONSIBILITIES

Product Designer
Including: Information Architecture, User Research, Visual Design, Interaction Design, Prototyping

RESULT

NA

STATUS

Work in progress

REQUIREMENTS

PROJECT PROFILE

NODE GRAPH INITIAL THOUGHTS

NODE GRAPH INITIAL THOUGHTS

The challenge for our artists is allowing for detailed control over parameter configuration while also providing an abstracted view of graph flow and dependencies.  In this design (and many of them) I've tried to reduce the visual clutter of node connections by eliminating parameters links and focusing on just the necessary dependencies.  To supplement that lack of parameter connections, I've tried to add various connection and attributed editors were the control can be achieved.

HORIZONTAL ORIENTATION

HORIZONTAL ORIENTATION

This design explores vertical vs. horizontal layout and also illustrates an "uber" connection editor (bottom),
which allows for node traversal from the widget itself, and a traditional organizational tool like backdrops.  

Also of note are the on-node progress bars and HUD widgets found in the lower corners of the graph.  I was hoping to leverage the HUD heavily for performance metrics and navigation control as the user can show or hide them at their discretion thus keeping the complexity of the rest state of the graph to a minimum.

Action Flow workspace v3

H.U.D.- CONCEPT

Action Flow workspace v3

H.U.D.- CONCEPT

This is an extension of fig4 and here I'm trying a "monocle" concept for revealing more information of a node (opposed to expanding it in a traditional sense).  The monocle would contain different content based on how it was triggered by the user.  In this case, the user can see and possible explore  an error in the code without having to go to an external application.

ADDING ICONOGRAPHY

ADDING ICONOGRAPHY

Realizing that presenting the nodes simply as text has some drawbacks, namely the loss of a visual anchor for things like a on-node progress bar, I adjusted the design to prioritize the icons thus allowing for a place to hang other elements like the progress bars.  Focusing on the icons also provides the User with a identify-at-a-glance ability for the nodes in their graph.  All text nodes forced the literal reading of each node, but icons allow them to scan the graph instead which can be embellished with colors and shapes to make it even easier.