A comprehensive redesign and refactor of Salesforce Flow Builder's Resource Menu that prioritizes keyboard accessibility and user productivity. The project transformed an outdated, disorganized interface into an intuitive, accessible experience that meets WCAG 2.1 standards while maintaining user familiarity with existing workflows.
Flow Builder is Salesforce's low-code automation platform enabling visual workflow creation (see Case Study #1). This project focused on implementing keyboard navigation for the Resource Menu's comprehensive redesign — transforming an outdated, disorganized interface into an intuitive, accessible experience.
I led the technical implementation of keyboard navigation for the redesigned Resource Menu, and drove component refactoring and cross-functional collaboration to ensure WCAG 2.1 compliance while maintaining user workflow consistency and enterprise performance standards.
Due to a Non-Disclosure Agreement, information on this project is limited.
Accessible workflow tools are fundamental to inclusive enterprise software.
Flow Builder serves thousands of enterprise users who depend on efficient resource access for business automation workflows. With growing emphasis on digital accessibility compliance and inclusive design practices, ensuring that core interface components meet accessibility standards has become critical for user adoption and organizational compliance requirements.
1 — Context
The original Resource Menu suffered from poor organization and dated visual design. Users struggled with unclear icons, disorganized menu items, and confusing multi-layered navigation that made it difficult to find resources or backtrack efficiently.
2.1 — Old Resource Menu
The design team provided a redesigned Resource Menu that improved visual organization and user experience. However, the new design introduced headers, footers, and complex nested structures that were incompatible with the existing keyboard navigation system.
2.2 — New Resource Menu
Deliver comprehensive keyboard navigation for the redesigned Resource Menu that maintains user familiarity while achieving full WCAG 2.1 accessibility compliance.
Following W3C accessibility guidelines research, I identified and documented three essential focus scenarios that form the foundation of comprehensive keyboard navigation. These scenarios represent every possible user interaction point within the redesigned Resource Menu structure.
3 — User Flow Analysis
4 — Keyboard Navigation Framework
When users first focus on the text input field, the dropdown menu displays automatically with secondary focus on the first menu item. Users can select items with Enter, navigate into the menu with Tab, or filter results by typing alphanumeric characters.
5 — Focus Point 1: The Input Field
Key interactions: Enter selects first item, Tab enters menu, arrow keys trap focus within menu, typing filters results.
When focus lands on menu items, users navigate with ↑↓ arrow keys, jump to footer with Tab, and traverse nested menus using → or Enter on chevron items. Tooltips are accessible via Cmd/Ctrl + I with screen reader support through aria-describedby.
6 — Focus Point 2: A Menu Item
Key interactions: Arrow keys navigate items, Tab jumps to footer, Enter/right arrow opens submenus, Cmd/Ctrl+I shows tooltips.
From the footer position, users can return to the last-focused menu item with Shift + Tab, move to the header with Tab, or filter menu items by typing alphanumeric characters directly.
7 — Focus Point 3: The Footer
Key interactions: Shift+Tab returns to menu, Tab moves to header, typing filters menu items.
Through mapping these focus scenarios, I found that it revealed a fundamental choice between user familiarity and accessibility compliance, and required a strategic resolution among the engineers, product managers and design team that would impact all keyboard users.
8 — Design Decision Framework
We implemented the accessibility-first approach with help popups to guide users through the new navigation, reinforcing that enhanced user experience must be equally accessible and intuitive for all users.
We introduced a redesigned resource menu that significantly improved user experience and highlighted the importance of accessibility as part of the Salesforce Winter 2024 release.
9.1 — Results
9.2 — User Reviews
Leading this implementation taught me that accessibility isn't about meeting compliance standards — it's about creating genuinely excellent user experiences. By engineering keyboard navigation as a core feature rather than retrofitting it later, we delivered an interface that improved usability for everyone, not just keyboard users. This project showed me that when accessibility becomes a foundational engineering principle instead of a final checklist item, it drives innovation in user experience design rather than limiting it.
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 improving accessibility and user productivity for sight-impaired users in the Salesforce Flow Builder.