A comprehensive redesign and refactor of Salesforce Flow Builder's canvas interface that resolves critical navigation challenges and optimizes element positioning for thousands of enterprise users. This project implemented WCAG 2.1 accessibility standards while enhancing visual organization and interaction patterns, creating a more navigable and compliant workflow creation experience.
Flow Builder is Salesforce's powerful low-code automation tool that enables users to create visual business workflows through drag-and-drop elements. Users can automate tasks, guide user interactions, and integrate with Salesforce data without writing code, making complex business process automation accessible to non-technical users.
As the Lead Software Engineer of this project, I drove the engineering implementation of the canvas redesign, working closely with the UX team's design specifications. I led technical spiking, UI component development, and cross-functional collaboration to translate design concepts into functional code. My engineering efforts focused on implementing responsive components, accessibility improvements, and design system integration while ensuring the solution met enterprise performance and scalability requirements.
Due to a Non-Disclosure Agreement, information on this project is limited.
Enterprise users need efficient, accessible workflow creation.
Flow Builder serves thousands of Salesforce customers who create complex business automation workflows. As the platform evolved to handle more sophisticated use cases, the original canvas design began showing limitations in navigation, usability, and accessibility compliance.
1 — Context
Users struggled with element positioning and zoom functionality in complex flows, with zoom resetting during interactions and elements becoming difficult to locate and manage.
2.1 — Navigation Challenges
Icon color contrast failed to meet WCAG 2.1 standards, creating significant barriers for sight-impaired users who rely on visual cues to navigate and build workflows effectively.
2.2 — Accessibility Issues
Redesign Flow Builder's canvas interface to resolve navigation challenges, optimize element positioning, and achieve WCAG 2.1 accessibility compliance.
Key phases from research to implementation —
3 — Project Timeline
Essential design requirements for the product release —
4.1 — Icon Updates
4.2 — Help Popover
4.3 — Node Distance
4.4 — Connector Width
4.5 — Color Contrast
IconWhen a user hovers on the circle icon, we want to display
When the focus is on the circle icon, we want to display
When a user first loads a flow, we want to display
When a user is in cut mode, there should be no icon animation.
6.1 — Add Icon Popover
Show the popover only once per user session to avoid repetition.
Remain anchored to the first circle icon even when the flow moves.
User must click the X button or press the Esc key to close the popover.
Popover appears on the right side of the circle icon.
Popovers failed to maintain proper anchoring when users dragged the flow interface, creating a disjointed user experience.
Standard positioning solutions couldn't simultaneously address window resizing, flow movement, and cross-device compatibility requirements.
Collaborated with Salesforce In-App Guidance team to develop a custom anchoring algorithm that dynamically tracks flow position changes. This solution enhanced both user experience consistency and product scalability across different screen sizes and interaction patterns.
7 — Shorten Vertical Node Distance
I accounted for different connector types, unique node shapes, and icons with added borders that affected layout consistency.
Different connector types — straight, curved, and arrowed — have differnt widths and heights.
Curved
Arrowed
Handling unique node shapes like diamond-shaped Decision elements.
Original
Optimized
Different border types like dashed icon borders overlap new connector styles.
Dashed Borders
Through systematic UX feedback sessions, I fine-tuned positioning variables to create a unified solution that handles diverse node types and connector styles without compromising visual integrity.
8.1 — Reduce Connector Width
During my research, I found that vertical node spacing and connector standardization were interdependent — implementing either change independently would create broken connector paths.
8.2 — Technical Constraint
This was a technical constraint the design team had overlooked, and required combining both requirements into a single release. However, by identifying and resolving this constraint early, I prevented future inconsistencies and improved the feature's long-term maintainability.
9 — Increase Contrast
While the code changes were straightforward, implementation required careful mapping and testing across every node and connector variation to ensure consistent behavior and WCAG 2.1 compliant color contrast throughout the entire codebase.
This feature stood out as one of the few projects in my career that directly addressed interface-driven customer needs. The implementation created measurable improvements in both user productivity and platform inclusivity.
These changes reduced scrolling and zooming, making it easier to work with complex flows while creating a more inclusive experience for all users.
10.1 — Feature Comparison
These changes came together in the Salesforce Summer 2023 release. The Flow Builder canvas enhancements were featured in multiple blogs and roundups, consistently ranking as one of the top features of that release.
10.2 — Release Reviews
10.3 — User Feedback
10.4 — User Feedback
The most impactful engineering solutions emerge from questioning design assumptions, not just implementing them.
Leading this project as the youngest engineer taught me that my "obvious" questions about connector behavior revealed critical technical gaps that seasoned team members had normalized. Instead of accepting design specifications at face value, my persistent curiosity uncovered systemic inconsistencies that, once addressed, improved both user experience and code maintainability. This experience transformed my approach to treat every design handoff as an opportunity to strengthen the underlying technical foundation.
A case study on a refactored approval flow with smarter logic, clearer audit trails, and a redesigned UI for improved usability.
A case study on streamlining access to the Whole Foods in-store checkout code within the Amazon app for a faster, frustration-free experience.
A case study on ensuring comprehensive keyboard navigation towards an improved resource selection experience in the Salesforce Flow Builder.