3 Salesforce Customization Examples that Enhance User Experiences

August 25, 2020

 

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.

 

 

 

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.

 

 

 

 

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:

 

 

 

 

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 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.

 

 


 

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.

 

 

 

Philip Bolognini

User Experience (UX) Designer

CRM Science

 

 

 

 

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.

 

At CRM Science, we use our Salesforce expertise to transform your enterprise. Partnering with our clients throughout the Salesforce journey, we strategize and optimize business processes, and develop solutions across every Salesforce cloud. CRM Science is an award-winning Salesforce Gold Consulting Partner and a Salesforce.org Registered Partner

 

Contact us to chat about your Salesforce projects.

 

 

Please reload

Recent Posts
Please reload

At CRM Science, we use our Salesforce expertise to transform your enterprise. Partnering with our clients throughout the Salesforce journey, we work with leaders to strategize and optimize business processes, and design and develop solutions across every Salesforce cloud. We help you maximize the value of the Salesforce platform. 

CRM Science is a Salesforce Gold Consulting Partner and a Salesforce.org Registered Partner. Our strategic consulting services were recognized by Salesforce in four consecutive Salesforce Partner Innovation Awards, an annual recognition for partners that deliver outstanding client success. 
 

Helpful Content
Blog
Events
Client Success
Connect with us
Email Us
860 First Ave, Suite 2
King of Prussia, PA 19406
(484) 775-0333
  • Twitter
  • Facebook
  • YouTube

Copyright © 2011-2020 CRM Science, Inc. All rights reserved.