Led the end-to-end development of an experience-driven “scrolly-telling” template for the Salesforce Blog, transforming static long-form content into an interactive, high-retention experience system. Operated with limited design fidelity and high ambiguity, defining architecture, component strategy, and implementation approach within a WordPress Gutenberg environment. Delivered a modular, reusable template featuring scroll-based interactions, AI-powered summaries, and performance-conscious media handling. The result became a high-demand internal template, driving renewed investment in featurette-style content experiences and enabling future experimentation across Salesforce’s marketing platform.
Full Case Study
Overview
Salesforce’s blog team needed a way to increase engagement and retention on long-form content. Traditional editorial layouts were not optimized for immersive storytelling or modern interaction patterns.
I led the development of a scrolly-telling template—a reusable, experience-driven system designed to transform static articles into interactive, narrative-driven experiences. This required defining the frontend architecture, component strategy, and delivery approach within an existing WordPress + Gutenberg ecosystem, while navigating ambiguity and tight timelines.
Problem
The existing content model prioritized static readability over engagement, limiting the effectiveness of long-form editorial content.
Compounding this, the project was initiated with:
- Incomplete and non-responsive design direction
- Minimal documentation of existing systems
- Limited onboarding context within a large enterprise codebase
This created real risk:
- Misaligned implementation due to lack of source-of-truth designs
- Inefficient builds caused by unknown system constraints
- A high likelihood of delivering a non-scalable or one-off experiment
Constraints
- Timeline: Fixed, ~3 months with delivery expectations
- Team: Frontend lead (myself), 1 supporting FE, 1 BE, PM support, Salesforce stakeholders
- Technical: Existing WordPress VIP + Gutenberg architecture with heavy inherited styles
- Business: Required to reuse existing blocks where possible and integrate with editorial workflows
- Ambiguity: No fully defined UX system; reliance on reference-based design direction
Approach
I treated the project as a system design problem, not a page build.
First, I reverse-engineered the existing platform:
- Audited Gutenberg blocks, patterns, and styling constraints
- Identified reusable components (e.g., Table of Contents, editorial blocks)
- Mapped system limitations and extension points
From there, I:
- Decomposed the design into modular components aligned with Gutenberg architecture
- Defined a template-level system that could orchestrate interaction patterns without breaking editorial workflows
- Established a collaborative feedback loop with Salesforce stakeholders to refine direction
I prioritized:
- Reusability over one-off implementation
- Performance-conscious interaction design
- Progressive enhancement within CMS constraints
Key Decisions & Tradeoffs
1. Reuse vs Reinvent
- Decision: Extend existing Gutenberg blocks where possible
- Tradeoff: Limited design flexibility vs faster delivery and system consistency
2. Interaction Depth vs Performance
- Decision: Implement subtle, targeted animations (GSAP) rather than heavy interaction layers
- Tradeoff: Reduced visual complexity in favor of maintainability and performance stability
3. AI Features vs Cost Control
- Decision: Implement AI-generated synopsis with server-side caching
- Tradeoff: Slight increase in backend complexity vs eliminating repeated API costs and latency
4. Video Experience vs Resource Constraints
- Decision: Use on-demand video playback (video.js)
- Tradeoff: Additional integration work vs preventing memory and performance degradation
5. Scope Discipline
- Decision: Maintain full feature scope by optimizing execution rather than cutting features
- Tradeoff: Required high-efficiency workflows and strong prioritization
Execution
I owned and drove the frontend architecture and delivery, while coordinating across engineering and stakeholders.
Key implementations included:
- Modular scrolly-telling system integrated into Gutenberg
- Scroll-based interaction patterns using GSAP for progressive storytelling
- AI-powered synopsis system with:
- Context-aware section summaries
- Cached responses to reduce API usage and latency
- Integrated audio playback (ElevenLabs) for accessibility and engagement
- Custom toolbar and interaction layer to support dynamic content controls
- Video handling system (video.js) with on-demand playback to protect performance
- Backend adjustments to extend existing blocks (e.g., Table of Contents) into the new template system
I also:
- Defined tickets, epics, and delivery structure
- Delegated work to supporting engineers
- Led implementation through QA and UAT completion
Tooling included React, JavaScript, WordPress Gutenberg, GSAP, and AI-assisted workflows (Cursor, ChatGPT, Claude) to accelerate research and iteration without introducing tech debt.
Outcome / Impact
The delivered template became a high-demand internal pattern.
- Content teams actively requested the template for future posts
- Increased visibility of experience-driven content within the organization
- Demonstrated viability of interactive editorial experiences at enterprise scale
While formal metrics were not captured, the qualitative impact was clear:
- Shift from static content toward engagement-focused storytelling
- Recognition of the template as a repeatable, scalable solution—not a one-off experiment
What This Enabled
This work directly contributed to:
- A broader “featurette” initiative within Salesforce content strategy
- Increased investment in interactive, experience-driven templates
- A foundation for prototype → production workflows across marketing
It enabled teams to:
- Experiment faster with new content formats
- Deliver higher-impact editorial experiences without reinventing infrastructure
- Align design, marketing, and engineering around shared interaction patterns
Key Takeaways
- Systems thinking scales impact: Treating this as a reusable system—not a page—made it viable long-term
- Ambiguity is a leadership opportunity: Lack of direction became space to define architecture and approach
- Performance constraints drive better decisions: Intentional limits resulted in a more sustainable solution
- Prototyping + production alignment accelerates delivery: Bridging both reduced iteration cycles and risk