The Lightning Design Systems team and I successfully delivered the Enhanced Lightning UI (ELUI), a modern redesign aimed to improve navigation, task efficiency, and user accessibility. Spanning three years, this initiative evolved from a North Star visionary concept to its first round of implementations within the Salesforce ecosystem as I speak.
In close collaboration with teams from Sales Cloud, Starter, the accessibility team, and Design System Engineering, we developed an accessible, scalable, and composable design system framework and customizable coding language. This deep collaboration enabled seamless adoption across Salesforce teams and customers.
Our design team swiftly delivered design specs and a comprehensive Figma kit within a single release, which is four months. The Enhanced Lightning UI kit leveraged advanced design system features, empowering designers to iterate quickly while maintaining alignment with Lightning Web Components. The response was overwhelmingly positive, with users praising the system’s robustness and flexibility.
This project was a collective effort, where decisions were made together, fostering a culture of trust and respect within the team which ultimately enhanced our efficiency and passion for this project.
Salesforce last refreshed its UI in 2015; by comparison, many of our competitors have refreshed their designs with more up-to-date UI and accessibility standards. Because of this, we have lost more than $7 million ACV (annual contract value) in deals due to the complexity of building custom, accessible components and our outdated UI with limited branding capabilities. Internally, designers and engineers from other product teams struggled to consume our Figma and Storybook library as it did not leverage the latest and greatest features since the last UI refresh. With new acquisitions and features, the previous design system lacked robustness and flexibility, causing designers to detach our components and further creating inconsistencies in the UI across different clouds.
Revamp Salesforce's design system to be scalable, flexible, and easy to use, using the latest design tools and accessibility standards. Improve user navigation, task efficiency, and accessibility, while helping internal teams maintain design consistency across Salesforce.
Skills: Cross-functional collaboration, Inclusive design, Design system development, Governance, User experience design, User experience research, Prototyping, HTML/CSS knowledge, Problem-solving, Adaptability, Accessibility thinking, Design operations
Responsibilities:
The Design Systems team held a series of design jam sessions, involving over 100 participants in collaborative discussions and bringing together 30+ contributing designers. These sessions resulted in 140+ Salesforce screens being designed, each showcasing its own distinct look and feel.
We sorted through all 140+ screens to identify common themes our internal contributors had in their designs. By outlining the most common themes from this design jam, we can understand what other product teams and their customers consider a successful visual refresh in Salesforce. Some emerging themes we pinpointed were: redesigning our navigation, having more white space, including bolder & vibrant colors, introducing roundedness, and envisioning a brand that is uniquely Salesforce.
We crafted five UI principles from these recurring themes and explored three distinct design concepts for the future UI of Salesforce.
Before we began designing, we crafted five foundational principles that drove our design explorations. We wanted the new UI refresh to be seamless, responsive, intuitive, trusted, and delightful for our users.
From these principles, we focused on three distinct design concepts: Current, Kondo, and Hive. With each design concept, we outlined its relationship with users, illustration styles, color palette, spatial depth, and more in a moodboard.
This study emphasizes the solo explorer on a guided path.
“A greater force moves me along a journey. I clearly see where I’m headed and I arrive at the right destinations along the way.”
This study emphasizes the tool, itself. Imagine the current of a river. It moves whether a human is riding the current or not. But humans have learned to trust and navigate these currents to get them where they’re going. A design language that uses space to drive a purposeful momentum and flow of people. Inspired by wayfinding within living systems.
Primary Attributes:
This study emphasizes a partnership between a human and a system.
“I have hired the best partner for my success. I am free to move at my own pace. I feel understood and reassured.”
This study emphasizes a partnership between a human and a system. Imagine hiring an advisor. You build a relationship through progressive stages and responsive conversations. A design language that is interested in your success and reveals the right things into your focus at the right time, working tirelessly on your behalf. Inspired by human-to-human interaction, it’s alive, warm and welcoming.
Primary Attributes:
This study emphasizes familiar cues that orient, invite and celebrate human-to-human collaboration (e.g. customers, coworkers).
“I feel supported in building stronger collaboration and unlock success in my daily tasks.”
This study emphasizes familiar cues that orient, invite and celebrate human-to-human collaboration (e.g. customers, coworkers). People feel confident in their customer relationships and are motivated to bring other team members in. A design language that uses commonly understood signals makes it feel natural for people to engage, discover, and build community.
Primary Attributes:
We presented these three design concepts and their respective mood boards to the design leadership team. The design leadership team voted to move forward with combining both Kondo and Current. From there on, we worked on delivering the components and Figma Kit of the Enhanced Lightning UI.
Color Palette
We introduced a fresh color palette, featuring an electric blue that highlights the Lightning brand identity. In our current Lightning Design System, some colors fall short of WCAG 2.1 compliance. To address this, we collaborated with accessibility experts to develop the new ELUI palette, incorporating bolder, more vibrant colors. This ensures accessibility compliance while enhancing the overall user experience, making the UI both functional and delightful.
Skeuomorphism
Several new ELUI components have skeuomorphic details to create a more tactile, sensory-driven experience in a 2D environment. By giving these components a more touchable, physical quality, we enhance the user’s interaction with Salesforce, making navigation more intuitive and inviting engagement with the interface.
Circular Motifs
Inspired by the design of the Salesforce cloud, built from six overlapping circles, we embraced circular shapes and rounded edges throughout the UI. This approach conveys a sense of friendliness, fluidity, and warmth, reinforcing a welcoming experience for users.
Native Fonts
We’ve switched from SF Pro to Segoe UI and updated the type scale to improve legibility across both Windows and Mac users. This brings forward data and insights more in the UI.
Figma Kit
We built the Enhanced Lightning UI Figma Kit in one release, which is 4 months, containing 100+ robust components that are aligned with the existing components in the Lightning Design System. Throughout this process, our team held twice-weekly critique sessions to review each component during the design process, ensuring consistency and excellence.
Storybook
I collaborated closely with engineers to help build the Storybook for our components which served as an interactive source of truth for both designers and engineers. The Storybook showcases the different variants, states, and behaviors of each component. Throughout the process, I consulted with engineers to ensure the alignment and accuracy of components and helped identify and resolve bugs.
After three years, the Enhanced Lightning UI is finally available to our customers. The Enhanced Lightning UI delivers a modern design that improves navigation, page load speed, and approachability for diverse users.
Its look and feel is achieved with component styling and these new features:
Being that Salesforce has many products, we hosted biweekly SLDS Ambassadors meetings, where we gathered designers from each product cloud to discuss the latest updates and resources about ELUI. From there, ambassadors relay these updates to their teams. We've also doubled our office hours from 4 to 8 slots per week to provide more extensive support for designers. Additionally, we were dedicated to a schedule that appointed a team member as an ELUI support coordinator who addressed any UX questions in our design system Slack channel. These efforts helped streamline our support to teams and speed up their adoption process.
ELUI Evolution & Beyond
After all products adopt the ELUI visual refresh, the design systems team will shift its focus to enhancing the library with key UX improvements. We will introduce new, innovative motion design to elevate user engagement and create a more delightful experience. Additionally, we will continue evolving ELUI to ensure it remains future-proof, including offering users exceptional experiences through the integration of generative AI.
Reflection
I want to start by expressing how deeply grateful I am to have been part of such a high-profile project. I'm even more thankful for the opportunity to collaborate with some of the most talented and dedicated designers at Salesforce. The challenges we faced early on were tough, but they were a testament to the passion each of us brought to this monumental effort. Together, we navigated those rough patches with grace and integrity. Through this visual refresh, I became highly proficient with Figma’s latest features and now feel confident in my expertise with the tool. Hearing praise from leadership, the wider organization, and especially from our users, has reaffirmed why I’m so passionate about being a Product Designer.
