As Salesforce's portfolio rapidly grew, the main Salesforce.com site served as a critical entry point for users but lacked design integrity due to its scale. Pages added at random by individual teams suffered from visual inconsistencies and inefficient development cycles without documentation, templates, and UI components to align efforts.

Faced with balancing consistency and organizational agility, it became apparent that a centralized design system was needed to strategically unify teams by improving UX unity, accelerating the pace of development, and developing a common language. As lead designer, I led the creation of this system to unify all products.

In our quest to fulfill our mission, we undertook a comprehensive exploration of our customers' unique requirements. This encompassed executives at large enterprises, decision-makers for SMBs, developers, and implementation specialists. We condensed our strategic insights into distinct archetypes, enabling the entire organization to comprehend and empathize with the diverse roles and responsibilities within our customer base.

We delved deeper by mapping the "Jobs to be Done" for each archetype. This enabled us to gain a holistic understanding of the tasks, challenges, and goals that drove our customers' interactions with Salesforce. Armed with this profound knowledge, we proceeded to craft strategic user journeys that emphasized the imperative of interconnected digital properties. These journeys vividly illustrated how various properties needed to collaborate seamlessly, ultimately enhancing the overall customer experience.

Our dedicated efforts culminated in the development of a groundbreaking, unified customer vision. This vision became a unifying force within our organization, presenting a lucid and captivating portrayal of how a seamless customer experience could be actualized.

Building on the foundation of our Customer-Centric Transformation, we delved into refining our website architecture to ensure a clearer, more effective structure. This involved creating a set of well-defined pages, each with its own template. These templates, including Overview, PDP (Product Detail Page), Pricing, and more, were meticulously crafted to cater to specific user needs.
‍
Additionally, we organized these templates into modular building blocks, allowing for greater flexibility and adaptability. This approach enables us to create cohesive and consistent web pages while tailoring content to meet the unique requirements of our diverse customer base. The result is a website that not only aligns with our customer-centric ethos but also offers an improved and more intuitive user experience.

We decided to develop a library of reusable components using the proven Atomic Design methodology of Ben Frost. Also for this project we decided to use Figma as a unified design and collaboration tool.
‍
Using the existing Brand Central resource we began streamlining basic elements such as grid, color and typography. Then in the process of redesigning the homepage, we began to assemble the first molecular components of the UI - buttons, inputs, cards, etc. We then continued to create more complex organisms and patterns by combining elements, adhering to clear atomic principles that encourage reuse.
‍
The final stage involved creating the basic blocks for building the page, called Blades. These included blocks such as Marquee Header, 1-Up Column, Feature, Contact Us, FAQ and so on. The resulting blades could be easily combined by designers and content editors to quickly create branded pages.
‍
Throughout, I worked closely with engineers to determine technical feasibility and simplify element integration. The result was flexible building blocks that embody the company's design standards, ready to be used across teams and verticals in a manageable and scalable way.

After creating the foundation of the system design, we needed a clear set of instructions. For this purpose, we created a convenient and linked Annotation system with detailed description and rules for each component.
‍
The description included a general overview of the component, with a detailed description of each element and a system of linking information. Also examples of adaptive design for different breakpoints: Desktop, Tablet and Mobile. Also all possible variants for each component, for example: module with one, two and three cards. The implementation of the system helped Designers from different teams to easily use and complete the library. It also united frontend developers from different departments of the company and provided an opportunity to convert new design projects into code faster and more evenly.

Salesforce.com is powered by the CMS Wordpress. Every day, hundreds of employees create new pages using the WordPress dashboard. To turn the logic of how each design system blade works into a WEM authoring control in WordPress, we created an additional part of the Design System design - called the Authoring System. With it, we created a step-by-step design of what happens when working with the sidebar, as well as with the blade itself. Each step was described in detail using combinations of Figma components. This library was also a source of information for back end developers designing the interface and logic of each blade in Wordpress.

After implementing targeted strategies to enhance the user experience on our digital platforms, we are excited to share the impactful results we've achieved. Our recent analysis indicates significant improvements across various key performance indicators:

5X Content Creation Efficiency
There's been an impressive reduction in the average time required for creating new content pages, greatly enhancing the productivity of website content managers.
‍
106% increase in Form Views
User engagement has seen a dramatic increase, with form views exceeding 36,000, predominantly from Sales pages. Service pages have shown a 106% rise in form views.

10% decrease Bounce Rates
We achieved a reduction in bounce rates across Service, Marketing, and Commerce pages, signaling enhanced content relevance and user engagement.

Through the development of a unified design framework, my team and I created a solution that harmonized the user experience across product verticals. The result? A streamlined process that allows teams to create cohesive and effective web pages, fostering a sense of unity and cohesion across the vast Salesforce ecosystem. This project shows how teamwork and smart design thinking can make complicated digital stuff work well together. It helped teams keep making things better for users while keeping everything organized. It's a great example of how working together and good design can really make a difference in a big company like Salesforce.