What was Experience Cloud called when you were first introduced to it? Whether it was Sites, Portals, Communities, or the latest Digital Experiences, it’s a powerful product on the Salesforce platform, allowing you to leverage the data in Salesforce in custom websites. This is one complex product, it took me 3 attempts to pass the certification exam, the only one I broke down and purchased study notes for!
As a Salesforce UX designer with a background in web development, I naturally gravitated to Experience Cloud as it provided many creative design opportunities. As you might expect, many skills were easily transferable. In this blog, we’ll look at best practices when designing communities in Experience Cloud. I’d like to focus on 3 categories specifically:
Design planning
Design systems and branding
Design optimization
Naturally, let’s talk about planning first.
Design Planning
During the design phase, it’s important to plan out as much as possible. Of course, in an agile environment, even the best planning won’t account for everything, but here are a couple of design planning considerations that will greatly avoid future technical debt.
Customization
Right off the bat, when creating a community, we’re asked to select a template.
This is an essential decision because it not only defines how the experience looks but also the features that are supported. Furthermore, it will be much harder to change this template once we’ve developed some content. This selection determines two templates, the Experience Template and Theme Template. If you select a Lightning Web Runtime (LWR) template, this cannot be changed. All content will be lost if an Aura Template is changed. Here’s a list of customizations we’ll lose if need to change the Theme Template later1:
Branding sets
Theme regions (settings for common elements across pages like headers)
Theme settings
Custom theme layouts
Custom theme layout assignments for pages
Custom CSS overrides
That’s why it’s paramount to plan out the level of customization early on. For example, deciding between using a pre-built template or the "Build Your Own" template. Check the resources at the end of the blog for some great articles on how to decide which template you need. Make sure to test the template in a scratch org or sandbox first before you ever create the site in production.
While we’re on the subject of customization, I’d like to debunk a common myth. Most Experience Cloud projects I work on start out with as few customizations as possible, thinking it will be cheaper to stay completely “out-of-the-box.” However, every Community needs some level of customization at some point, and it’s very often more expensive to add later. Why? Because it ties the developer's hands from using robust components where they would have the most control and forces them to attempt “hacky” solutions. For example, using custom CSS overrides in the builder instead of clean styles from within a component’s stylesheet, which are much easier to develop and maintain.
How to Deploy Design Changes