The Salesforce Lightning Design System (SLDS) is no longer new for those involved in the world of Salesforce. That said, many of our clients new to the ecosystem aren’t aware of its capabilities or its benefits when it comes to product design. Our team leverages SLDS as our design guide, pattern library, and reference for best practices.
Often new clients want to leverage the Salesforce platform to create a product but may not understand how SLDS is interwoven into the very fabric of the platform — especially if they have a strong brand or their very own style guide/design system they want to implement. I find the Product Design team needs to educate our clients on how to best leverage SLDS to achieve the desired user experience for their customers — and to avoid any potential misunderstandings, wasted time, and missed opportunities. Here are the top 3 most common areas we like to educate our clients on before we design any product using SLDS.
1. Dropping Knowledge — the Who, Where, What, Why of SLDS
Sometimes we just need to start from scratch and make sure the client understands what SLDS is and is not. We make sure to educate clients on the fundamentals of what design systems do, and how all that research and development is free with the platform. We make sure we give clients a good tour of the SLDS website, development documentation, and a few demos of an actual Salesforce Org. If the client has a good base level understanding of SLDS and how it works, then it’s good to give the client time to do a little discovering of their own — that way they can answer many questions through discovery. Showing is always better than telling, and a picture (or design system) is definitely worth a 1,000 words.
2. If You Need to Have a Custom Design, Understand Why
After we drop the SLDS knowledge bomb, the next conversation we like to have with a client is understanding if there is a real need to deviate from SLDS and introduce custom design elements. My design homie Ashley wrote a blog post on this subject because it is an important concept to convey as it can greatly affect the user experience, project cost, and time to delivery.
At the root of it all is a simple question: Why do we need to deviate from SLDS for your particular app and/or component? Sometimes the reasons can be biased, unrelated to product requirements, and not based on objective thinking…that’s a fancy way of saying the reasons provided hold no water, like the following examples:
- We do not like the way SLDS ‘looks’.
- We want to be different than SLDS for the sake of being different than SLDS.
- We don’t want to look like the rest of the Salesforce Org because we want to “Pop” or “stand out.”
Not to say all custom design is bad; there can be many good reasons to have custom design elements too:
- We want brand consistency for our well-known brand identity
- We want product differentiation and have research to show this design element will help
- We have user expectations from a related app or website that we want to replicate on the platform
If the client has a good reason, we always embrace it — because we know there are various options to introduce custom design elements within SLDS and the Salesforce platform.
3. Options and Levels for Implementing Design Elements
When clients have a good reason to bring in design elements not standard to SLDS, we make sure they understand the various levels available to them.
- App-level theming — icon and a theme color. Standard Salesforce feature.
- Org-level theming — icons, various colors, background images, header images. Standard Salesforce feature.
- Styling through design tokens — overriding standard design tokens such as color, font, and other CSS properties for any custom component designed. A medium cost to develop and a high cost to maintain.
- Custom component design and styling — ignoring SLDS and bringing in your own design system on top of the platform. Usually, a high cost to develop and maintain.
A Helpful Analogy to Remember
Throughout the course of educating the client and providing a recommendation on what sort of custom design elements they should implement, I always remind them of a helpful analogy to keep everything in perspective. Salesforce is a MEGA ecosystem, and there are many reasons your company decided to use the platform: market segment, integrations, ease of use, and many more.
Just like many other mega platforms such as Facebook, Twitter, or Instagram, they all have a very specific design system and user experience crafted to take advantage of the platform. When you are on Facebook, you expect it to look, feel, and behave like Facebook. As a user, you are there to use the platform that was intended, not have a bunch of different and disjointed experiences and design elements…that’s what MySpace did with its super customizable homepages back in the early 2000s…and we see what happened to them.
Also, there are still ways to have a cohesive brand identity and design elements across various platforms. It is done all the time — take for instance the design program brand Sketch.
They have a strong brand implemented on various platforms. Click on the images below to view the full pages and explore their brand:
If our client has a strong desire to build custom design elements on top of SLDS, we make sure they have a solid understanding of SLDS, a clear reason why, an understanding of their choices to implement custom design elements, and we always remind them why they decided to be on the Salesforce platform to begin with. This ultimately leads to better builds, cleaner design, and smoother experience for all involved.
Are you thinking about launching a product on the AppExchange? Or does your existing application need a refresh? Get in touch — we’ve brought over 250 commercial products to market and know what it takes to help you thrive.
