CS3
/ CASE STUDYPage Designer Reimagined
Orchestrating the development of a bespoke Page Designer component library to enhance features, functionality, and UX.
Early Adoption Challenges
Page Designer, introduced by Salesforce in late 2019 and released in 2020, promised to transform content creation within the Salesforce Commerce Cloud platform (SFCC). It is a module that allows business users to intuitively create components and pages, effectively moving away from the cumbersome traditional content slot/asset workflow.
However, our agency initially encountered adoption challenges when utilizing Page Designer for the first time:
There was a lack of clarity on how to integrate it effectively with the existing processes and systems, and uncertainty about its positioning relative to Propel, our agency’s flagship product on SFCC.
The design and development teams, used to the older workflows, struggled due to unfamiliarity with the new functionality introduced in the tool.
The sales team was unsure how to market this new capability to existing and prospective clients.
Recognizing the significant opportunity to enhance the company’s product and service offerings, in early 2021, I was commissioned by our CTO and VP of Projects & Implementations to lead a SET team to reimagine and fully integrate Page Designer into the our service strategy.
“To change something, build a new model that makes the existing model obsolete.”
Unlocking Cross-Functional Insights
SET was a strategic methodology we employed to drive innovation and collaboration¹. It involved assembling a cross-functional team that meets regularly to define common issues, study them, and propose/implement solutions aimed at increasing efficiency and profitability. Unlike typical projects, SET operated like a guerrilla effort, drawing power from its multi-disciplinary participation. Over the years, this approach proved instrumental in improving our service delivery and expanding our commerce practices.
For its latest application, SET was specifically reinstated to focus on the Page Designer initiative. The goal was to define the features and functionality of this new product offering, while ensuring it aligned seamlessly with the company’s strategic goals and customer needs.
- Originally coined by me, SET stands for “Study. Experiment. Transform.”—capturing the essence of our approach in an easy-to-remember sound bite.
Left to right: Brendan Dion, Sara Dyer, Jamie Gallant, Colby Gatte, Ralph Hansell, Nicole Maldonado, Alyssa Monera, Onur Orhon, Jodie Trotto.
Confronting the Reality
To conduct a preliminary review of the technology, I approached a technical lead and a front-end developer. Our initial study under the hood revealed that the original Page Designer implementation by Salesforce left much to be desired.² Our preliminary findings quickly revealed several critical issues.
Issue 1 – Sub-par functionality
The original components had broken functionality, erratic responsiveness, frequent errors, general usability issues, text overflow, and poor overall visual quality.Issue 2 – Lack of common features
The provided library was missing standard components and features typically found in leading content builders.Issue 3 – Limited variations and flexibility
Out-of-the-box components lacked the necessary layout and styling variations that content authors require to avoid repetitive designs.³Issue 4 – Confusing naming and organization
The original classification of components was confusing and inconsistent, making navigation and authoring less intuitive for business users.
- Salesforce markets Page Designer as a turnkey feature that you can simply enable and start composing great-looking pages.
- Our clients frequently request flexibility in layout and branding to create varied pages using a few components, and customize the look and feel with branded elements.
Deep Dive to Chart the Unknown
For this specific SET team, I had handpicked some of the best resources in the company, each an expert in their respective field, bringing unique perspectives to tackle our challenges.
Early in the project, the team collectively developed a charter to guide our efforts, articulated as a clear outcome:
Our Page Designer approach and standards defined, documented, and internally communicated, so that we can properly and efficiently sell, scope, and deliver Page Designer functionality.
We started with a discovery phase that spanned three months and included extensive research and exploration by our cross-functional team. By utilizing the objectives and key results (OKR) approach, I was able to maintain alignment and track progress, keeping the team focused and accountable. Below are the key activities carried out during this phase:
Collaborative workshops to identify challenges, issues, and opportunities aligned with our objectives.
Analysis of existing Page Designer code we had access to.
Competitor research to define feature sets and market positioning.
Inventory and analysis of legacy components, along with the out-of-the-box components from Salesforce.
Wireframes and UI review sessions to refine user experience.
Experimentation with documenting functional specifications of components.
The discovery phase included a parallel research and development track that focused on the following areas:
Strategies to centralize and reuse content within Page Designer.
Utilizing folders and breadcrumbs for Page Designer pages.
Application of the Page Designer Cartridge to existing Commerce Cloud websites.
Analysis of performance and speed implications of Page Designer.
Reviews of similar Page Designer implementations by other agencies, including positioning and examples.
Identifying potential issues with using Page Designer on product listing and detail pages.
Review of similar page builders outside of the Salesforce ecosystem.
Transforming Ideas into Results
Over the next three months, I led the effort to create our new Page Designer component library, working on the wireframes as the lead designer and collaborating closely with front-end developers. Drawing on insights from our discovery phase, the team developed a Commerce Cloud cartridge that integrates seamlessly with both existing and new Commerce Cloud implementations. This joint effort resulted in a range of enhanced components—some were refinements of existing Salesforce components, repurposed and extended, while others were entirely custom-built from scratch.
The outcome was a transformative Page Designer library that featured enhanced functionality and usability, including:
Enhanced admin features for ease of use with consistent functionality and organization, clear labeling, and helpful tooltips.
An improved layout/asset relationship that extended the out-of-the-box functionality, allowing for greater flexibility and variations in page layouts.
A new library of 20 components designed to make authoring content within Page Designer faster and easier.
Optimized image loading to achieve a better balance between quality and efficiency, significantly improving upon the out-of-the-box capabilities.
Local theming options in components to provide greater flexibility with typography and color variations, allowing for more customized content.
Additionally, I oversaw the production of the following deliverables, which were critical for the adoption of the new component library across the company:
A new documentation format specifically tailored for Page Designer, aligning with development preferences and providing a solid baseline for client customizations.
A special Page Designer demo instance featuring a wireframe-themed skin, designed to focus customers on functionality and equipped with specific test images to evaluate cropping, image quality, and responsive sizing. This demo has become the primary sales tool.
New Figma wireframe templates, specifically designed for Page Designer, ready for easy customization in client projects.
Ground Broken for Success
Following the initial launch, the cartridge has been adopted by several client sites, including notable brands like iRobot, Tom Ford, and Zabar’s. This demonstrates the utility and effectiveness of the Page Designer initiative in enhancing client capabilities and aligning with our strategic market positioning.
The component library was first integrated into the iRobot project, where it was fully utilized by the client team. The project included custom features tailored to their specific requirements.
The effort required for front-end development of content components has been significantly reduced, with designers and developers utilizing a shared platform and handoff process.
The knowledge gained from this initiative allowed us to educate clients on the limitations of the out-of-the-box Page Designer, demonstrating the need for our enhancements, which increased adoption.
Page Designer became a pivotal part of Propel and was productized as a standalone solution for content creation. As its de facto owner, I would continue to guide its growth within Propel and as an independent product.
The Aftermath
Looking back on the transformative journey of integrating Page Designer, several key lessons stand out. These insights not only celebrate our success but also highlight areas for future improvement and adaptation:
Discovery Insights – During the discovery phase, we primarily relied on our prior experience and anecdotal client feedback. In retrospect, conducting direct customer interviews would have offered deeper insights and could have refined our feature set more effectively.
Executive Engagement – The introduction of the new Page Designer initially puzzled executive leadership. To demystify its capabilities, I led the creation of an executive presentation crafted entirely with the components from the new PD cartridge. This hands-on demonstration by the team provided a tangible showcase of its potential, significantly enhancing executive understanding and support.
Supporting Documentation – Although the project was executed by a cross-functional team, constraints in time and resources led to a somewhat isolated approach. To bridge this gap and improve understanding across teams, I created a comprehensive guide titled Page Designer Explained on Confluence. Originally intended for the UX team, it was crafted to be accessible to all departments, promoting company-wide clarity.
Path to Future Opportunities – The team’s work on components and related business-user workflows paved the way for Propel’s request for consideration (RFC) process. It’s designed to evaluate and potentially integrate new client-requested features into Propel. Occasionally, the agency provided funding support to make these features more feasible.
“In working with Onur on Page Designer, it was an excellent opportunity to see him identify an area for innovation, have the vision for what it would look like, pull in the right folks, and be continuously advocating on behalf of the project and pursuing the actions that would make that vision a reality.”