Canvas system

Make complex workflows easier to read.

Nodes, connectors, flow controls, and user activities share a consistent grammar across the builder.

Each feature added more types of work to the canvas. I helped keep nodes, states, and connections consistent as the builder expanded.

Historical CanvasSwitch themes to compare the light and dark designs.

Node library

Node states and sizes

These studies compare node states and sizes in light and dark modes.

  1. 01 · Key statesCompare state behavior.
  2. 02 · Size variantsStandard, large, and compact node sizes.

Human work in the flow

User activities stay connected to the canvas.

I added a green User Activity family for tasks that need a person’s input.

The sequence shows how authors add an activity, configure its form, and return to the workflow.

Form sequence

  1. 01 · Place

    Add a User Activity

  2. 02 · Configure

    Configure its form

  3. 03 · Return

    Return to the workflow

Canvas evolution

A visual system that kept expanding.

These examples show the existing builder, a V2 workflow, and a view of agent relationships.

I supported the agent canvas vision by helping align it with the workflow builder and its components.

  1. 01 · Current builderAs-is workflow context.
  2. 02 · V2 workflow evolutionNew controls and containers in the V2 workflow.
  3. 03 · V2 agent hierarchyAgent relationships and delegation paths.

Workflow vocabulary

The studies below show individual flow controls, their containers, an example workflow, and the points where connections attach.

  1. 01 · ElementsName the available controls.
  2. 02 · ContainersContain behavior in the workflow.
  3. 03 · ApplicationPut the vocabulary to work.
  4. 04 · AnchorsKeep connection points legible.

Throughline

One system for automation, specialized work, and human judgment.

These studies show how the same components could support several kinds of work.

Illustration of a person and workflow elements connected across a shared canvas
A shared canvas keeps specialized work connected to the larger system.

Résumé overview

Victor Tran

  1. Visual Designer, IBM watsonx Orchestrate

    IBM watsonx Orchestrate · January 2024–Present

  2. Visual Designer, IBM Cloud

    IBM Cloud · January 2021–December 2023

  3. Assistant Executive Director of Communications

    Pi Kappa Phi Fraternity Headquarters & The Ability Experience · September 2018–January 2021

  4. Graphic Designer

    Pi Kappa Phi Fraternity Headquarters & The Ability Experience · July 2016–August 2018

Western Michigan University · BFA, Graphic Design

Download PDF