Joining SiteTracker and Designing using Salesforce Lightning

I joined a new company called SiteTracker this month as their newly minted Head of UX. Just to be clear, I am the only designer, so “Head” is a little high falutin. I will post eventually about my interview process and lessons learned.

SiteTracker is a Series A startup growing quickly in Palo Alto, CA and Montclair, NJ. The product is basically project management software, maybe even leaning towards an ERP system. It’s not for any kind of project that YOU do. It’s for big enterprises with high volume, highly templatized projects. Imagine a project to upgrade the cell towers for a major communications provider across the country. It’s humoungous with hundreds of different people involved.

Probably the most interesting thing about it is that the product base is Salesforce (shortened to SFDC – SalesForceDotCom). Most software nowadays uses AWS or Google Cloud to power their infrastructure. Using Salesforce is an uncommon choice, but I have come to appreciate the benefits. The number one benefit is that you can leverage a ton of the boring stuff right out of the gate such as:

  1. User Management and Security
  2. Field, Object, Record Management (This is the crown jewels of the SFDC system)
  3. Public APIs
  4. Security of Infrastructure (crucial for enterprise or government contracts)
  5. Internationalization (changing the language of the UI)
  6. Salesforce Lightning UI Components

This last one is a little bit of a pro and con. The Lightning Design System is relatively new and heavily influenced by Google Material and other design systems. It’s a weird mix of too much and too little detail. They have all these different components, but I have to do a bunch of work to figure out the exact spacing and rules of how they work. Plus there are a bunch of options of how to do things, but no real guidance around the preferably way. The biggest example of this are admin pages. These are simple pages with a big form on them and it’s unclear exactly how editing is support work. This is a really simple case, but there is no clarity on the subject. Lastly, there is no real community of Lightning enterprise designers.

I remember when I was designing in 2007 the first HTML Email marketing templates. There were about a dozen people worldwide who gave a shit about it and we all geeked out together around the perfect HTML. Or in 1998, when I was designing the first Flash based shopping solution for 2Glow or the first real E-Commerce solution for Grainger. I think there is something weird about me that I love to design things off the beaten path. It’s a strange feeling because it’s lonely being far from the “norm”, but also there is a sense of pride that I am cutting a path for future designers.

Anyway, back to Salesforce Lightning. The downloadable symbols are Sketch only. As a Figma designer, I needed components that were build explicitly for Figma. By this, I mean that they can be resized with the right constraints, plus they have the right layers to make it easy to turn ON/OFF different states. I didn’t recreate EVERY Salesforce components. Just the most important ones. I probably could clean this up with labels of what everything is. Yeah, definitely should clean up.

A note on Fonts
Salesforce made their own font called Salesforce Sans. It’s not hosted on Google so I felt that it would fuck up the viewing in Figma. After alot of work, I settled on Work Sans instead. I made a typography Frame and adjusted the letter-spacing (kerning) of Work Sans to made it nearly identical to Salesforce Sans. I have shown it to a few people and they can’t spot the difference. So for design-sake you are nearly pixel perfect, but with a Google hosted font.  If Salesforce puts their font on Google, I would switch to it instead.

A note on Icons
I really wish Figma had a first class system for icons. I can make a special library of icons, which isn’t terrible, but it’s not ideal. What ended up doing is spreading them out and organizing them in a frame. Similar icons were put together. I still need to clan up the layer names and combine layers that don’t really need different vectors. I wonder if it would be beneficial for Salesforce to make a font for their icons. Not sure.

A note on Colors
Figma’s new style system works pretty well, but I am noticing that Salesforce has alot of fonts that are very close to each other. I had to split the difference a few times to gain consistency.

Here is an embed of my Figma file with all the SFDC Lightning components and colors and fonts and icons. Feel free to make a copy if you happen to be one of the small cadre of Salesforce Lightning designers. One request, if you use it, please just let me know. I’ll also post it to the Figma Resources site. I think it’s important for Designers and Developers to share their work online. A rising tide lifts all boats.

Screen grabs from Figma

So far, the people at SiteTracker have been very welcoming of me and open to ideas. I have made 3 different product designs in my first 2 weeks. If all goes well, I will be here for a decade or more and contribute to the culture, product, and success of the company. Thanks for everyone who helped me along the way with special shoutouts to:

  1. Michael Mullany who introduced me to the SiteTracker team and offered sage advice for me along the way. Michael probably has a ton of wisdom for Salesforce from when he was CEO of Sencha.
  2. John Gibbon who encouraged me every step of the way and was the perfect sounding board for my journey. I’ve known John since 2004, when he hired me for my first interaction design job in Silicon Valley. He has been a mentor ever since.
  3. Kristen Malkovich who kept me positive throughout the process. She is relentlessly hopeful and I am a better person for knowing her. #OctopusGarden

I’ve had an interesting career so far. Here is to our best days being ahead of us.


5 responses to “Joining SiteTracker and Designing using Salesforce Lightning”

  1. Hey Glen!

    I’ve just wanted to tell thank You! We’re working on some sections of our app with SLDS so I will try to share it with my have easier way prototyping 🙂

    Thanks again for Your work!

Whatya think?

%d bloggers like this: