Beyond a customer’s perception of your company’s products and services, your brand identity and experience go hand-in-hand with every interaction they have – across marketing, sales, and service – with every touchpoint serving as an opportunity to further engage your customers. Your new Salesforce Lightning Community should not be an exception to this rule. A customer community should simply be a continuation of your brand and extension to your website’s experience.
To achieve this, it is critical to view your brand and community experience in the same light, and have a cohesive plan and design that aligns both elements. So, here are some Community Cloud design tips and user experience best practices to help get you started.
Tips for Header Images
It’s best to choose an image that not only supports your brand for the header background image, but also make sure it’s simple, attractive and panoramic. Macro images tend to work very well such as: product close-ups and textures.
It’s best to avoid using background images with foreground objects or faces since they would likely get cut-off or covered up by foreground elements, especially when viewing the community on mobile devices.
Tips for Fonts
We recommend using a similar community safe web-font that follows your corporate branding guidelines instead of a custom font. If a custom font is necessary, we suggest only using custom fonts for titles, navigation and key callouts. We don’t recommend using custom fonts for the overall text content and body since it’s likely to distort within the community.
Storing Graphics
We recommend using static resources for theme layout imagery and graphics, and only use the asset library for storing the community logo and header accessed through the branding panel.
Other best practices around branding include:
What do you want to see first?
Strive to keep all pertinent content, call-to-actions and dashboards above the fold of the screen. That way, users won’t have to search for what they commonly use or need to access in your community.
Templates should be respected
Although it’s important to follow corporate branding guidelines when branding a community UI, expect compromises to be made. The good news is, it’s usually for the better! Salesforce has invested a ton of resources and money into the R&D for community templates, so it’s best to allow the template to drive the user experience while enhancing it with branding and styles instead of the reverse.
Think Mobile First
Keep the UI simple and elegant, especially when it comes to custom Lighting Components, since everything we build must be mobile responsive and work on multiple devices. When you approach the design thinking about ‘how will this look on a mobile device first’ , you can reverse engineer how it would look on a desktop – which is ideal. This allows you to not get cornered by your design and layout.
For more on the subject of Salesforce Community UI/UX design, I would encourage you to download our recent guide, Killer UX Design Tips for Salesforce Lightning Communities.
