top of page
  • Writer's picturePhilip Bolognini

3 Salesforce Customization Examples that Enhance User Experiences

3 Salesforce Customization Examples that Enhance User Experiences

As a User Experience (UX) Designer, a question I am frequently asked is “Are there any standard changes my team makes to out-of-the-box Salesforce functionality?” I think a reason this comes up so often is because many teams don’t have a dedicated UX resource. If you’re eager for some quick UX wins, then this blog is for you!

Customization helps tell the user story more clearly. Salesforce Lightning offers consistency and feature-rich components with little overhead, but knowing when and how to customize is the secret to get that ‘WOW’ factor.

Standard Salesforce UX customization? That sounds like an oxymoron…

Here are best practices for customizing the Salesforce Lightning user interface (UI) to prioritize user experiences. Fair warning though: as I mentioned in a previous blog post, there is no one-size fits all solution for UX Design.

Do: Use customization to highlight your message.

Analyze user stories and determine which products or features are good candidates for extra polish. This will give your message a clear focus and keep the team aligned on design priorities.

Don’t: Use customization as a substitute for solid functionality

Remember, there is no replacement for the fundamentals. The foundation must be in place before building the house. If user feedback indicates that a feature is confusing, then it’s better to simplify design rather than adding more bells and whistles.

Salesforce UX Use Case 1: Branding within Lightning Web Components

The most obvious way to communicate a clear message is with consistent company branding. One of the benefits of the Salesforce Lightning Design System is that components have a consistent look and feel. But how do you let your specific story within Salesforce shine through?

Let’s look at a specific example with one the most fundamental building blocks of any user interface — buttons.

With Salesforce Lightning Web Components (LWC), a developer can add a modern-looking button by simply invoking the lightning-button element. Take a quick look at the difference between a lightning button and a standard HTML button in Chrome.

Lightning Button versus Browser Button - Lightning button includes company branding look and feel
The Lightning button includes the company branding attributes.

Neat, right? But what if you want your button to use your brand’s primary color? Or what if you have an edgier design, and want to ditch the rounded corners? (Pun intended).

Let’s take it one step further. What if you wanted to create one singular CSS class for buttons so when branding changes, all buttons will update simultaneously?

You could create a CSS module to import, and this would be the result.

CSS Module Import Results - Only browser button got the import
CSS Module Import Results - Only the browser button got the import

What happened? Only the browser button got the branding. That’s because the lightning-button’s elements exist in the Shadow DOM, which means they can’t be accessed in the LWC’s StyleSheet.

Solution: Static Resources

Importing a CSS as a static resource allows for more customization because it gets loaded higher in the DOM hierarchy where it cascades to individual LWCs on the Lightning Page. Now, any LWC can override the standard lightning-button by importing the CSS static resource.

Final result:

Static Resources Solution

Salesforce UX Use Case 2: Preloading and Error Handling

So what about when we’re not clicking widgets or dragging sliders? Downtime can be just as essential a part of UX as the visuals.

According to a study by gomez, satisfaction of web users drops after as little as 2 seconds. First impressions are critical, so we want to reach the user from the moment they load the page.

We also want to carefully consider the messaging when the component is empty. “Did it break or is it still loading?” This should never be a question in the user’s mind.

One advantage of Lightning Experience is the Web Component architecture. Components are modularized so they can function asynchronously. Each component loads when it’s ready and doesn’t hold up the entire show.

Illustrations are a great way to show the user that everything is still going as expected. Here are some benefits:

  • Informational text can be more playful

  • Chance to leverage assets for customization

  • Graphic fills the negative space giving a polished look

Common scenario: A data table that loads from a click in another component

Common scenario: A datatable that loads from a click in another component

The Salesforce Lightning Design System provides several illustrations ready to be consumed. It even includes guidance when creating your own so you can get even more customization.

Salesforce UX Use Case 3: Stencils vs. Spinners

Just like lightning-buttons, lightning-spinners are great consumable components to use while waiting for asynchronous data fetching. However, other than a color and size change, they are not very customizable. This is where stencils are useful!

Salesforce recommends using a stencil instead of a spinner after a 300 millisecond wait. Like illustrations, stencils are a great way to control the aesthetics of downtime.

Initially, it’s not possible to have a stencil for every single component. This is where having a clear user story will help the team align on what features should be highlighted. After developing a few, design teams will have a robust library and customization will be faster down the line. After identifying which components are candidates for stencils, implementation is a two-step process.

Step 1: Create the stencil

Salesforce recommends using stencils that are responsive, i.e. they stretch to fill the container they are in. This means they can be created programmatically or created in a vector drawing program like Adobe Illustrator and exported as code in .svg format. It is not recommended to use a static resource as a stencil because of the increased load time.

Step 2: Create logic to conditionally display the stencil

Use the if:true|false={property} template directive in the component’s markup to display the stencil while the component is still loading. This directive refers to logic in the component’s Javascript controller and conditionally renders the stencil while preloading.

Want an even better experience? Try using both! For example, use an inline-spinner with information text superimposed over a stencil.

Example - inline-spinner with information text superimposed over a stencil
Example - inline spinner with information text superimposed over a stencil

Putting it all together

Adding some pizzazz above and beyond the standard out-of-the-box functionality can help tell the user story with more clarity. Analyze which features best contribute and communicate these areas of customization to the entire team.

We looked at a couple examples of how to go above and beyond with Salesforce UX design. Static resources can be used to apply branding globally and efficiently. Illustrations won’t leave the user hanging and allow for reusability. Lastly, stencils are a great alternative to spinners and can be added iteratively during each project.

Contact CRM Science Salesforce Consultants

How do you customize Salesforce to prioritize user experiences? Our dedicated UX resources know all the best customizations to improve user adoption by building better user experiences. Whether you’re new to UX or want to take your Salesforce UX customizations deeper, we’d love to hear from you.

UX Designer Philip Bolognini

Philip Bolognini

User Experience (UX) Developer

CRM Science

Contact CRM Science Salesforce Consultants

Recent Posts
bottom of page