Service Victoria Design System
Salesforce Lightning
Situation
At Service Victoria, I recognised the need for a more consistent, efficient, and user-friendly experience within our Salesforce transaction workflows, I led the development of a custom design system. This initiative was directly inspired by and built upon the foundations of the Salesforce Lightning Design System (SLDS). SLDS, with its comprehensive collection of guidelines, reusable components, standards, and resources, provided a robust framework to ensure designers and developers could build coherent and effective digital experiences within the Salesforce ecosystem.
The goal was to leverage the principles and components of SLDS to create a tailored design system specifically optimised for our unique Salesforce transaction processes. This involved adapting and extending SLDS to meet our specific business requirements, data structures, and user needs within the context of completing and managing critical transactions within Salesforce.
This situation sets the stage for discussing the specific challenges, design decisions, and implementation details involved in creating the transaction-focused design system based on the Salesforce Lightning Design System.
Tasks
-
Create a consistent and Salesforce-branded experience, providing the foundational rules for all subsequent design and development work within the Salesforce design system.
-
Provide reusable elements that would enable developers and designers to build high-quality user experiences efficiently.
-
Empowering developers and designers by providing them with the knowledge and resources needed to effectively utilise SLDS, ultimately leading to more consistent and high-quality outcomes.
-
Ensuring the adoption and ongoing improvement of the Salesforce Lightning design system.
Actions
-
I led the effort to define the fundamental visual styles (colours, typography, spacing, iconography) and interaction guidelines that would form the foundation of SLDS. This involved deep dives into user needs across various products, and best practices in UI/UX design.
-
I made key technical decisions to build the SLDS component library using modern web standards, focusing on modularity and accessibility (WCAG compliance). This involved designing components to be reusable, composable, and inherently accessible to users with disabilities.
-
I lead the creation of a detailed and user-friendly documentation website for SLDS. This went beyond simple API references to include clear usage guidelines, design considerations, and practical code snippets that developers could directly copy and paste. The interactive component previews allowed for real-time exploration.
-
I actively worked to gather feedback on SLDS from various Salesforce product teams and the broader developer ecosystem. This involved setting up feedback channels, conducting user research, and iterating on the design system based on real-world usage and needs.
These designs are currently protected – if you’d like access, please contact me directly
Results
I played a key role in building the Salesforce Lightning Design System (SLDS), I witnessed firsthand the successful results it brought to Service Victoria, specifically in enhancing the design and patterns of their transactions and streamlining workflows.
By providing a standardised library of pre-built components and clear design guidelines, we eliminated inconsistencies that could confuse users. With SLDS, our developers no longer had to build common UI elements from scratch.
The ready-to-use, well-documented components allowed them to focus on the unique logic and data requirements of their specific transactions, dramatically reducing development time and effort. This meant they could roll out new services and features much faster.
