Designing Clarity at Scale
Designing Clarity at Scale
Salesforce
Senior Product Designer
My Role
As Product Designer, I worked alongside Salesforce’s Lightning Design System team, engineering leads, and two project evangelists. My main responsibility was developing the new design kit, collaborating across product, engineering, and accessibility.
Success Goals
Clarify
Visual Standard
Increase
Diagram Adoption
Accelerate
Workflow Speed
Optimize
Data Accuracy
Enhance
CRM Implementation
Improve
User Satisfaction
Designing Clarity at Scale
Salesforce
Senior Product Designer
My Role
As Product Designer, I worked alongside Salesforce’s Lightning Design System team, engineering leads, and two project evangelists. My main responsibility was developing the new design kit, collaborating across product, engineering, and accessibility.
Success Goals
Clarify
Visual Standard
Increase
Diagram Adoption
Accelerate
Workflow Speed
Optimize
Data Accuracy
Enhance
CRM Implementation
Improve
User Satisfaction
A System for Systems.
A System for Systems.
A System for Systems.
Approach
Modular Thinking
Designed the diagram kit as a system of components, not static templates, ensuring flexibility while preserving consistency. Created layered logic for environments, data flow, and interaction points.
Evangelism-Driven UX
Collaborated closely with Salesforce evangelists and documentation teams to align the system with actual developer and partner needs, ensuring usability in live technical environments.
Integration-Ready
Optimized the system for seamless export to Lucidchart and dev tools. Focused on clarity, legibility, and hierarchy to support both design and engineering workflows while upholding Salesforce's accessibility promise.
From Chaos to Consistency.
From Chaos to Consistency.
What Does the Product Do?
Standardizes architecture diagrams and design patterns, making it easy for teams to produce ADA-compliant, consistent assets company-wide.
Project Overview
Salesforce’s architecture diagrams needed consistency, accessibility, and scalability for internal and external use. Previous assets were scattered, visually inconsistent, and hard to maintain.
Kickoff & Collaboration
We started with a kickoff audit of existing diagrams and anti-patterns. Frequent syncs with accessibility, brand, and external partners kept feedback flowing. I presented new concepts in cross-team reviews and iterated quickly based on input.
Problem & Assumptions
Diagrams were inconsistent, not accessible, and created friction for internal and partner teams. We assumed a standardized, flexible system would reduce errors and improve adoption.
Process & Validation
Audited existing diagrams and ran accessibility reviews.
Developed a component-based diagram kit, testing with both designers and engineers.
Created usage documentation and templates for external partners.
Validated via user testing, accessibility checks, and feedback loops with partner teams.
Decision-Making & Feedback
Key decisions were made in cross-team design reviews. Feedback from accessibility, engineering, and product was incorporated in every iteration.
Impact & Results
The new kit scaled internally, was licensed externally through Lucidchart, and increased adoption. Social engagement rose 20% after the TrailheadDX campaign, and internal teams saved hours per project.
Reflection
Working at the intersection of design, accessibility, and systems thinking, I saw how cross-team buy-in transforms a design asset into a company standard.
“Our work on the architecture diagram design system directly contributed to the launch of Salesforce’s Well-Architected visual standards—now a company-wide reference for technical clarity.”
Featured in: Salesforce Well-Architected / Diagrams overview.
Learn more: Well-Architected Overview, What’s New with Salesforce Diagrams
Redesigned complex architecture diagrams to be more modular, scannable, and consistent for technical teams.
Level 1: Mapped out the top-level conceptual model to provide clarity on the system’s structure, priorities, and user journeys.
Level 1: Broke down platform architecture into visual layers, showing relationships and integration points between major system modules.
Level 2: Sales Provisioning - Visualized service provisioning flows to simplify onboarding, streamline configuration, and clarify dependencies for stakeholders.
Level 3: Process Flow - Documented core process flows for delivery, release, and testing, making it easier for teams to align and follow best practices.
Level 4: Card Style Detail - Established reusable diagram components and a visual style guide to drive system-wide consistency and accelerate adoption.
Next case
Dive into the product design for Levr’s next-gen betting app.