Salesforce Customer Success Events
Rebuilding a more efficent design system for the Salesforce Customer Success Event website.
Launch Site
Rebuilding a more efficent design system for the Salesforce Customer Success Event website.
Launch Site
Design System Designer
Figma, Google Meet
3 Months
Salesforce, Savage Bureau
Salesforce Customer Success teaches (or shows) their customers how to use Salesforce products. Clients can explore a wide array of online events ranging from Q/A chats with an expert in the field to informational webinars.
The previous design system did not provide the most recent components being used on the website, which caused confusion and errors for the design team.
To ensure this did not happen again, the new Salesforce Customer Success design system was revised to reduce confusion and maximize efficiency.
Thus, we asked the question,
“How can we create a more effective design system that is up-to-date and easy to edit ?"
To ensure we were creating the latest and greatest components in our new design system, I screen-captured every existing page type into Figma. This included multiple screen-captures of the different types of page styles if a user was logged-out, logged-in, or a signature/premier member and the entire user flow of registering for an event.
Although some of the component designs had already been created and could be imported into our new system, many had lacked editability. For example, changing the text would require the designer to recreate the component entirely as it would overflow or incorrectly resize the component.
To ensure this would not happen, I created efficient components utilizing a combination of Figma’s auto-layout, constraints, and variants features. Using these techniques helped create flexible components that were both easy to scale and change.
One of the key components that I built into our design system is the 4-column card Within the component contains sub-components for icons such as the date/time on the top left and the heart on the right that can be swapped out through Figma variants.
Additionally, it contains a variety of auto-layout and hug-contents settings that allow for fast text revisions without breaking the component entirely as everything stays intact and grows accordingly, based on the changes you make.
A large component feature I worked on was the Events Registration Form. I created a flexible component that allows the data entries to be changed through Figma component variants. Designs for default, invalid, and valid states are all accounted for and can easily be changed with a few clicks.
In the end, we completed an up to date design system for both desktop and mobile devices. To ensure that the components were easily editable for any updates in the future, large components such as cards are interlaced with smaller components such as icons or tags that are reused in multiple other components.
Once the new components were approved, we recreated the page builds I originally screen-capped. These were then handed off to the development team for production.
The biggest challenge I had while working on this project was the intimidation of tackling this from ground zero. Other challenges included the tediousness of screen-capturing every page type and its user flow as it required a lot of attention, making sure I recreated all components that should be accounted for.
Though this was a very large project to take on, I’m extremely proud and happy with the work I’ve contributed to the Salesforce Customer Success Events design system. It allowed me to work on my skills of attention to detail and human-centered design thinking.
