Website Experience Subsystem

Trailhead, Salesforce.com, Salesforce.org, and Tableau using Website Experience Subsystem (WES)
Website Experience Subsystem is used in Salesforce.com, Salesforce.org, Tableau, and Trailhead

Introduction

The Website Experience Subsystem (WES), a new subsystem within the Salesforce Design System, was designed to ensure a consistent and cohesive digital experience across all Salesforce marketing websites. Websites include but are not limited to: Salesforce.com, Salesforce.org, Trailhead, AppExchange, and much more. With over 108 sites and 417,000 pages, the initiative aimed to strengthen brand identity by providing a unified look and feel among all customer-facing Salesforce websites. By leveraging reusable components and patterns, WES delivers a seamless, brand-aligned experience that resonates with the Salesforce design language.

Problem

Over time, Salesforce has acquired many companies such as Mulesoft, Tableau, and Quip. However, many users aren't aware they are all part of the Salesforce ecosystem. Additionally, the various Salesforce marketing websites have different appearances, leading to a need for a cohesive and unified experience.

A list of a few companies that Salesforce has acquired in previous years
Salesforce has completed 62 acquisitions so far in 2024

Design Objective

Design a unified and cohesive digital experience across Salesforce marketing websites to strengthen brand identity and ensure consistency through reusable components and patterns.

Skills & Responsibilities

Skills: Cross-functional Collaboration, Inclusive Design, Design Leadership, Design System Development, Governance, User Experience Design, User Experience Research, Accessibility Thinking

Responsibilities:

  • Created highly flexible WES components & patterns
  • Communicated and worked with designers & engineers from other product teams, promoted collaborative innovation, and boosted stakeholder engagement
  • Hosted a robust enablement program which includes Office Hours, UX resources, and dedicated Slack channels to provide critical support for stakeholders and contributors
  • Provided UX feedback and expertise to designers across product teams on WES components and pattern designs to ensure all accessibility requirements and use cases were met
  • Wrote documentation on how each component and pattern is used, along with documenting its behaviors and functionality.

Challenges

  • Change of Priorities: The development of WES was paused due to a shift in priority for projects, resulting in the loss of engineering team
  • Unfulfilled Code Adoption: The loss of engineering team caused WES to never be fully integrated into the codebase which impacted WES’s functionality and compatibility
  • Competition with Other Subsystems: During the development of WES, other subsystems in Salesforce were being developed which hindered WES’s timeline

Results & Impact

  • High Adoption Rate: By offering support, governance, and resources, WES achieved an 85% adoption rate among 20+ customer-facing website
  • Well-Recognized Subsystem: Many teams sought out adoption and support for WES during and after its development
  • Active Contribution Efforts: 46+ designers and engineers from many product teams would contribute WES components and patterns to the library, with weekly UX reviews in office hours
  • Positive User Feedback: Internal teams appreciated the creation of WES and praised it unifies customer-facing websites of Salesforce products & acquisitions
Contribution model showing 46+ contribution supports and 40% component design contributions during the development of WES
46+ designers and engineers from other product teams contributed to creating WES. 40% of the components in WES were designed and contributed by other product teams.

Component Examples

Below are a few examples of the many WES components and patterns designed by me and other contributors as a collective effort.

Vertical timelineMenuVisual pickerButtonTextareaCheckboxCardsBadge

Documentation

The WES components and patterns are documented in the Figma library and Zeroheight, allowing internal users to quickly & thoroughly see the components’ designs, behaviors, and code.

Figma page of Menu component that includes anatomy, variants, accessibility guidance, and more.
A page in Figma of the WES Menu component that includes its anatomy, variants, accessibility guidance, etc.
Storybook page of Menu component providing guidance
A page in Zeroheight documenting guidance for WES Menu component

Reflection

This project marked my first experience developing a subsystem at Salesforce, where I developed a deeper understanding of organizing and creating components in Figma for improved efficiency. As I designed each new component, I conducted internal and external audits of SLDS components, which gave me insight into how they are utilized not just in Salesforce but across other design systems as well. This hands-on experience accelerated my proficiency within the Salesforce UX ecosystem. It also reinforced how crucial accessibility is in design, thanks to the guidance of an accessibility expert who expanded my knowledge. Collaborating with a large group of contributors taught me the value of constant communication, regular progress check-ins, and setting clear timelines to ensure everyone stayed aligned and on track. These elements proved essential for successfully managing and delivering the project.

View More