The Salesforce Lightning Design System (SLDS) offers over 1000 icons across multiple categories such as standard, custom, action, doctype, and utility. These visual elements align with Salesforce’s principles to create intuitive and cohesive user interfaces across Salesforce applications, allowing designers and developers to convey specific actions, statuses, or types of content in a clear and visually unified way. Salesforce Digital Asset Manager also provides hundreds of illustrations and images. They are designed to maintain brand consistency and streamline visual content for marketing, sales, and product teams.
Salesforce illustrations and icons are currently housed in two separate locations, creating challenges around searchability and discoverability for our users. Editing and downloading illustrations is cumbersome due to large file sizes, which consume excessive storage space. Because these illustrations are static image files, staying updated with the latest assets in the product is difficult, leading to inconsistencies across the board.
I don’t love our “chicklet icons”. There ends up being a rainbow light brite board of colors and humans naturally want to ascribe meaning to color. It creates unnecessary cognitive load that I think is unnecessary in data rich displays.
From a compliance and design perspective, we face several challenges. Many icons lack clear color associations and do not meet WCAG 2.1 accessibility standards. There’s also a high level of visual inconsistency among icons, with over 1,200 icons in the SLDS library and many duplicates contributing to system bloat. Outsourcing design cleanup would cost over $500k, adding further strain to resources. With more than 120 new icon requests per year, governance and maintenance require significant effort from the Lightning Design System team.
Overview
Deliver a tool that is the single source of truth for finding, customizing & implementing icons and illustrations for all Salesforce Products & Digital Entities.
Timeline
3 months
My Role
Project owner & Lead designer
Skills
Inclusive design, User experience design, User experience research, Wireframing, Prototyping, Problem-solving, Accessibility thinking, Information architecture knowledge, Cross-functional collaboration, Communication and presentation
Responsibilities
I began the project by gathering insights and pain points with the existing SLDS icon and illustration tools. To dive deeper, I organized two design jam workshops—one focused on icons and the other on illustrations—with participation from 18 designers across 10 product teams. During the sessions, I organized time for designers to document and share their pain points related to icons and illustrations. This was followed by collaborative sketching of potential solutions, which were then shared and voted on to identify the most promising ideas.
The six most common pain points that were revealed in the workshop were:
A few solutions that we came up with were:
The six most common pain points that were revealed in the workshop were:
A few solutions that we came up with were:
I conducted an audit of Salesforce’s DAM alongside several external tools, evaluating their user experiences by noting the strengths and weaknesses of each. This competitive analysis helped me pinpoint essential UX features to design a flexible, self-service icon and illustration tool. Identifying key differentiators in usability and functionality informed the development process, ensuring the solution is robust and user-centric.
The external tools I analyzed were: Iconscout, Nucleo, Blush, Google Icons, & The Noun Project.
I presented the findings on the strengths and weaknesses of these tools to my team. We then moved to Figjam where we categorized the strengths of these tools and collaboratively prioritized the key features we wanted to incorporate into Icons and Illustrations as a Service.
The features customers would like to see in Icons and Illustrations as a Service are:
Before diving into higher-fidelity designs, I began by sketching the vision for Icons and Illustrations as a Service. Sketching the user flow early on allowed me to visualize key interactions and present the concept to my team for quick feedback. This low-fidelity approach made it easier to iterate rapidly and refine the flow based on input.
After presenting and receiving feedback on the initial sketches, I continued refining and presenting them, leading to a more solidified UX foundation and a clear information architecture for the tool.
Click here to view the final prototype in Figma.
During the final three weeks of my internship, I focused on designing, presenting, gathering feedback from my team, iterating, and prototyping the Icons and Illustrations as a Service (IIAAS) tool.
With the IIAAS tool, users can now easily retrieve icons and illustrations by downloading their desired file types and sizes or by copying the corresponding code. The tool also offers a builder feature, enabling users to customize their icons and illustrations before finalizing them.
For icons, users can request a new icon in the builder and retrieve their customized icons directly within the platform.
For illustrations, users have the flexibility to adjust various elements such as characters, backgrounds, foliage, and more, allowing them to tailor the visuals to their needs before exporting.
Key highlights of this tool are:
Customers can customize the icon library to match their brand experience by adjusting the style and stroke of icons.
A side panel allows users to seamlessly switch between utility, standard, and action icons, with the option to export via code or download.
An Icon Builder within IIAAS enables advanced customizations, where users can easily submit requests for new icons.
Enhanced filtering options for Salesforce illustrations offer customers more precise control over asset selection.
When selecting a character image, related illustrations are surfaced at the bottom of the panel to increase discoverability.
Users can fully customize complex illustrations, such as spot illustrations, by modifying elements like the scene, foliage, animals, and more for a personalized visual experience.
I'm incredibly grateful for the opportunity to collaborate with so many talented designers across different teams at Salesforce. Working on this project, even though it was eventually de-prioritized, was a rewarding experience. It allowed me to push myself creatively and explore visionary design concepts using the robust Lightning Design System while solving a complex problem that affects many users. I owe a special thanks to my Design Systems team for making my internship at Futureforce an enriching experience. This journey not only challenged me but also led to my full-time role at Salesforce, where I continue to learn and grow alongside senior, principal, and lead designers who inspire me every day.
Cheers to the fun memories!
