Carbon for Salesforce

Combining the power of Salesforce Experience Cloud and Carbon Design System, the Carbon for Salesforce library enables IBM to deliver bespoke brand experiences on Salesforce platforms.

Role

Design lead

Year

2022—23

Tags

IBM Partner Portal and Partner Plus program website screens build with Carbon for Salesforce, deployed on Salesforce Experience Cloud

Invest in an uncompromised brand experience

IBM adopted Salesforce Experience Cloud for managing partner relationships, however Salesforce’s Lightning Design System front end cannot be fully customized to align with the IBM branding. Furthermore, there are usability issues we are unable to avoid with the out-of-the-box options.

We formed the Carbon for Salesforce (C4S) design system team to tackle this problem. Our mission is to create the foundational framework and tooling to enable product teams in the Partner Ecosystem to deliver an IBM branded experience via Salesforce platforms.

Outcome at a glance

In the two years following, C4S grew to become an official extension of the Carbon Design System, delivering a majority of the Carbon components in the Salesforce LWC framework, along with components and patterns unique to the Partner Ecosystem.

We successfully supported the full team to ship the new IBM Partner Portal, and launched the Partner Plus program website, the two main digital touchpoints between the business partners and IBM.

40

Releases

117

Components delivered

23

Squads developing with C4S components

1.4k

Weekly Figma component inserts

Highlights

Fast adoption, visible ROI in the first year

The team delivered the precise assets and documentation needed to enable product squads to deliver features to our users, even before the design system is 50% complete. The first project shipped with Carbon for Salesforce assets only two months after the C4S team was formed and began work, and two years in, the products on the Salesforce platform are in majority aligned to the IBM brand. The return of investment (ROI) happened fast in part due to a very transparent backlog management strategy, where every squad’s schedule is coordinated, and what’s needed are logged as JIRA requests and synced to an Airtable dashboard available to all.

Innovative design system documentation

We delivered design usage guidance in Storybook, our component demo app, utilizing the Storybook addon for Figma, design team members are empowered to manage and edit design examples, usage guidance content, etc. All changes are instantly reflected in the Storybook site, reducing development cost and skipping further publishing process.

Solving enterprise challenges

This project gave us opportunities to dive deep into the particulars of business-to-business operation. We worked on interesting and tricky UX problems including:

  • communicate complex corporate certification process, incentive programs, and eligibility requirements
  • design to improve data hygiene in large data sets because it is collected over several decades years and the geo-political laws around business operation and data privacy have been changing
  • design with consistency but accommodate differences that arose from multiple language translation, time zones, and currency conversion
  • support and encourage users to migrate services off legacy platforms and tools smoothly without interruption of business

Testimonials

“I think that the experience now is much better than it used to be. In general, it is really very good, and I chatted yesterday with a colleague who is doing most of our deal registrations and, she agreed on this point.”

— Partner Portal user

“These C4S components will be very useful for our Distributor change function and these will be helpful with making progress through Deal Reg. Segways nicely to out upcoming work, thank you.”

— Product owner of downstream delivery

Credits

Development lead: Kai Wedekind
Design lead: Shixie
Design: Sam Mason, Charles Diggs Jr.
Development: Chris Wilson, Sovik Roy, Jason Reid, Manzoor Shaik, Roberto Sebestyen, Nicolas Davis, Steffen Baumann
Stakeholders: Thomas Reinecke, Charlie Douglas, Jana Jenkins