Design / UX / Leadership
Salesforce Event & Marketing Design System.png

Design Systems

Salesforce

Design Systems

 

Salesforce Re-design & Design System

The Task

Salesforce needed to update and modernize all of its web properties to support dozens of functions outside of the product including marketing, events, video libraries, shopping carts & help & training.

logo-company-large.png
shutterstock_125100950.jpg
 

Analysis

https://www.youtube.com/watch?v=Y7XW-mewUm8

https://www.youtube.com/watch?v=Y7XW-mewUm8

When designing the system we undertook a monumental task of cataloging all Salesforce properties to extract from them use cases. We realized that the system needed to be scalable to handle libraries of video, eBooks, product pages etc...but also needed components to easily build out more complex things like wizards and shopping carts as well.

We could not interrupt the business and risk having the site down for even a minute. We had to build the plane while flying it. We looked at all traffic to all the pages in the website, and pulled analytics on each to determine how much traffic was going to each and what the business value of the page was.

Working with our partners in Engineering and Strategy, we realized the site was too large to redesign at once, and we were not even sure we wanted to, either. We found over 36,000 pages in the Salesforce ecosystem dating back to the company’s beginning, but only a small fraction of them ever got any traffic. Most of the pages were unimportant, unclaimed and ancient and therefore could be simply turned off and rerouted.

 

We of course looked at existing libraries and systems to influence our library, but found most off the shelf to be either too bloated with unwanted styles and permutations that weren’t exactly correct, or too limited to be useful when thinking of such an expansive system.

For these reasons we determined that we had to build it ourselves, and have it purpose-built for our funnel/lifecycle. It had to support use cases and the massive undertaking or rebuilding of everything new, streamlined, responsive and worthy of Salesforce.

Screen Shot 2020-05-11 at 4.23.48 PM.png
 

Design

My specific role initially focused on the overall information architecture and how each new section had to be standardized to utilize the framework but balanced, creating a generic, enough reusable system. This system still needed the flexibility to create unique and creative experiences that didn’t look like we used the same components for everything.

The system had to also support a growing number of acquisitions and new products and even whole product lines that were continuously added to the ecosystem. There were daily challenges with product marketers, product managers and HIPPO stakeholders who tried to break standards at every turn.

Much of my day spent outside of design was telling people why we could not build it the way they wanted to this week, and explaining UX fundamentals. Of course, we would always test it if I couldn’t talk them out of it :)

 

To redesign the ecosystem, we identified key flows and high traffic/value pages, as we had to prioritize the design with the development with engineering leaders to deliver exactly what we needed when we needed it. Due to the large size of the site, there was a plan to replace the pages iteratively starting from the top-level navigation and work on the other pages in phases.

We developed rough template page types like home pages, product pages with multiple levels, video and asset repositories, and landing pages, and worked with our partners to start designing with the actual copy and assets.

These pages would serve as the foundation for all other pages types to ensure that components that were created could be used ubiquitously “as is,” across all pages, and be customizable to accommodate edge cases.

 

Video Components and Players

A high degree of use-cases involved the playback of videos, both separately and in playlists. Product demo videos were one but the Dreamforce event also had aspirations of making a digital virtual experience that closely mimicked its live event. All presentations and talks were to be recorded and available—not only real time but for users to view indefinitely.

We spent a lot of research time and effort to come up with different permutations of video players and experiences to be available to content producers for different types of videos. The results of that work can be seen here

 

We had plenty of content and really spent time around not only the taxonomy and organization of that data, but how to retrieve, index and sort the information.  We iterated through search and advanced filters components that would be most useful to users, as well as useful nomenclature and labels that translated Salesforce’s internal speak to useful standard language that would be easy for people to identify and use.

We did extensive usability testing on the filters and search, as it was a central part of the overall experience. We experienced technical difficulties with retrieval of such a large amount of content and worked overall to improve the speed and quality of those search results, particularly when the query did not match the exact taxonomy and required Boolean logic.

 

Results

The framework performed exactly as needed. It standardized the experience over all Salesforce properties, and gave the right toolset to build anything the business needed quickly and efficiently. As everything was standardized, stakeholders could simply pick from an online catalog of components that could then be styled and or customized to accommodate any design.

Eventually, we started wrapping in the larger product lightning design framework (now mature enough), located here, into our components, to provide a seamless experience coming and going out of the larger products like Salescloud.

 
MCDC.jpg
Homepage Slide 1.png