Low-Code Tools for the Core Salesforce Platform

Elevating and Modernizing Salesforce's Lightning App Builder

Over several years, Salesforce business users and Admins consistently expressed their dissatisfaction with the user experience of the Lightning App Builder (LAB), a critical and widely-used Salesforce low-code tool. The primary user frustration around LAB was a lack of modern features and functionality compared to our competitors.

As the Product Designer responsible for the low-code tools within LAB related to Lists and Records, my objective was to modernize and enhance the tools used to create Salesforce pages using Lists and Records. Collaborating closely with Product Managers (PMs) and Engineers, I developed and executed a prioritized roadmap to elevate the overall user experience by incorporating the most desired and critical functionality.

To gather initial valuable insights, I conducted comprehensive market and competitive analyses in collaboration with PM colleagues. I applied design thinking techniques and leveraged extensive existing User Experience Research on Salesforce's low-code personas to inform my designs.

I refined LAB's UX patterns to align them with the low-code and corporate design systems. To leverage the collective expertise of my >50 low-code designer colleagues, I co-founded a low-code designer group focused on enhancing UX patterns and the design system. Additionally, I engaged and coordinated with the corporate Lightning Design System team to ensure consistency with our low-code tool design system.

The new designs received enthusiastic customer feedback during the research and pilot studies on my wireframes and prototypes. Two specific, highly anticipated features — Persistent Filters on Related Lists and Spanning Fields & Multi-Entity — generated significant user excitement. These updates were showcased through a prestigious keynote demo at Dreamforce '21, garnering widespread exposure and generating interest within the Salesforce user community.

Over 1.4 million Trailblazers widely embraced my design improvements throughout the entire Salesforce ecosystem, including Sales Cloud, Service Cloud, Marketing Cloud, Commerce Cloud, and Community Cloud. These enhancements have resulted in a significantly improved user experience for Salesforce users.

Platforms: Responsive Web
Disciplines: Design Strategy, Design Thinking, Information Architecture, Product Design, Web Design, Wireframing, Prototyping, Design Systems, Design Management, Project Management
Tools: Figma, FigJam, LucidChart, Google Slides, Affinity Photo

Lighting App Builder on a laptop and phone

Low-Code Dev Tools and Lists & Records

"Clicks, not code" is Salesforce's approach to empowering users to create and tailor applications on its platform. This low-code approach eliminates the need for writing code and instead offers visual tools and configuration options for non-technical users to customize and automate business processes according to their specific needs. This approach enables organizations to rapidly adapt to changing business requirements without significant development resources or technical expertise.

Salesforce uses Records to represent individual data instances corresponding to distinct business objects like leads, accounts, and opportunities. These Records contain fields that store particular data, such as a contact's name, email, and phone number or an opportunity's stage, amount, and close date. A List is a group of related Records that meet specific criteria, such as contacts in a particular region or opportunities at a specific stage. Salesforce offers built-in low-code development tools for creating, customizing, and filtering Lists and Records to display only the necessary data and fields.

Lists and Records are fundamental concepts in Salesforce utilized throughout the entire Salesforce ecosystem, including Sales Cloud, Service Cloud, Marketing Cloud, Commerce Cloud, and Community Cloud.

As the Product Design owner of Lists and Records, I was responsible for evolving and augmenting how our low-code development tools created, customized, configured, and displayed Lists and Records.

Classic, Lightning, and the Lightning App Builder

The "Classic experience" described Salesforce's initial UX approach, design system, and patterns, including the Page Layout Editor (PLE), the low-code dev tool used for Lists and Records. In August 2015, Salesforce introduced the Lightning experience, a modern approach delivering an improved user experience, better performance, and increased customization flexibility, to replace the Classic experience. In addition, the Lightning experience provided new tools enabling users to work more efficiently and effectively with the Salesforce platform, including the Lightning App Builder (LAB), the updated low-code tool for Lists and Records.

Salesforce's Lightning App Builder (LAB) is an intuitive and robust low-code development tool that allows business users and Admins to create customized, responsive, and mobile-friendly applications comprised primarily of Lists and Records. With the Lightning App Builder, users can easily drag and drop customizable, reusable components to quickly create, layout, and configure complex applications. Moreover, LAB provides customizable templates and UI elements such as charts, tables, and forms to cater to the specific needs of businesses and organizations. In addition, LAB works seamlessly with other Salesforce products, including Salesforce CRM, Community Cloud, and Salesforce Mobile, among others, enabling users to create a comprehensive, unified solution for their business needs.

However, not all Classic features were ported over to the new Lightning experience. There was more attention to functional parity for end-user-facing applications and less focus on the business user and administrator experiences. Even six years after launch, crucial functionality in user workflows for Lists and Records was only available in the Classic experience and PLE, but not Lightning/LAB.

Business users expressed dissatisfaction and frustration about switching between multiple low-code UIs to perform daily tasks. Moreover, given their exposure to competitors' low-code tools, the LAB experience did not meet their expectations for a modern dev tool. As a result, these customers utilized Salesforce's IdeaExchange, a crowdsourcing platform for sharing and prioritizing feature requests, to highlight the poor overall user experience and upvote missing functionality. For example, they posted a new feature request, "Persistent Filters on Related Lists," which garnered 40% more votes than its closest competitor, prompting us to add it to our product roadmap.

The Design Evolution of LAB

The design update's theme for LAB was "All your data, all the time." My design objective was to make LAB the one-stop shop for creating, customizing, and configuring pages. To accomplish this design objective, I convinced the product team to invest the effort to incorporate Salesforce's newest technologies to enhance the LAB experience, make it more consistent, and address user concerns while allowing for advanced features. My success criteria were as follows:

Easy Access
Provide a single tool to access all necessary features
Feature Parity++
Offer all the user-desired features and more
Visually-accurate Preview
Provide a WYSIWYG representation for data layout and rendering
Adoption
Ensure a smooth transition to the new features without compromising quality, features, and performance.

My user research with users matching our low-code tool personas was brief and efficient because Salesforce had already conducted extensive user research. Likewise, our market research and competitive analysis, which focused on ServiceNow and Microsoft, were also brief since comprehensive research was readily available in this area.

After conducting user and market research, competitive analysis, and aligning with IdeaExchange input and my success criteria, I developed a comprehensive design solution that incorporated individual features, such as:

Implementing Persistent Filters on Related Lists
Introducing Spanning Fields & Multi Entity functionality
Enabling Quick Actions on Related Lists
Providing advanced layout options, including Dependent Page Layouts
Allowing multiple sort criteria on Related Lists
Creating a conversion path for existing PLE-based Related Lists to incorporate new features
Developing a tool for tracking the performance impact of updated Related Lists

Removed this Multi-step Configuration Wizards — Removed this multi-step Configuration Wizard

I scoped the design work into efficient Agile-friendly tasks, utilized the existing design system and UX patterns, collaborated closely with Product Management to align with business goals, and worked with Engineering to account for technical opportunities and constraints. In addition, I conducted remote design thinking, ideation, and clarification sessions as the need arose.

As a result, I needed few design iterations. However, some minor iterations were necessary due to ambiguous or conflicting guidance between the Salesforce Lightning Design System, supplemental UX patterns for Salesforce's low-code tools, and historical UX patterns in LAB. In addition, Engineering's efforts provided a few positive and simplifying changes, like removing a multi-step configuration wizard by using intelligent default values.

Prototypes and Presentation at Dreamforce '21

I received enthusiastic responses when collecting customer feedback on the progress of these features. Although customers expressed satisfaction with all the updates, their excitement around Persistent Filters on Related Lists and Spanning Fields & Multi Entity was palpable.

Given the overwhelming response to my initial designs and the visibility of IdeaExchange features promoted to official roadmaps, demos of the Multi Entity and Filters on Related Lists features appeared on the Platform Keynote keynote stage at Dreamforce '21. (Dreamforce is Salesforce's annual technology conference showcasing the latest innovations and products from Salesforce and its partners, and it typically attracts more than 170,000 registered attendees from over 100 countries.)

This is the official Dreamforce '21 video containing two short demos. First, the official Dreamforce demo team created the Multi Entity demo based on my design work. This demo shows the creation of a Salesforce page referencing multiple entities/objects. Next, I produced the video for Filters on Related Lists, which is the golden path flow through the prototype I created for my PMs and engineers. The Filters on Related Lists demo presents a Salesforce page including the same Related List twice, but with different specific filters for each. It is worth noting that, before the release of these features, this functionality was not feasible without developing custom code.

Another notable addition was a tool created to monitor the performance impact of new features. Our goal was to educate LAB users on the potential negative impact on user experience due to the overenthusiastic use of these new features, which could result in performance issues. To achieve this, we leveraged the existing Salesforce Page Analysis tool and incorporated metadata about the new features. As a result, the system can notify LAB users about various performance metrics, such as page size and complexity, the number of network requests required to load the page, and the time it takes to become interactive and usable. Armed with this information, the LAB user can address performance issues by following recommendations for optimizing page load times and enhancing the user experience.

Over 1.4 million Trailblazers, who manage and customize pages on the Salesforce platform, widely adopted the newly introduced features after their launch. As a result, these essential features of the core Salesforce platform are now accessible and in heavy use across the entire Salesforce ecosystem, which includes Sales Cloud, Service Cloud, Marketing Cloud, Commerce Cloud, and Community Cloud.