Building on Salesforce’s Web Design System for the
“Inside Salesforce” Blog
Overview
The “Inside Salesforce” blog is the company’s internal storytelling hub, featuring employee stories and cultural content. The existing site lacked structure, consistency, and accessibility. My goal was to redesign the experience using Salesforce’s internal web design system — the same system used across the company’s marketing and corporate websites.

By aligning with this system, I ensured visual and functional consistency with Salesforce’s digital brand. I built new, reusable components in Figma that fit the established design language, allowing non-design teams to update content easily without compromising quality.
MY ROLE
UX Designer
User research
UI Designer
DELIVERABLES
Component Library
Usability Testing
Developer Handoff
Style Guide
TEAM
Developer Handoff
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 presence.

I had to redesign it using Salesforce’s internal web design system — not rewrite a new visual language, but extend and adapt it. The goal was to make the blog feel part of the company’s web ecosystem while allowing flexibility for internal content teams.
Constraints
-I was the only UX resource for most of the project and there was no dedicated project manager — I had to facilitate alignment and communication
What’s in my UX toolkit
Before starting the project, I referred to a UX toolkit I discovered in the book “The User Experience Team of One” by Leah Buley, which guided me in strategizing and selecting the most suitable methods for the project's unique requirements. This toolkit equipped me with valuable insights and frameworks to effectively tackle the design challenges at hand.
Discovering user needs
Stakeholder interviews
I met with content owners, communications leads, and internal users. Their goals included better content discovery, smoother navigation, and more consistent layout templates.
Proto persona development
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
New employee
Goals: Essential resources and cultural introduction.
Navigating the company’s resources.
Pain Points: Information overload and brand unfamiliarity.
Existing Employees
Goals: Quick access to key resources and company updates.
Pain Points: Limited time for exploration.
Executives
Goals: Quick access to internal latest news.
Pain Points: High time constraints and expectations for consistency.
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
I cataloged existing modules from the internal web design system (cards, banners, grids). I mapped which of these could be reused directly and where I needed to build new ones.

New components (for example, a secondary navigation bar for microsites) were built to follow the system’s spacing, typography, and token logic. In Figma, I used variants and properties so the components could flex for different page types but still respect the design system’s rules.
Wireframes & Low-Fidelity Prototypes
I sketched layouts and built low-fidelity prototypes to explore information hierarchy, navigation behavior, and page templates (story, category, microsite). These were shared early for feedback from stakeholders and internal users.
Digital sketches for feature exploration
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
Usability testing
I tested with six employees. Tasks included:
  • Finding a specific post
  • Using the secondary nav
  • Leaving feedback
  • Browsing between categories
Findings:
  • 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
I prepared detailed, annotated Figma specs. Each component was cross-referenced to the internal web system’s pattern or extension. I included spacing, states, typography, and notes for interactions.

Developers implemented the blog updates in the existing CMS using the company’s shared CSS utilities and grid framework. I also delivered a style guide for content editors so future updates stay consistent without needing design oversight.
Portion of the handoff document provided to the development team
Style guide handed to the development team
Style guide development 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.
Style guide handed to the blog owners
Results & Impact
Results & Impact
  • +30% in page visits
  • Average time on page rose from ~0.4 s to ~1.2 s
  • Four microsites launched under the blog umbrella with the new navigation
Reflections
This project reinforced how to extend a design system rather than reinvent. The balance is subtle: honor the system’s logic but provide enough flexibility for real content needs. It also taught me to think ahead: editors, developers, non-design stakeholders all shape how a system evolves.