Inside Salesforce Blog Redesign
Building System Consistency in a WordPress Environment
The “Inside Salesforce” blog is the company’s internal storytelling hub, featuring employee stories and cultural content. The previous site lacked structure, consistency, and accessibility.
My goal was to redesign it using Salesforce’s web design standards — while adapting them to WordPress, where the blog is hosted.
By translating Salesforce’s token and component logic into a CMS-friendly structure, I created a design that looked and behaved like a native Salesforce property, yet remained easy for non-design teams to maintain.
My goal was to redesign it using Salesforce’s web design standards — while adapting them to WordPress, where the blog is hosted.
By translating Salesforce’s token and component logic into a CMS-friendly structure, I created a design that looked and behaved like a native Salesforce property, yet remained easy for non-design teams to maintain.
MY ROLE
UX Designer
User research
UI Designer
DELIVERABLES
Component Library
Usability Testing
Developer Handoff
Style Guide
TEAM
Developers
Graphic designer
YEAR
2022
Overview
The challenge
The Inside Salesforce blog focused heavily on storytelling, but the interface didn’t support a scalable content platform. Navigation was inconsistent, visuals varied, and it lacked cohesion with Salesforce’s broader web experience.
Because the blog lived on WordPress — outside Salesforce’s internal systems — I couldn’t simply import SLDS or the corporate web design system. The solution had to replicate Salesforce’s design-system principles inside a separate CMS, maintaining consistency without shared code.
Because the blog lived on WordPress — outside Salesforce’s internal systems — I couldn’t simply import SLDS or the corporate web design system. The solution had to replicate Salesforce’s design-system principles inside a separate CMS, maintaining consistency without shared code.
🔎 Research
Understanding better user needs
Next, I led a session with stakeholders to create a proto persona representing our target user—company employees. While we understood the general audience, we needed deeper insights into their motivations to empathize better throughout the project
- Better content discovery and navigation
- Easier content management for non-designers
- Visual and structural consistency with Salesforce.com
Analyzing the current state and competitors’ features
I audited the existing blog—marking pain points, inconsistent layouts, missing affordances. Then I looked at other enterprise blogs and internal content hubs to see how they handled navigation, microsites, and content governance.
Page elements and navigation systems evaluation
📐 Design process
System Alignment & Extension
Salesforce’s marketing sites use a token-based web system — utilities like
and
I translated those concepts into WordPress theme styles using CSS variables and component partials.
In Figma, I built components on the same principles: tokens for spacing, color, and radius; variants for layout, state, and density. During handoff, these values became CSS custom properties and reusable block templates inside WordPress.
This approach kept the design system logic intact, even though the platform itself didn’t natively support tokens or variants.
theme--light_gradient, pbc-g-elevation-2,and
border-rad-16 define visual hierarchy and spacing.
I translated those concepts into WordPress theme styles using CSS variables and component partials.
In Figma, I built components on the same principles: tokens for spacing, color, and radius; variants for layout, state, and density. During handoff, these values became CSS custom properties and reusable block templates inside WordPress.
This approach kept the design system logic intact, even though the platform itself didn’t natively support tokens or variants.
Example: Blog Card
One key component was the Blog Card, used for articles and category pages.It followed the same visual logic as Salesforce’s production components:
- Elevation token:
--elevation-2(shadow depth) - Radius token:
--radius-16(corner rounding) - Theme token:
--theme-light(background) - Spacing tokens: consistent padding and grid rhythm
In WordPress, I implemented these through custom CSS variables and Gutenberg block styles so content editors could add new cards without breaking consistency.
In Figma, the same card existed as a variant component (
In Figma, the same card existed as a variant component (
default / hover, category / resource), ensuring parity between design and CMS templates.
Wireframes & Low-Fidelity Prototypes
I explored page templates for story, category, and microsite layouts. Early prototypes focused on navigation behavior — how users moved between blog sections and related microsites. Feedback from content teams shaped a simplified information hierarchy.
Two wireframes from the prototype I tested with the target audience
Feature highlight: Second navigation bar
To support microsites under the blog, I introduced a secondary nav bar. When a user scrolls into a microsite, this nav replaces the primary so that navigation stays relevant to that content domain.This bar uses the same grid and spacing logic as the internal design system but includes flexibility for varying depths of navigation.
The secondary navigation bar in action
👀 Time to Test
I tested with six employees. Tasks included:
- Finding a specific post
- Using the secondary nav
- Leaving feedback
- Browsing between categories
And found
- Users found content faster
- Secondary nav made location within microsites clearer
- Participants were more confident navigating
Testing plan and documentation
📒 Developer Handoff & Documentation
Handoff and implementation oversight
To ensure smooth implementation, I prepared detailed, annotated Figma specs for every component — covering structure, spacing, states, and interaction notes.
Each element was cross-referenced to Salesforce’s internal web system, noting whether it reused or extended an existing pattern.
Developers implemented the redesigned blog within the existing WordPress CMS, using shared CSS utilities, grid layouts, and responsive breakpoints.
I also created a style guide for content editors, outlining how to use templates, typography, and imagery within system constraints — allowing consistent updates without design involvement.
Each element was cross-referenced to Salesforce’s internal web system, noting whether it reused or extended an existing pattern.
Developers implemented the redesigned blog within the existing WordPress CMS, using shared CSS utilities, grid layouts, and responsive breakpoints.
I also created a style guide for content editors, outlining how to use templates, typography, and imagery within system constraints — allowing consistent updates without design involvement.
Portion of the handoff document
Each component spec included dynamic content mapping, interaction logic, and system tokens for colors, spacing, and shadows. I documented hover/focus behavior, accessibility expectations, and responsive breakpoints to give developers a clear blueprint for implementation.
Handoff information
Style guide the for blog owners
To maintain consistency as team members may change, I also developed a comprehensive style guide in spreadsheet form. This guide detailed each new element used to create and edit blog pages, serving as a single source of truth for the team. The style guide included use cases, character counts, and an overarching explanation of the design process with names and references for future inquiries.
💡 Results & Impact
Results & Impact
- Post-launch analytics from WordPress indicated higher engagement and longer reading time.
- Four new microsites were launched using the shared WordPress template system.
- Content teams now create and update pages independently while maintaining brand consistency.
