Main content

"It's not just about the pixels" - Kat Holmes, Chief Design Officer for Salesforce, on giving the UI a makeover

Barb Mosher Zinck Profile picture for user barb.mosher June 21, 2024
How to update the interface without scaring the customers...


Did you know the Salesforce interface hasn't changed since the Lightning UI was introduced in 2015? Sounds like it might be time for a refresh. But there's a lot to consider when you start looking at how to do that. What a better way to learn than to start with Salesforce's Starter and Pro Editions.

Kat Holmes, EVP and Chief Design Officer for Salesforce across the entire platform portfolio, shared how they are building the UI in the SMB editions, why they started here first, and how those changes are propagating out to all the other Salesforce products.

Holmes has been Chief Design Officer for the past eighteen months (although she's been with Salesforce for four years), and she's spent a lot of time learning about the Lightning design and how it's built. Her job is to help figure out how to bring it up to date and freshen the experience without compromising on the hard work many Salesforce customers have done customizing the platform to support their unique business requirements. She says:

I've worked in enterprise software for a long time, and understanding what the experience a person is having as they move through the products is, is a constant learning curve, especially for something like Salesforce, where there's so many different kinds of users using this in different ways. So finding the common things that really tie it together has been a good and fun challenge of this role in the last 18 months.

Three types of design work

Holmes explains that there are three major kinds of design work underway.

Ease of use improvements

I shared some of these design methods when I wrote about the announcement of Salesforce Starter and Pro Editions. Concepts such as "easy by default" and creating an interface that connects the full customer lifecycle. "Ease of use is at the foundation of everything we are doing." At the same time, though, it was important for Salesforce to ensure there was room for customers to grow and enable more advanced capabilities.

Visual style improvements

This design work is about cleaning up the house as a first step, according to Holmes:

Visual style changes can really be jarring for users if you go too far too fast. But we want to refresh and modernize Lightning to bring people along and make sure that they're growing into this new UI as we really start moving towards an AI-based future, but also make sure those ease of use improvements are really working at scale.

The visual style improvements focus on color and typography changes, and at first glance, you might think that's pretty basic. But stay with me because Holmes opened my eyes to design work that (as a non-designer) I would not have considered very important.

Updating the underlying style engine

The underlying visual style engine is a CSS layer. Holmes says Salesforce needed to ensure that this layer was healthy and that it was maintaining ongoing accessibility improvements in a centralized way, rolling them out on a regular basis.

A lot of customers have customized their experience, but they are building on the same platform and components. The goal is to give them the flexible style changes they want while respecting, maintaining, and protecting the work that went into building their implementations. She explains:

That's been one of the top requests that I've had in this role, is, how can I make this look more like my own brand, or, how can I make this more tailored to what my users need inside of a specific customer's company. So we're creating more flexibility under the hood.

By improving and updating the style engine, Salesforce has also improved performance, making the UI much faster, she adds:

Speed is the number one feedback that we hear from customers, in addition to ease of use and making it compelling. So that's where we're focused.

Holmes argues that a consistent design helps with familiarity and reduces cognitive load. It also reduces errors and speeds up the experience.

Updating the visual style design in Starter and Pro

The reason that Salesforce started with its small business editions is because they bring the whole customer suite together in one view. It was about understanding how people move among these applications and how to simplify that movement and work as much as possible.

The left navigation connects Sales, Marketing, and Service in one application, the common approach to organizations, and the lifecycle perspective (including Quick Settings, Getting Started Guide, and so on). It was important to look across these applications as a whole experience.

One of the visual design changes focused on the color system, which Holmes said was a “small, but mighty thing." There are more shades of blue, creating contrast, whether that's in a record, a progress bar indicator, or a list. They also cleaned up the typography and made buttons more distinctive and prominent. These changes give users a better sense of what actions are connected to each other and what's more important to focus their attention on.

Accessibility is also baked in from the beginning and will be maintained and improved over time as the WCAG accessibility criteria change.

Whether building a campaign or creating a new opportunity, the focus has been on improving the user flow. However, leveraging a higher-contrast visual design also makes it easier to understand where the user is in the process.

A lot of studies were done on people using Salesforce's information-rich interfaces, such as lists and contact/account records. What seem like small changes reduced error rates and led to people doing the right actions (and doing them faster).

As to how it was decided which colors to use, Holmes notes there are many updated blues, giving quick contrast and recognition. She says they have an extensive way of calculating the contrast ratios in the UI. When they create a full color palette, they ensure that every color up against another color meets that contrast ratio:

Some of it's pure functionality, like it's making sure that how these colors sit in relationship to each other have high enough contrast to make them highly readable. But also, as we were looking at this blue honestly, it was through research, spending time with our customers, you know, being able to recognize where the action is to take. It's a small detail, but with changes in color, it's almost subconscious for a lot of users to be able to distinguish where and what actions on the page are most important, and we just find that some colors test better than others. And so we did extensive research here, and I'm always surprised by how a minor change in blue, in that pop, in that contrast, can really help guide users.

Starting small and building out

Lightning is the engine underneath every Salesforce product, including Starter and Pro editions. Holmes says there is a lot that works well under the hood, but the style was frozen in time. With Starter and Pro, the firm began experimenting with how much they could change the style to reinforce the simplicity. For example, the background images were reduced and pages organized in a consistent way. Holmes explains:

When we started Lightning in 2015, when we first released that design, each team kind of went and developed different pieces in their own way. And this is a moment where we have to bring all that consistency back together. And by doing that, it's not about, you know, pulling all of the complexity in, but it's about starting with starter and sharing that simplicity out. And again, the depth and the richness of the product across all those additions will always be there, but how you interface with it and how you interact with it should feel simple, clean and straightforward.

Something else Holmes points out was interesting - there’s a high bar with small businesses and everything has to be fast and work well together. There's also a low tolerance for complexity. For Salesforce to meet that high bar is critical, and there will be parts that work really well across all editions, Holmes says. So it's about learning and extending, but again, doing it in a way that protects customers' existing investments in their current implementations. They want customers to have a UI that feels familiar, yet fresh and refreshed. But it’s important that customers don’t feel that there is a takeover of their experience.

This is a CSS-only refresh. Every Lightning component has a CSS layer that controls the style layer. Salesforce has done two things:

  1. Created an API structure for the styling, so there's a way to change the style without touching the underlying customization.
  2. There is a switch that customers can choose to turn on or off on their own. They can opt in, test and try it, and decide when to move forward.

With the API structure, there are different elements of style and control a customer can have, and then there are things that Salesforce will control globally, like accessibility. Together, Holmes concludes, they can modernize the interface:

Customers want some degree of control, but they don't want to fully maintain top to bottom the stack of that design system. They want those updates to be on their terms. They want it to be easy to maintain, but they also want it to align with their brand or to multiple brands they may have inside of their organization, and so we've given a pretty deep thought on how to make it work by taking what's best of Lightning, but also refreshing and updating to add more flexibility.

My take

Often, a software vendor will wake up one day and decide to update their product's user interface. They set up a big re-design project, and they introduce an entirely new interface and experience to their customers. And those customers get pissed off. Yes, they might have been tired of the old interface, especially after seeing all those new products - business and consumer - and the easy-to-use interfaces. But you can't shock the customer with dramatic changes.

And if those changes didn't come through some customer review and feedback, well, then you are just making changes to be pretty or to keep up with the Joneses.

I won't lie - I wondered what was so special about changing the blue colors or adjusting the typography. But when you look at the Starter and Pro interface changes, you get it. It is easier to see things and know where to focus your attention. It does feel familiar and refreshed and not shocking. Small, but mighty changes Holmes calls colors and fonts. I'm inclined to agree.

I'll leave you with one final thought from Holmes, which explains things perfectly:

It's not just about the pixels. It's about engineering a better system that works for what customers need. And it's not that folks need a new visual style. It's that people need more flexibility. They need it to be easier to read.

A grey colored placeholder image