Background and Understanding
Some Flow Builder Terminology
- Freeform: MVP flow this is the drag and drop based product
- Click to Create / Autolayout: The Accessible vision version of the product
- Elements: Button Icons representing flow nodes on the canvas
- Property Editor: How user defined properties for a given element.
Flow Builder Persona
What is Cloud Flow Designer? And what is the problem?
Cloud Flow Designer was a 11 year old Flash based process automation tool tool. Very poor UX design, and not accessible at all.
Beneath the surface the product possessed immense power in the fabric of its architecture, and was the engine for all of Salesforce’s process based tools.
UI improvement Proposal
Cluster Map / Brain Dump
Save Process Diagrams
Competitive Analysis & Inspiration
Flow Builder V1 – The Solution
Summary of problems to solve
- The most requested feature is a low-code tool for users who are not developers.
- Canvas organization should be automatic, offload this manual work.
- Improve the visual language of flows to be more “at a glance digestible”
- Easier hand-offs – which require a more standardized framework for flows to instill a degree of consistency.
- Accessibility – Make the canvas fully keyboard navigable.
Has roots of its ancestor, but is arguably more revolutionary than evolutionary. HTML / JS / CSS based. Touch capable and Accessible (Version 2).
Flow Builder:
- Sets a new standard for process based tools within Salesforce.
- Visualizes complex programming in a digestible manner
- Empowers users to create complex screen and programmatic flows.
- Fully accessible (Version 2)
- Supports touch devices
Canvas Elements Exploration
Cards Exploration
Early Interaction Prototype
Canvas Exploration
Visual Language and Iconography
Salesforce has many builders, we needed to think systematically
Screens are a builder… within Flow Builder
Screen Builder prototype
Well, it works, and solved a TON of user probelems, but we introduced some… collissions, overlapping flows, it can get mess FAST.
Flow Builder V2 – Accessible Autolayout
Concept Sketch of the menu system and autolayout
Click to Create Menu Concept
Establishing The Baseline Grid
A11Y Keyboard Navigation Concept
Click to Create Prototype
Flow Builder Today
Today, Flow Builder stands out as a highly acclaimed and continually evolving application that sets the standard in the workflow management category. It is also the first of its kind to feature a fully accessible canvas.
